appendData異步加載大數據量分片加載數據和增量渲染的解決方案是什么

這期內容當中小編將會給大家帶來有關appendData異步加載大數據量分片加載數據和增量渲染的解決方案是什么，文章內容豐富且以專業的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

Echarts官方提供分片加載數據和增量渲染的方法appendData，但是目前的資料比較少。現結合Echarts官方和面向CSDN編程的方法，整理解決方案如下：

echartsInstance. appendData(opts: {
   
   
   // 要增加數據的系列序號。seriesIndex?: string,// 增加的數據。data?: Array|TypedArray}) => string

此接口用于，在大數據量（百萬以上）的渲染場景，分片加載數據和增量渲染。在大數據量的場景下（例如地理數的打點），就算數據使用二進制格式，也會有幾十或上百兆，在互聯網環境下，往往需要分片加載。appendData接口提供了分片加載后增量渲染的能力，渲染新加入的數據塊時不會清除原有已經渲染的部分。 注意： 現在不支持 系列（series） 使用dataset 同時使用 appendData，只支持系列使用自己的 series.data 時使用 appendData。 目前并非所有的圖表都支持分片加載時的增量渲染。目前支持的圖有：ECharts 基礎版本的 散點圖（scatter） 和線圖（lines）。ECharts GL 的 散點圖（scatterGL）、線圖（linesGL） 和可視化建筑群（polygons3D）。

對"在大數據量（百萬以上）的渲染場景，分片加載數據和增量渲染"的理解：
這個是Echarts對外宣傳的非常具有誘惑力的口號，也是當初我下定決心學習Echarts的理由之一。但是在實際開發中，該場景的實現需要多種條件的配合才可以的：

1. 大數據量的文件生成時間；

2. API接口大數據量的讀取時間；

3. ajax獲取數據后，數據格式的處理時間；

4. DOM的渲染時間；

5. 在純實驗模式下，如果無需額外加載UI界面、其他圖表的渲染等；

測試目的

Echarts折線圖，appendData異步加載大數據量時，分片加載數據和增量渲染的解決方案

測試環境

• 本地json，28006條數據
  

• ajax異步加載

  success: function (res) {
   
   
   var exData = res.data;//console.log(exData);var lineData = [], LineName = [];if (exData.length > 0) {
   
   
   for (var i = 0; i < exData.length; i++) {
   
   
   lineData.push([exData[i].time.slice(11, 19), exData[i].value]);LineName.push(exData[i].time.slice(11, 19));}}//console.log(lineData);//調用封裝函數;getLine(LineName, lineData);}

方案代碼

• 設置line的series組件data: []；

  series: [{
   
   
   data: [],type: 'line'}]

• 渲染圖表，并監聽瀏覽器大小變化進行自適應

      //渲染圖表，并監聽瀏覽器大小變化進行自適應;myChart.setOption(option, true);window.addEventListener("resize", function () {
   
   
   myChart.resize();});

• 分片加載數據和增量渲染

 //分片加載數據和增量渲染;myChart.appendData({
   
   
   seriesIndex: 0,data: lineData})myChart.resize();

data數據格式為數組：[["08:16:44", "28.1"],["08:16:40", "28.1"]]

結論說明

加載28000條數據時，和常規的加載時間差不多；

• 67ms的加載速度，是非常能夠接受的；
  

加載200000條數據時；

• 由于data.json文件過大，導致電腦無法打開，故20萬的數據無能如愿測試；

• 如果使用for循環來測試，則for循環的時間必將計算再內，標準不統一，影響兩次測試的結果，無法說明問題；

大膽的測試

目前測試結果來看，Echarts的宣傳和性能基本上是一致的。但是在項目的開發中，加載慢的很大部分的原因，應該是API接口獲取數據和DOM渲染導致的。

appendData對折線圖起作用嗎？：Echarts高級進階教程(3)：appendData大數據量分片加載數據增量渲染和常規思路異步加載數據的對比，對折線圖是無效的

上述就是小編為大家分享的appendData異步加載大數據量分片加載數據和增量渲染的解決方案是什么了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業資訊頻道。