欧美成人精品手机在线观看_69视频国产_动漫精品第一页_日韩中文字幕网 - 日本欧美一区二区

發現的問題

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

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

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

通過滑塊看指定區域的數據，我們來嘗試一下

dataZoom的常見屬性介紹

type: "slider" || "inside",

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

  用戶可以通過拖動滑動條來改變數據窗口的范圍，從而實現數據的縮放。

  inside:這種類型縮放組件是內置于坐標系中的，

  用戶可以通過鼠標滾輪、觸屏手指滑動等方式來操作數據的縮放。

  簡單點說:slider會產生一個滾動條，inside不會

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

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

xAxisIndex: 0, 控制第1條數據開始

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

end: 1, 數據窗口范圍的結束百分比。范圍是：0 ~ 100。

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

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

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

那么xAxisIndex就必須是0;

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

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

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

我們使用 dataZoom 來處理海量的數據

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
  }
]

配置之后，我們發現渲染非常流暢

復制代碼通過配置前和配置后的圖的對比

我們發現配置之后；頁面渲染速度非常快；

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

說明通過 dataZoom 是非常有效的

dataZoom處理海量數據的優缺點

優點：配置簡單；

缺點：只能看指定局部的數據；無法看整體數據

其他辦法 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 的優缺點

優點：可以看見整體的趨勢；

缺點：部分數據丟失；tooltip功能可能實現不了

使用 large 屬性

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

發現使用large屬性沒有效果

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

我們去官網看看怎么說的；

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

在上面這個文檔中心，我發現折線圖[type: 'line']沒有 large 屬性

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

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

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

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

large 屬性的介紹以及優缺點

large:是否開啟大數據量優化；

在【數據圖形】特別多而出現卡頓時候可以開啟。

開啟后配合 largeThreshold 在數據量大于指定閾值的時候對繪制進行優化。

優點：解決圖形卡數據量大而產生的卡頓問題。

缺點：優化后不能自定義設置單個數據項的樣式；

【特別提醒】: 

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

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

有些時候；數據量并不是一開始就是大量；

而是經過時間的變化；數據才變成了海量數據；

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

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

largeThreshold：開啟繪制優化的閾值。

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

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

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

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

appendData 屬性的簡單介紹

根據官網的介紹；

appendData屬性會分片加載數據和增量渲染；

在大數據量的場景下（例如地理數的打點）；

此時，數據量將會非常的大；

在互聯網環境下，往往需要分片加載；

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

渲染新加入的數據塊時，不會清除原有已經渲染的部分數據。

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

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

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

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

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

作者：我的div丟了腫么辦

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

來源：稀土掘金

著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。