發(fā)現(xiàn)的問題

我們發(fā)現(xiàn)渲染時間非常久(需要10多秒)，而且頁面卡頓；

有沒有好的辦法來解決這個問題呢;

是有的，最好的使用echarts的dataZoom用于區(qū)域縮放；

通過滑塊看指定區(qū)域的數(shù)據(jù)，我們來嘗試一下

dataZoom的常見屬性介紹

type: "slider" || "inside",

  slider:這種類型會在圖表的一側(cè)添加一個滑動條，

  用戶可以通過拖動滑動條來改變數(shù)據(jù)窗口的范圍，從而實現(xiàn)數(shù)據(jù)的縮放。

  inside:這種類型縮放組件是內(nèi)置于坐標(biāo)系中的，

  用戶可以通過鼠標(biāo)滾輪、觸屏手指滑動等方式來操作數(shù)據(jù)的縮放。

  簡單點說:slider會產(chǎn)生一個滾動條，inside不會

xAxisIndex: 可以是一個數(shù)字，表示特定的X軸索引；

  也可以是一個數(shù)組，表示同時控制多個X軸。

xAxisIndex: 0, 控制第1條數(shù)據(jù)開始

start: 0, 數(shù)據(jù)窗口范圍的起始百分比。范圍是：0 ~ 100。表示 0% ~ 100%。

end: 1, 數(shù)據(jù)窗口范圍的結(jié)束百分比。范圍是：0 ~ 100。

minSpan: 0, 用于限制窗口大小的最小值（百分比值），取值范圍是 0 ~ 100。

maxSpan: 10, 用于限制窗口大小的最大值（百分比值），取值范圍是 0 ~ 100。

特別提醒：start: 設(shè)置為0；說明是從第1條數(shù)據(jù)開始的；

那么xAxisIndex就必須是0;

因為xAxisIndex不是0，他們就互相矛盾了；

minSpan 和 maxSpan一般配合使用；主要是用于只展示某一個區(qū)間；

無論用戶怎么縮放；都會在這個區(qū)間

我們使用 dataZoom 來處理海量的數(shù)據(jù)

dataZoom: [
  {
    type: "slider", // 滑塊類型 值有slider和inside
    xAxisIndex: [0],
    start: 0,
    end: 1,
    minSpan: 0, // 用于限制窗口大小的最小值（百分比值），取值范圍是 0 ~ 100。
    maxSpan: 10,
  },
],
series: [
  {
    data:backData.map(v=>v.value),
    type: 'line',
    smooth: true
  }
]

配置之后，我們發(fā)現(xiàn)渲染非常流暢

復(fù)制代碼通過配置前和配置后的圖的對比

我們發(fā)現(xiàn)配置之后；頁面渲染速度非?？?；

打開頁面就渲染完成，壓根想不到是10萬條數(shù)據(jù)；

說明通過 dataZoom 是非常有效的

dataZoom處理海量數(shù)據(jù)的優(yōu)缺點

優(yōu)點：配置簡單；

缺點：只能看指定局部的數(shù)據(jù)；無法看整體數(shù)據(jù)

其他辦法 sampling 降采樣策略 sampling: 'average'

series: [
  {
    data:backData.map(v=>v.value),
    type: 'line',
    smooth: true,
    sampling: 'average',//' 表示采用平均值采樣策略
  }
]

sampling的幾個值

lttb: 采用 Largest-Triangle-Three-Bucket 算法，

      可以最大程度保證采樣后線條的趨勢，形狀和極值。

      不過有可能會造成頁面渲染時間長

average: 取過濾點的平均值

min: 取過濾點的最小值

max: 取過濾點的最大值

minmax: 取過濾點絕對值的最大極值 (從 v5.5.0 開始支持)

sum: 取過濾點的和

sampling 降采樣策略 sampling: 'lttb'

series: [
  {
    data:backData.map(v=>v.value),
    type: 'line',
    smooth: true,
    // 采用 Largest-Triangle-Three-Bucket 算法，
    // 可以最大程度保證采樣后線條的趨勢，形狀和極值。
    // 不過有可能會造成頁面渲染時間長
    sampling: 'lttb'
  }
]

降采樣策略 sampling 的優(yōu)缺點

優(yōu)點：可以看見整體的趨勢；

缺點：部分?jǐn)?shù)據(jù)丟失；tooltip功能可能實現(xiàn)不了

