Vue Echarts圖表dataZoom縮放區域根據資料量顯示

當時用echarts圖表顯示資料的時候，比如折線圖柱狀圖，當資料量太大的時候，需要設定 dataZoom實現區域縮放，但是當資料量比較少的時候又不希望出現區域縮放控制元件，所以說這個時候就需要根據資料量動態顯示dataZoom。

在 echarts 圖表的 option 配置中配置 dataZoom項：

  dataZoom: [{
    type: 'slider',
    show: true,
    height: 20,
    left: '10%',
    right: '10%',
    bottom: '2%',
    start: 0,
    end: 100,
    textStyle: {
      color: '#d4ffff',
      fontSize: 11
    }
  }, {
    type: 'inside'
  }],
 

dataZoom具體配置 點這裡

然後寫程式碼去判斷一下這個dataZoom 是否生效以及他的初始和結束分別是多少。

比如當我想讓柱狀圖或者是折線圖橫軸數量超過7的時候出現縮放控制元件，那在小於等於7的時候把控制元件的show屬性設定為false，初始設定為0，當超過7的時候把控制元件的show屬性設定為true，初始位置計算一下或者是直接設定為0。xData是x軸資料的list集合。

        if (xData.length <= 7) {
          option.dataZoom[0].show = false
          option.dataZoom[0].start = 0
        } else {
          option.dataZoom[0].start = (7 / xData.length) * 100
          // option.dataZoom[0].start = 0
        }
 

這樣就可以了！

然後就可以渲染echarts圖表了。

this.charts = echarts.init(document.getElementById(id))
this.charts.clear()  // 清空echarts資料
this.charts.setOption(option) // 重新渲染option

銷燬 echarts 圖表，一般是放到銷燬元件的生命週期中。

// 銷燬
destroyed () {
  this.charts.dispose()
}

OK，完成！當後臺返回的x軸資料超過7的時候，會自動的把 dataZoom 渲染出來並且根據程式碼設定顯示縮放區域的起止位置，可以根據自己的需要修改起止位置。