這期內(nèi)容當(dāng)中小編將會給大家?guī)碛嘘P(guān)appendData異步加載大數(shù)據(jù)量分片加載數(shù)據(jù)和增量渲染的解決方案是什么，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。
成都創(chuàng)新互聯(lián)公司長期為1000+客戶提供的網(wǎng)站建設(shè)服務(wù)，團隊從業(yè)經(jīng)驗10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為蚌埠企業(yè)提供專業(yè)的成都網(wǎng)站建設(shè)、網(wǎng)站制作，蚌埠網(wǎng)站改版等技術(shù)服務(wù)。擁有十載豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。
Echarts官方提供分片加載數(shù)據(jù)和增量渲染的方法appendData，但是目前的資料比較少?，F(xiàn)結(jié)合Echarts官方和面向CSDN編程的方法，整理解決方案如下：
重慶分公司
重慶分公司
echartsInstance. appendData(opts: {
// 要增加數(shù)據(jù)的系列序號。seriesIndex?: string,// 增加的數(shù)據(jù)。data?: Array|TypedArray}) => string此接口用于，在大數(shù)據(jù)量（百萬以上）的渲染場景，分片加載數(shù)據(jù)和增量渲染。在大數(shù)據(jù)量的場景下（例如地理數(shù)的打點），就算數(shù)據(jù)使用二進制格式，也會有幾十或上百兆，在互聯(lián)網(wǎng)環(huán)境下，往往需要分片加載。appendData接口提供了分片加載后增量渲染的能力，渲染新加入的數(shù)據(jù)塊時不會清除原有已經(jīng)渲染的部分。 注意： 現(xiàn)在不支持 系列（series） 使用dataset 同時使用 appendData，只支持系列使用自己的 series.data 時使用 appendData。 目前并非所有的圖表都支持分片加載時的增量渲染。目前支持的圖有：ECharts 基礎(chǔ)版本的 散點圖（scatter） 和線圖（lines）。ECharts GL 的 散點圖（scatterGL）、線圖（linesGL） 和可視化建筑群（polygons3D）。
對"在大數(shù)據(jù)量（百萬以上）的渲染場景，分片加載數(shù)據(jù)和增量渲染"的理解：
這個是Echarts對外宣傳的非常具有誘惑力的口號，也是當(dāng)初我下定決心學(xué)習(xí)Echarts的理由之一。但是在實際開發(fā)中，該場景的實現(xiàn)需要多種條件的配合才可以的：
大數(shù)據(jù)量的文件生成時間；
API接口大數(shù)據(jù)量的讀取時間；
ajax獲取數(shù)據(jù)后，數(shù)據(jù)格式的處理時間；
DOM的渲染時間；
在純實驗?zāi)Ｊ较拢绻麩o需額外加載UI界面、其他圖表的渲染等；
Echarts折線圖，appendData異步加載大數(shù)據(jù)量時，分片加載數(shù)據(jù)和增量渲染的解決方案
本地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)聽瀏覽器大小變化進行自適應(yīng)
//渲染圖表，并監(jiā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"]]
67ms的加載速度，是非常能夠接受的；
由于data.json文件過大，導(dǎo)致電腦無法打開，故20萬的數(shù)據(jù)無能如愿測試；
如果使用for循環(huán)來測試，則for循環(huán)的時間必將計算再內(nèi)，標(biāo)準(zhǔn)不統(tǒng)一，影響兩次測試的結(jié)果，無法說明問題；
目前測試結(jié)果來看，Echarts的宣傳和性能基本上是一致的。但是在項目的開發(fā)中，加載慢的很大部分的原因，應(yīng)該是API接口獲取數(shù)據(jù)和DOM渲染導(dǎo)致的。
appendData對折線圖起作用嗎？：Echarts高級進階教程(3)：appendData大數(shù)據(jù)量分片加載數(shù)據(jù)增量渲染和常規(guī)思路異步加載數(shù)據(jù)的對比，對折線圖是無效的
上述就是小編為大家分享的appendData異步加載大數(shù)據(jù)量分片加載數(shù)據(jù)和增量渲染的解決方案是什么了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
