解決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'));

總結

這兩種方法都可以解決該問題，我這裡喜歡使用第一種。感覺它更方便、程式碼量少。