vue+iviewui集成Highcharts曲线图

最新推荐文章于 2021-04-24 15:25:21 发布

原创最新推荐文章于 2021-04-24 15:25:21 发布 · 180 阅读

0 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何在Vue项目中安装并使用highcharts插件，通过封装曲线图组件实现多图显示。步骤包括安装依赖、配置main.js、创建曲线图组件及调用。组件利用emit机制响应数据变化，展示动态曲线图。

1.vue安装highcharts插件
切换到当前项目下
npm install --save highcharts
npm install --save vue-highcharts

2.找到vue的main.js
加入代码：

import VueHighcharts from 'vue-highcharts';
Vue.use(VueHighcharts);

3.封装曲线图组件(curve.vue)

<template>
    <div class="x-curve" style="width:90%;height:600px;display:inline-block;">
        <div :id="id" ></div>
    </div>
</template>
<script>
    import HighCharts from 'highcharts'
    export default {
        // 验证类型
        props: {
            id: {
                type: String
            }
        },
        data() {
            return{
                option:{
                    chart:{
                        type:'line'
                    },
                    title:{
                        text:''
                    },
                    plotOptions:{
                        line:{
                            dataLabels:{
                                enabled:true
                            }
                        }
                    },
                    xAxis:{
                        categories:[],
                    },
                    yAxis:{
                        text:''
                    },
                    series:[]
                }
            }
        },
        mounted() {
            this.bus.$on('showCurve', index=>{
                setTimeout(() => {
                    if (index.id == this.id) {
                        this.option.title.text       = index.params.title;
                        this.option.xAxis.categories = index.params.categories;
                        this.option.yAxis.text       = index.params.y_label;
                        this.option.series           = index.params.datas;
                        HighCharts.chart(index.id, this.option);
                    }
                });
                
            });
            
        },
        destroyed() {
            this.bus.$off('showCurve');
        },
    }
</script>

调用模块的代码如下：

<template>
    <div class="table">
        <gCurve :id="graph_id"></gCurve>
        <Button type="primary" icon="md-search" @click="getData">搜索</Button>
        <gCurve :id="graph_id2"></gCurve>
    </div>

</template>
<script>
import bus from '../utils/eventBus.js';
export default {
    components:{
        gCurve: require('./chart/curve.vue')
    },
    data(){
        return {
            graph_id:'test',
            graph_id2:'test1',
        }
    },
    //计算属性
    computed: {

    },
    created(){
    },
    mounted() {
        setTimeout((index) => {
            this.getData();
        },1000)
    },
    
    methods: {
            /**
             * 加载数据
             **/
            getData(){
                var params = {
                    title: '测试曲线图',
                    categories:['一月','二月','三月','四月','五月','六月','七月','八月','九月'],
                    y_label:'y轴测试',
                    datas:[{
                        name:'A',
                        data:[7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
                    },{
                        name:'B',
                        data:[3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
                    }]
                }
                bus.$emit('showCurve', {'id':this.graph_id, 'params':params});

                var params1 = {
                    title: '测试曲线图',
                    categories:['1月','2月','3月','4月','5月','6月','7月','8月','9月'],
                    y_label:'y轴测试',
                    datas:[{    
                        name:'A',
                        data:[7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
                    },{
                        name:'B',
                        data:[3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
                    }]
                }

                bus.$emit('showCurve', {'id':this.graph_id2, 'params':params1});

            },
            
        }
}
</script>

如上功能的实现特点：

1.实现了一个页面加载多个相同图
2.使用emit通信机制调用对应的图片组件