vue（vuex）项目中使用Echarts手册

Echarts使用手册（vue中使用）

1、下载echarts

npm install echarts --save

2、引入echarts(按需引入)

在main.js

// main.js

// echarts 按需引入
let echarts = require('echarts/lib/echarts')
// 引入折线图/柱状图/饼图等组件
require('echarts/lib/chart/line')
require('echarts/lib/chart/bar')
require('echarts/lib/chart/pie')
......
// 引入提示框、标题、图例、图片导入、滚轮等组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
require('echarts/lib/component/legend')
require('echarts/lib/component/graphic')
require('echarts/lib/component/dataZoom')
......
// 挂载到Vue原型
Vue.prototype.$echarts = echarts

或，在 src 下创建 plugins 目录，再创建 echarts -> index.js，文件内容为：

//echarts -> index.js

// echarts 按需引入
let echarts = require('echarts/lib/echarts')

// 引入折线图/柱状图/饼图等组件
require('echarts/lib/chart/line')
require('echarts/lib/chart/bar')
require('echarts/lib/chart/pie')
require('echarts/lib/chart/radar')

// 引入提示框和title组件、图例、图片导入、滚动效果,工具栏
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
require('echarts/lib/component/legend')
require('echarts/lib/component/graphic')
require('echarts/lib/component/dataZoom')
require('echarts/lib/component/toolbox')

// 导出 echarts 
export default echarts

然后在 main.js 导入 echarts

// main.js

import echarts from './plugins/echarts/index'
Vue.prototype.$echarts = echarts

这样既可以减少 main.js 中的内容，又可以很好的管理第三方库。

3、使用步骤

3.1 在所需组件创建一个固定宽高的容器

<template>
<div id="xxx" style="width: 600px;height:400px;"></div>
<-- 如考虑组件的复用 -->
<div ref="xxx" style="width: 600px;height:400px;"></div>
</template>

3.2 初始化echarts实例，调用绘制图

mounted() {
 //不复用
  this.myChart=this.$echarts.init(document.getElementById('xxx') );
 //复用
  this.myChart = this.$echarts.init(this.$refs.yyy );  
  this.initData();
},

3.3 绘制图表(自适应布局)

methods: {
  initData() {
	  const option = { 
	      //图表设置信息 
	  }
      this.myChart.setOption(option);
   	  //自适应布局
      let _this = this;
   	  window.addEventListener("resize", function(event) {
      	  _this.myChart.resize();
      });
   }
}

此时我们会发现，当我们写死各项数据时图表显示很正常，没有任何问题，但是，当我们的数据是动态获取时，会发现图表竟然不显示了？！这是因为获取数据后图表并没有进行重绘，仍为无数据状态。
所以动态何获取数据时的关键一点，就是图表的重绘、重绘、重绘！！！

3.4 优化后的版本

mounted() {
  this.getData();
},
methods: {
  // 绘制图表
  initData() {
    // 基于准备好的dom，初始化echarts实例
    const myChart = this.$echarts.init(document.getElementById("barBox"));
    // 图表设置信息
    const option = {
      // 各项配置 -- 定义样式和数据
    };
    // 显示图表
    myChart.setOption(option);
    // 自适应布局
    window.addEventListener("resize", function (event) {
      myChart.resize();
    });
  },
 	// 动态获取数据
  getData() {
    // 先获取数据再画echart
    axios.get('xxx/yyyy/zzz', { parameter })
      .then((res) => {
       	 console.log(res)
         // 重绘图表
         this.initData();
      })
      .catch((err) => {
         console.log(err);
      });
  }
}

4、vuex中使用echarts

1. 定义scheduleMyChart
2. 基于准备好的dom，初始化echarts实例
3. 指定图表的配置项和数据
4. 使用刚指定的配置项和数据显示图标

const state = {
    scheduleMyChart: null,
}
const mutations = {
 SCHEDULE_INIT_DATA(state, datas) {
        state.scheduleMyChart = Vue.prototype.$echarts.init(document.getElementById("time"));
        const scheduleOption = {
           //  图表代码（主要内容）
        };
        state.scheduleMyChart.setOption(scheduleOption);
        // 自适应布局
        window.addEventListener("resize", function (event) {
            state.scheduleMyChart.resize();
        });
    },
  }