需求：echarts图表需要加入点击事件，项目是用指令使用echarts，并没有在页面实例echarts图表，那就需要一个统一的传参来实现：
1、话不多说上代码：
import Vue from 'vue'
const echarts = require('echarts')
/**
* 变量说明：
* el: html element，el=document.getElementById得到值
* binding：绑定变量。其中binding.value值为对象时即为echarts的option；值为数组时，索引0为echarts的option，索引1为echarts的event
* vnode：vue的虚拟节点
*/
export default {
deep: true,
bind(el, binding, vnode) {
// do nothing
},
inserted(el, binding, vnode) {
const self = vnode.context
Vue.nextTick(() => {
// options & events
let [options, events] = [{}, {}]
if (Array.isArray(binding.value)) {
options = binding.value[0] || {}
events = binding.value[1] || {}
} else {
options = binding.value || {}
}
// init chart
self._echartsInstance = echarts.init(el, theme)
self._echartsInstance.showLoading()
self._echartsInstance.setOption(options, true)
self._echartsInstance.hideLoading()
setTimeout(() => {
self._echartsInstance.resize()
}, 0)
// init chart events
Object.keys(events).forEach(key => {
const func = events[key]
if (typeof func === 'function') {
self._echartsInstance.on(key, params => {
func(params)
})
}
})
})
},
update(el, binding, vnode) {
const self = vnode.context
Vue.nextTick(() => {
// options & events
let options = {}
if (Array.isArray(binding.value)) {
options = binding.value[0] || {}
} else {
options = binding.value || {}
}
// init chart
self._echartsInstance = echarts.init(el, theme)
self._echartsInstance.showLoading()
self._echartsInstance.setOption(options, true)
self._echartsInstance.hideLoading()
setTimeout(() => {
self._echartsInstance.resize()
}, 0)
})
},
componentUpdated(el, binding, vnode) {
// do nothing
},
unbind(el, binding, vnode) {
const self = vnode.context
try {
if (self._echartsInstance) {
// console && console.log('in echarts unbind......')
self._echartsInstance.dispose()
}
} catch (e) {}
}
}
main.js里
Vue.directive('echarts', echartsOption)
页面内的使用：
1、templeate里用v-echarts绑定计算属性
对你有帮助的话点个赞吧。