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

冷不防 2022-03-27 05:54 775阅读 0赞

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

## 问题描述 ##

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

## 问题解决 ##

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

### 1. 让点击失效 ###

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

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

### 2. 销毁掉原图后再创建 ###

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

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

## 总结 ##

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

[Link 1]: https://echarts.baidu.com/tutorial.html#%E5%BC%82%E6%AD%A5%E6%95%B0%E6%8D%AE%E5%8A%A0%E8%BD%BD%E5%92%8C%E6%9B%B4%E6%96%B0
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW9iYWlfb2w_size_16_color_FFFFFF_t_70]: /images/20220327/ab295f77e2ce4f2fa406796eadc446a9.png
[Link 2]: https://echarts.baidu.com/api.html#echartsInstance.off
[myChart.dispose]: https://echarts.baidu.com/api.html#echarts.dispose