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 渲染出來並且根據代碼設置顯示縮放區域的起止位置，可以根據自己的需要修改起止位置。