vue directive(指令)形式使用echarts

安装 echarts依赖： npm install echarts --save

新建指令文件 echarts.js

import Vue from 'vue';
// 引入echarts主模块
import echarts from 'echarts'
export default {
  deep: true,
  bind: (el, binding) => {
    Vue.nextTick(() => {
      el.echartsInstance = echarts.init(el);

      el.resizeEventHandler = function () {
        el.echartsInstance.resize();
      };

      if (window.attachEvent) {
        window.attachEvent('onresize', el.resizeEventHandler);
      } else {
        window.addEventListener('resize', el.resizeEventHandler, false);
      }
    });
  },
  update (el, binding) {
    Vue.nextTick(() => {
      el.echartsInstance.setOption(binding.value);
    });
  },
  unbind: (el) => {
    el.echartsInstance.dispose();

    let _this = this;

    if (window.attachEvent) {
      window.detachEvent('onresize', _this.resizeEventHandler);
    } else {
      window.removeEventListener('resize', _this.resizeEventHandler, false); ;
    }
  }
}

指令使用

// 引入指令文件
import echarts from '../directive/echarts.js'

// 写入指令
directives: {
    echarts
  }

// 在页面中引用
<div v-echarts='echartsOption' id="echarts" class="echarts-box"></div>