需求：echarts圖表需要加入點(diǎn)擊事件嚷缭，項(xiàng)目是用指令使用echarts，并沒有在頁面實(shí)例echarts圖表耍贾，那就需要一個(gè)統(tǒng)一的傳參來實(shí)現(xiàn)：
1阅爽、話不多說上代碼：
import Vue from 'vue'
const echarts = require('echarts')
/**
* 變量說明：
* el: html element署惯，el=document.getElementById得到值
* binding：綁定變量钥飞。其中binding.value值為對象時(shí)即為echarts的option；值為數(shù)組時(shí)贮缅，索引0為echarts的option晃听，索引1為echarts的event
* vnode：vue的虛擬節(jié)點(diǎn)
*/
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)
頁面內(nèi)的使用：
1百侧、templeate里用v-echarts綁定計(jì)算屬性
<template>
? <div>
? ? <div v-if="ready" :style="chartStyle" v-echarts="echartsOptions"></div>
? </div>
</template>
<script>
? export default {
? ? ? data() {
? ? ? const self = this
? ? ? return {
? ? ? ? ready: false,
? ? ? ? options: null,
? ? ? ? events: {
? ? ? ? ? click(params) {
? ? ? ? ? ? self.onEchartsClick(params)
? ? ? ? ? }
? ? ? ? }
? ? ? }
? ? },
? ? computed: {
? ? ? echartsOptions() {
? ? ? //傳入兩個(gè)參數(shù)，1為圖表杂伟，2為事件
? ? ? ? return [this.options, this.events]
? ? ? }
? ? },
? ? methods: {
? ? //事件返回的參數(shù)移层，在這里操作就ok了
? ? ? onEchartsClick(params) {
? ? ? ? console.log(params)
? ? ? },
? ? ? load() {
? ? ? ? ? ? let option={
? ? ? ? ? ? ? ? //你定義的圖表
? ? ? ? }
? ? ? ? ? ? this.options = option
? ? ? ? ? ? this.$nextTick(() => {
? ? ? ? ? ? ? this.ready = true;
? ? ? ? ? ? });
? ? ? }
? ? },
? mounted() {
? ? ? this.load()
? ? },
}
</script>
對你有幫助的話點(diǎn)個(gè)贊吧。
