vue echarts实现绑定事件和解绑事件
作者：weixin_46412709
这篇文章主要介绍了vue echarts实现绑定事件和解绑事件方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
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啦
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。