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

 今天做項目遇到一個省份過多時，要加滾動條的需求。但是切換數據的時候，出現上圖所出現的問題。
經查資料，發現可以設置一個屬性來解決這個問題。
      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 就可以避免該問題。