vue echarts实现绑定事件和解绑事件_Vue.js

vue echarts绑定事件和解绑事件

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

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

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

vue使用echarts中遇到的问题及解决

最近在做demo的过程中用到了echarts，在过程中也踩了好多坑，所以专门记录一下遇到的问题及解决方案。

遇到的问题

安装完echarts依赖后表格示例无法显示
示例图标显示后格式异常
再次进入业务事件后提示dom已加载并展示异常

解决方案

安装完echarts依赖后表格示例无法显示

解决方案：这种问题一般会是两种情况：

一是版本不对应的问题，npm install echarts --save默认的是最新的版本(5.1x)，直接安装最新版本的echarts可能会出现上述问题，所以需要降低版本安装echarts。
二是安装echarts后未成功挂载到vue上。

我是第二种情况，解决代码如下

// 安装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({
 ...
})

示例图标显示后格式异常

解决方案: 我当时出现的情况是示例只在很窄的区域展示，所以要给对应的dom-div设置宽高，解决如下

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

再次进入业务事件后提示dom已加载并展示异常

解决方案: 这个问题确实有点恶心，当我再次调用对应的echarts时，控制台会报dom已加载的警告，并且页面的示例图表会展示异常，解决方法是每次重新调用echarts时都需要先判断是否dom上已经存在，若存在则需要销毁对应的dom结构，这样处理过后就不会再有上述提示警告并且echarts图表能够正常展示，解决代码如下：

// 关键代码
	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
            }
          ]
        })
      }
    }

至此，我们就可以在vue项目中随意使用echarts啦