這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)碛嘘P(guān)appendData異步加載大數(shù)據(jù)量分片加載數(shù)據(jù)和增量渲染的解決方案是什么，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

成都創(chuàng)新互聯(lián)公司長期為1000+客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺(tái)，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為蚌埠企業(yè)提供專業(yè)的成都網(wǎng)站建設(shè)、網(wǎng)站制作，蚌埠網(wǎng)站改版等技術(shù)服務(wù)。擁有十載豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。

Echarts官方提供分片加載數(shù)據(jù)和增量渲染的方法appendData，但是目前的資料比較少?，F(xiàn)結(jié)合Echarts官方和面向CSDN編程的方法，整理解決方案如下：

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

此接口用于，在大數(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)渲染的部分。 注意： 現(xiàn)在不支持 系列（series） 使用dataset 同時(shí)使用 appendData，只支持系列使用自己的 series.data 時(shí)使用 appendData。 目前并非所有的圖表都支持分片加載時(shí)的增量渲染。目前支持的圖有：ECharts 基礎(chǔ)版本的 散點(diǎn)圖（scatter） 和線圖（lines）。ECharts GL 的 散點(diǎn)圖（scatterGL）、線圖（linesGL） 和可視化建筑群（polygons3D）。

對(duì)"在大數(shù)據(jù)量（百萬以上）的渲染場景，分片加載數(shù)據(jù)和增量渲染"的理解：
這個(gè)是Echarts對(duì)外宣傳的非常具有誘惑力的口號(hào)，也是當(dāng)初我下定決心學(xué)習(xí)Echarts的理由之一。但是在實(shí)際開發(fā)中，該場景的實(shí)現(xiàn)需要多種條件的配合才可以的：

1. 大數(shù)據(jù)量的文件生成時(shí)間；

2. API接口大數(shù)據(jù)量的讀取時(shí)間；

3. ajax獲取數(shù)據(jù)后，數(shù)據(jù)格式的處理時(shí)間；

4. DOM的渲染時(shí)間；

5. 在純實(shí)驗(yàn)?zāi)Ｊ较?，如果無需額外加載UI界面、其他圖表的渲染等；

測試目的

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

測試環(huán)境

• 本地json，28006條數(shù)據(jù)
  

• 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);//調(diào)用封裝函數(shù);getLine(LineName, lineData);}

方案代碼

• 設(shè)置line的series組件data: []；

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

• 渲染圖表，并監(jiān)聽瀏覽器大小變化進(jìn)行自適應(yīng)

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

• 分片加載數(shù)據(jù)和增量渲染

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

data數(shù)據(jù)格式為數(shù)組：[["08:16:44", "28.1"],["08:16:40", "28.1"]]

結(jié)論說明

加載28000條數(shù)據(jù)時(shí)，和常規(guī)的加載時(shí)間差不多；

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

加載200000條數(shù)據(jù)時(shí)；

• 由于data.json文件過大，導(dǎo)致電腦無法打開，故20萬的數(shù)據(jù)無能如愿測試；

• 如果使用for循環(huán)來測試，則for循環(huán)的時(shí)間必將計(jì)算再內(nèi)，標(biāo)準(zhǔn)不統(tǒng)一，影響兩次測試的結(jié)果，無法說明問題；

大膽的測試

目前測試結(jié)果來看，Echarts的宣傳和性能基本上是一致的。但是在項(xiàng)目的開發(fā)中，加載慢的很大部分的原因，應(yīng)該是API接口獲取數(shù)據(jù)和DOM渲染導(dǎo)致的。

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

上述就是小編為大家分享的appendData異步加載大數(shù)據(jù)量分片加載數(shù)據(jù)和增量渲染的解決方案是什么了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)站名稱：appendData異步加載大數(shù)據(jù)量分片加載數(shù)據(jù)和增量渲染的解決方案是什么
分享URL：http://sd-ha.com/article26/iedjjg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制網(wǎng)站、建站公司、網(wǎng)站設(shè)計(jì)公司、、微信公眾號(hào)、ChatGPT

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)