解决echarts中多次数据异步加载后触发事件叠加问题

解决echarts中多次数据异步加载后触发事件叠加问题

问题描述

echarts中数据通过ajax等方式多次异步加载数据后，当点击图表中的同一位置时，其触发事件也会随之触发多次。在官方的教程中有这样一局原话“所有数据的更新都通过 setOption实现，你只需要定时获取数据，setOption 填入数据，而不用考虑数据到底产生了那些变化，ECharts 会找到两组数据之间的差异然后通过合适的动画去表现数据的变化”。我这里理解为其在对比数据差异时没有将原数据的图进行删除，而是在其上面进行了覆盖。或者通俗的称为“层叠”。类似于下图这种形式。

问题解决

根据上图可以知道，解决多次事件触发的方式有两种：a.让除最上面图的剩下所有图的点击事件时效。b.将除最上面图的剩下图都移除、销毁

1. 让点击失效

该方法即为解绑原图的点击事件。即“echats.off(“click”)”,其官方描述中为解绑对应类型的事件函数。具体做法为在初始化echarts后，先使用该函数，然后在进行异步(类似于ajax)请求数据。

 var myChart = echarts.init(document.getElementById('myId'));
 myChart.off('click');
 //.....

2. 销毁掉原图后再创建

该方法为将以前的原图销毁掉后，再重新初始化创建。使用函数为“myChart.dispose();”。用法如下：

var myChart = echarts.init(document.getElementById('myId'));
//......
// 销毁掉原实例
myChart.dispose();
// 再重新创建实例
var myChart = echarts.init(document.getElementById('myId'));

总结

这两种方法都可以解决该问题，我这里喜欢使用第一种。感觉它更方便、代码量少。