vue之使用echarts圖表setOption多次很卡問題及解決

更新時間：2023年07月01日 09:49:00 作者：ISM Web組態(tài)軟件

這篇文章主要介紹了vue之使用echarts圖表setOption多次很卡問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

使用echarts圖表setOption多次很卡

項目場景

在開發(fā)ISM組態(tài)軟件時，使用echarts圖表，拖拽圖表很卡。

問題描述

在vue中使用echarts使用setOption更新加載圖形很慢

原因分析

由于this.echartsView = echarts.init(view, null);初始化圖表時，echartsView 變量是定義在data里，這就導致了圖表setOption和resize時，canvas觸發(fā)了vue監(jiān)聽而更新，而每一次的更新，導致加載變慢

解決方案

網上都是說把變量定義在script里，是可以解決，但是這樣針對一個組件的情況，但是如果一個頁面有多個組件，這樣定義在script的變量是多個組件共享的，就會導致其他組件顯示不正常。

針對這個情況。直接在created里面定義this.echartsView

this.echartsView = null

或者直接

this.echartsView = echarts.init(view, null);

不要在data里面定義echartsView 就可以了。

echarts大數據多圖表繪制卡頓解決方案

頁面卡頓原因

1、頁面繪制的圖比較多，每一個圖例在沒有數據的時候它會創(chuàng)建一個定時器去渲染氣泡，頁面切換后，echarts圖例是銷毀了，但是這個echarts的實例還在內存當中，同時它的氣泡渲染定時器還在運行。這就導致Echarts占用CPU高，導致瀏覽器卡頓，當數據量比較大時甚至瀏覽器崩潰

2、數據量已經大到瀏覽器卡死了

解決方法

1、在mounted()方法和destroy()方法之間加一個beforeDestroy()方法釋放該頁面的chart資源，我也試過使用dispose()方法，但是dispose銷毀這個圖例，圖例是不存在了，但圖例的resize()方法會啟動，則會報沒有resize這個方法，而clear()方法則是清空圖例數據，不影響圖例的resize，而且能夠釋放內存，切換的時候就很順暢了，實現代碼如下：

beforeDestroy(){
? ? this.$refs.myChart && this.$refs.myChart.clear();
};

2、數據量已經大到瀏覽器卡死，其實最好從設計上優(yōu)化，要么不要一個頁面展示那么多圖，要么讓服務端把數據做一下采樣，畢竟那么多的點也沒法看，另外echarts也提供了大數據量（百萬以上）的渲染場景，分片加載數據和增量渲染。

在大數據量的場景下（例如地理數的打點），就算數據使用二進制格式，也會有幾十或上百兆，在互聯網環(huán)境下，往往需要分片加載。

appendData 接口提供了分片加載后增量渲染的能力，渲染新加入的數據塊時不會清除原有已經渲染的部分，實現代碼如下：

?var loadedChunkIndex = 0;
var chunkCount = rawData.length;//大數據被分了幾組list
function appendData() {
? ? if (loadedChunkIndex >= chunkCount) {
? ? ? ? return;
? ? }
? ? setTimeout(function () {
? ? ? ? chart.appendData({seriesIndex: 0, data: rawData[loadedChunkIndex]});
? ? ? ? loadedChunkIndex++;
? ? ? ? appendData();
? ? }, 300);
}
appendData();

注意事項：

1、我們現在所有圖表組件中接口數據都是通過dataset參數實現的，對于巨大數據量的渲染（如百萬以上的數據量），需要使用 appendData 進行增量加載，這種情況不支持使用 dataset，需要使用series.data。

2、目前并非所有的圖表都支持分片加載時的增量渲染。目前支持的圖有：ECharts 基礎版本的散點圖（scatter）和線圖（lines）。ECharts GL 的散點圖（scatterGL）、線圖（linesGL）和可視化建筑群（polygons3D）。