亚洲乱色熟女一区二区三区丝袜,天堂√中文最新版在线,亚洲精品乱码久久久久久蜜桃图片,香蕉久久久久久av成人,欧美丰满熟妇bbb久久久

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

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

有沒(méi)有好的辦法來(lái)解決這個(gè)問(wèn)題呢;

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

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

dataZoom的常見(jiàn)屬性介紹

type: "slider" || "inside",

  slider:這種類(lèi)型會(huì)在圖表的一側(cè)添加一個(gè)滑動(dòng)條，

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

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

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

  簡(jiǎn)單點(diǎn)說(shuō):slider會(huì)產(chǎn)生一個(gè)滾動(dòng)條，inside不會(huì)

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

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

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

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；說(shuō)明是從第1條數(shù)據(jù)開(kāi)始的；

那么xAxisIndex就必須是0;

因?yàn)閤AxisIndex不是0，他們就互相矛盾了；

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

無(wú)論用戶怎么縮放；都會(huì)在這個(gè)區(qū)間

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

dataZoom: [
  {
    type: "slider", // 滑塊類(lèi)型 值有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ù)制代碼通過(guò)配置前和配置后的圖的對(duì)比

我們發(fā)現(xiàn)配置之后；頁(yè)面渲染速度非常快；

打開(kāi)頁(yè)面就渲染完成，壓根想不到是10萬(wàn)條數(shù)據(jù)；

說(shuō)明通過(guò) dataZoom 是非常有效的

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

優(yōu)點(diǎn)：配置簡(jiǎn)單；

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

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

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

sampling的幾個(gè)值

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

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

      不過(guò)有可能會(huì)造成頁(yè)面渲染時(shí)間長(zhǎng)

average: 取過(guò)濾點(diǎn)的平均值

min: 取過(guò)濾點(diǎn)的最小值

max: 取過(guò)濾點(diǎn)的最大值

minmax: 取過(guò)濾點(diǎn)絕對(duì)值的最大極值 (從 v5.5.0 開(kāi)始支持)

sum: 取過(guò)濾點(diǎn)的和

sampling 降采樣策略 sampling: 'lttb'

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

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

優(yōu)點(diǎn)：可以看見(jiàn)整體的趨勢(shì)；

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

使用 large 屬性

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

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

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

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

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

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

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

其他類(lèi)型的圖表暫時(shí)不支持；

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

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

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

large:是否開(kāi)啟大數(shù)據(jù)量?jī)?yōu)化；

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

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

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

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

【特別提醒】: 

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

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

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

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

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

這個(gè)時(shí)候；我們的最佳配角 largeThreshold 就閃亮登場(chǎng)了；

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

當(dāng)數(shù)據(jù)量(即data長(zhǎng)度)大于這個(gè)閥值的時(shí)候，會(huì)開(kāi)啟高性能模式。

低于這個(gè)閥值；不會(huì)開(kāi)啟高性能模式；

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

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

appendData 屬性的簡(jiǎn)單介紹

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

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

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

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

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

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

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

但是并不是所有圖表類(lèi)型都支持這個(gè)屬性；

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

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

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

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

作者：我的div丟了腫么辦

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

來(lái)源：稀土掘金

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