echarts折線圖使用dataZoom,切換資料時渲染異常，出現豎線bug

雪莉06發表於2024-04-24
EchartsOOM

今天做專案遇到一個省份過多時，要加捲軸的需求。但是切換資料的時候，出現上圖所出現的問題。
經查資料，發現可以設定一個屬性來解決這個問題。
filterMode: 'empty'

dataZoom: {
show: this.xiaonengXData.length>12?true:false, // 為true 捲軸出現
realtime: this.xiaonengXData.length>12?true:false, // 實時更新
type:'slider', // 有type這個屬性，捲軸在最下面，也可以不行，寫y：36，這表示距離頂端36px，一般就是在圖上面。
height: 20, // 表示捲軸的高度，也就是粗細
start: this.xiaonengXData.length>12?20:0, // 表示預設展示20%～80%這一段。
end: this.xiaonengXData.length>12?80:100,
bottom: 0,
filterMode: 'empty'
}

dataZoom 的執行原理是透過 資料過濾 以及在內部設定軸的顯示視窗來達到 資料視窗縮放 的效果。

資料過濾模式（dataZoom.filterMode）的設定不同，效果也不同。

可選值為：

filter 當前資料視窗外的資料，被 過濾掉。即 會 影響其他軸的資料範圍。每個資料項，只要有一個維度在資料視窗外，整個資料項就會被過濾掉。

weakFilter 當前資料視窗外的資料，被 過濾掉。即 會 影響其他軸的資料範圍。每個資料項，只有當全部維度都在資料視窗同側外部，整個資料項才會被過濾掉。

empty 當前資料視窗外的資料，被設定為空。即 不會 影響其他軸的資料範圍。

none 不過濾資料，只改變數軸範圍。

如何設定，由使用者根據場景和需求自己決定。經驗來說：

  • 當『只有 X 軸 或 只有 Y 軸受 dataZoom 元件控制』時，常使用 filterMode: 'filter'，這樣能使另一個軸自適應過濾後的數值範圍。
  • 當『X 軸 Y 軸分別受 dataZoom 元件控制』時：
    • 如果 X 軸和 Y 軸是『同等地位的、不應互相影響的』，比如在『雙數值軸散點圖』中，那麼兩個軸可都設為 fiterMode: 'empty'。
    • 如果 X 軸為主，Y 軸為輔，比如在『柱狀圖』中，需要『拖動 dataZoomX 改變 X 軸過濾柱子時，Y 軸的範圍也自適應剩餘柱子的高度』，『拖動 dataZoomY 改變 Y 軸過濾柱子時，X 軸範圍不受影響』，那麼就 X軸設為 fiterMode: 'filter'，Y 軸設為 fiterMode: 'empty'，即主軸 'filter'，輔軸 'empty'。

這裡將其設定為 empty 就可以避免該問題。

相關文章