安裝 echarts依賴(lài)： 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'
// 寫(xiě)入指令
directives: {
echarts
}
// 在頁(yè)面中引用
<div v-echarts='echartsOption' id="echarts" class="echarts-box"></div>
