解決echarts中多次資料非同步載入後觸發事件疊加問題
阿新 • • 發佈:2019-01-12
解決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'));
總結
這兩種方法都可以解決該問題,我這裡喜歡使用第一種。感覺它更方便、程式碼量少。