使用 large 屬性

series: [
  {
    data:backData.map(v=>v.value),
    type: 'line',
    smooth: true,
    //開啟大數(shù)據(jù)量優(yōu)化，在數(shù)據(jù)特別多而出現(xiàn)圖形卡頓時候開啟
    large:true, 
  }
]

發(fā)現(xiàn)使用large屬性沒有效果

bash復(fù)制代碼為什么我們使用large沒有效果呢？

我們?nèi)ス倬W(wǎng)看看怎么說的；

https://echarts.apache.org/zh/option.html#series-bar.type

在上面這個文檔中心，我發(fā)現(xiàn)折線圖[type: 'line']沒有 large 屬性

large支持的圖表:柱狀圖(bar), K 線圖 (candlestick), 路徑圖(lines),散點圖(scatter)

其他類型的圖表暫時不支持；

所以我們可以把折線圖更改為柱狀圖看下是否可以解決卡頓問題；

series: [
  {
    data:backData.map(v=>v.value),
    type:'bar',
    //開啟大數(shù)據(jù)量優(yōu)化，在數(shù)據(jù)特別多而出現(xiàn)圖形卡頓時候開啟
    large:true,
  }
]

large 屬性的介紹以及優(yōu)缺點

large:是否開啟大數(shù)據(jù)量優(yōu)化；

在【數(shù)據(jù)圖形】特別多而出現(xiàn)卡頓時候可以開啟。

開啟后配合 largeThreshold 在數(shù)據(jù)量大于指定閾值的時候?qū)L制進(jìn)行優(yōu)化。

優(yōu)點：解決圖形卡數(shù)據(jù)量大而產(chǎn)生的卡頓問題。

缺點：優(yōu)化后不能自定義設(shè)置單個數(shù)據(jù)項的樣式；

【特別提醒】: 

large支持的圖表:柱狀圖(bar), K 線圖 (candlestick), 路徑圖(lines),散點圖(scatter)

"輔助"large屬性最佳配角 largeThreshold

有些時候；數(shù)據(jù)量并不是一開始就是大量；

而是經(jīng)過時間的變化；數(shù)據(jù)才變成了海量數(shù)據(jù)；

如果我們一開始就使用large開啟優(yōu)化；這顯然是不適合的；

這個時候；我們的最佳配角 largeThreshold 就閃亮登場了；

largeThreshold：開啟繪制優(yōu)化的閾值。

當(dāng)數(shù)據(jù)量(即data長度)大于這個閥值的時候，會開啟高性能模式。

低于這個閥值；不會開啟高性能模式；

比如我們希望:數(shù)據(jù)量(即data長度)大于1萬時開啟高性能模式，你可以這樣設(shè)置：

series: [
  {
    data:backData.map(v=>v.value),
    type:'bar',
    //開啟大數(shù)據(jù)量優(yōu)化，在數(shù)據(jù)特別多而出現(xiàn)圖形卡頓時候開啟
    large:true,
    // 數(shù)據(jù)量大于1萬時開啟高性能模式,如果沒有大于1萬;不會開啟
    // 此時我們的數(shù)據(jù)是10萬；會開啟；渲染非?？?/p>
    largeThreshold: 10000,
  }
]

appendData 屬性的簡單介紹

根據(jù)官網(wǎng)的介紹；

appendData屬性會分片加載數(shù)據(jù)和增量渲染；

在大數(shù)據(jù)量的場景下（例如地理數(shù)的打點）；

此時，數(shù)據(jù)量將會非常的大；

在互聯(lián)網(wǎng)環(huán)境下，往往需要分片加載；

appendData 接口提供了分片加載后增量渲染的能力；

渲染新加入的數(shù)據(jù)塊時，不會清除原有已經(jīng)渲染的部分?jǐn)?shù)據(jù)。

但是并不是所有圖表類型都支持這個屬性；

目前不支持series系列的；如柱狀圖，折線圖，餅狀圖這些都不支持；

目前支持的圖有： 散點圖(scatter),線圖(lines)。

ECharts GL的散點圖(scatterGL)、線圖(linesGL) 和 可視化建筑群(polygons3D)。

上面這段參考：https://echarts.apache.org/zh/api.html#echartsInstance.appendData

作者：我的div丟了腫么辦

鏈接：https://juejin.cn/post/7360578271584501775

來源：稀土掘金

著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。