使用echarts圖表setOption多次很卡

項(xiàng)目場景

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

問題描述

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

原因分析

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

解決方案

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

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

this.echartsView = null

或者直接

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

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

echarts大數(shù)據(jù)多圖表繪制卡頓解決方案

頁面卡頓原因

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

2、數(shù)據(jù)量已經(jīng)大到瀏覽器卡死了

解決方法

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

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

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

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

appendData 接口提供了分片加載后增量渲染的能力，渲染新加入的數(shù)據(jù)塊時不會清除原有已經(jīng)渲染的部分，實(shí)現(xiàn)代碼如下：

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

注意事項(xiàng)：

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

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

總結(jié)

以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論