vue中使用echarts处理统计需求

reembarkation

已于 2022-07-01 16:53:19 修改

阅读量716

点赞数

分类专栏： vue js 文章标签： vue.js 前端 javascript

于 2022-06-27 11:23:14 首次发布

本文链接：https://blog.csdn.net/reembarkation/article/details/125480177

版权

js 同时被 2 个专栏收录

53 篇文章 0 订阅

订阅专栏

vue

48 篇文章 0 订阅

订阅专栏

项目中使用图形分析数据，一般会使用echarts组件，使用方法一般如下：（vue 2.6, echarts 5.2）

1.首先安装echarts组件（指定版本）：

npm install echarts@5.2.2--save

2.在main.js文件中引入组件并挂载在vue的原型上：

import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts

3.在页面中使用组件：

1.定义容器，在页面html中添加div,使用id标识组件

 <div id="echarts"></div>

2.数据是动态加载而来的，可以先获取数据，在init组件

echartsInit() {
      myChart = this.$echarts.init(document.getElementById('echarts'));
      ...
      // 根据需要，配置相应的setOption
}

3.如果需要创建点击组件中的折线或者柱状图等，触发相应的事件，可以在echartsInit（）中定义，代码如下：

  echartsInit() {    
    ...
    myChart.on("click", function (param) {
        that.tableResType = param.data.type;
        let startDate = param.name;
        that.onpage = 1;
        that.getList(1);
      });
}

4.如果要刷新或者重置配置的数据，则需要如下操作：

首先，将定义myChart拿到echartsInit()外部，如：

let myChart;
export default {
...
}

然后在定义刷新的方法处：

        this.$nextTick(() => {
            if (myChart != null && myChart != "" && myChart != undefined) {
              myChart.dispose(); //销毁
            }
            this.echartsInit();
          });