vue echarts实现绑定事件和解绑事件

// echarts 官网里面 action 和 events 都是触发事件的一些行为，默认事件和自定义事件

var mYcharts = echarts.init(dom)
// 绑定事件
mYcharts.on('click', function (arg) {
	// 里面会有默认形参
	console.log(arg)
})

mYcharts.off('click') // 解绑 click 事件

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

// 在main.js文件中添加
import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts 

// 实际业务处理文件中使用echarts
<div ref="xxxx" />

this.$echarts.init(this.$refs.xxxx).setOption({
 ...
})

<div ref="xxxx" style="width: 45vh; height: 300px" />

// 关键代码
	let myChart = this.$echarts.getInstanceByDom(
      this.$refs.xxxx
    )
    if (myChart == null) {
	  myChart = this.$echarts.init(this.$refs.xxxx).setOption({
        ...
      })
    }

// 举例
    // 账单类型
    noteTypeBarEcharts() {
      const finalArr = this.sortArr(this.tableInfo)
      console.log('分类后的数组', finalArr)
      // 检测是否已经存在echarts实例，如果不存在，则不再去初始化
      let myChart = this.$echarts.getInstanceByDom(
        this.$refs.barSecond
      )
      if (myChart == null) {
        myChart = this.$echarts.init(this.$refs.barSecond).setOption({
          title: {
            text: '账单类型',
            subtext: '(单位/元)',
            left: 'center'
          },
          tooltip: {
            trigger: 'item',
            formatter: '{b}:{c} ({d}%)'
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          legend: {
            orient: 'vertical',
            left: 'left'
          },
          series: [
            {
              type: 'pie',
              radius: '50%',
              data: finalArr
            }
          ]
        })
      }
    }