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

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

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

使用echarts圖表setOption多次很卡

項(xiàng)目場景

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

問題描述

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

原因分析

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

解決方案

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

針對(duì)這個(gè)情況。直接在created里面定義this.echartsView

this.echartsView = null

或者直接

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

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

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

頁面卡頓原因

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

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

解決方法

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

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

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

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

appendData 接口提供了分片加載后增量渲染的能力，渲染新加入的數(shù)據(jù)塊時(shí)不會(huì)清除原有已經(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)的，對(duì)于巨大數(shù)據(jù)量的渲染（如百萬以上的數(shù)據(jù)量），需要使用 appendData 進(jìn)行增量加載，這種情況不支持使用 dataset，需要使用series.data。

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