Echarts【第三篇】框選型dataZoom配置項

dataZoom配置項主要用來對座標軸的數據區域進行縮放，分爲內置型、滑條型以及框選型。

框選型區域縮放功能支持用戶通過框選座標軸的區域，來控制數軸的顯示範圍。(官網實例傳送門)

本文重點總結框選型區域縮放的常用配置:

配置toolbox

配置了toolbox.feature.dataZoom後，工具欄就會顯示數據區域縮放相關的圖標： 分爲區域縮放圖標、區域縮放還原圖標。

區域縮放重置圖標需要單獨引入。

 toolbox: {
      right: '5%', //工具欄離容器右側的距離(left、top、bottom同理)
      feature: {
	      show: true, //顯示區域縮放、縮放還原圖標,默認值爲true
	       dataZoom: {
	           //縮放和還原圖標鼠標懸浮時顯示的提示文本，不設置會顯示默認值
	           title: {
	              zoom: '縮放',
	              back: '還原'
	           },
	           //縮放和還原的圖標路徑，不指定則顯示默認圖標
	           icon: {
	              zoom: '',
	              back: ''
	           },
	           iconStyle: {}, //設置圖標樣式
	           xAxisIndex: 0, //指定哪些X軸可以被控制
	           yAxisIndex: false //指定哪些Y軸可以被控制（設置爲 false，則不控制任何y軸）
	       },
	      restore: {} //區域縮放重置
      }
  },

默認選中區域縮放

如果不做相關配置，需要先點擊工具欄的區域縮放圖標，才能開啓區域縮放功能。
實際使用中，這會帶來很多不便。

  //初始化Echart的具體過程不在此贅述
   let chart = this.$echarts.init(document.getElementById(''));
   chart.dispatchAction({
        // 默認選中區域縮放
        type: 'takeGlobalCursor',
        key: 'dataZoomSelect',
        dataZoomSelectActive: true
      });

獲取縮放選中的數據

如果需要拿到dataZoom所選的起止數據，這時可以用到API中的events. datazoom事件:

 chart.on('datazoom', params => {
     console.log(params , 'params');
 });

如果Echarts的橫軸爲時間型的數據，僅僅拿到起止位置的數字或百分比是不夠的，
可以在拿到數值後通過getOption()API從座標軸的數據中匹配相應的值。

比如需要拿到具體的時間點:

 chart.on('datazoom', params => {
     console.log(params , 'params');
     //縮放選中的開始時間點數值
     let startX = params.batch[0].startValue;
     //縮放選中的結束時間點數值
     let endX = params.batch[0].endValue;
     //根據獲取的數值從X軸的data中獲取對應的時間點
     let startTime = chart.getOption().xAxis[0].data[startX];
     let endTime =  chart.getOption().xAxis[0].data[endX];
 });

注: 上述代碼中的xAxis值的獲取需要結合自己代碼中，X軸數據的實際結構進行取值。

框選型&內置型聯合使用

在只配置了toolbox中的dataZoom的情況下,如果遇到不能獲取到dataZoom的數據的問題，
可以考慮與內置型區域縮放組件結合使用的辦法:

在Option中配置內置型dataZoom：

let option = { 
     dataZoom: [
         {
             type: 'inside',
             xAxisIndex: 0
           }
      ],
}

內置型縮放組件的特點是支持鼠標在座標系範圍內，用滾輪滾動的方式進行縮放。

如果只想保留框選型的縮放方式，可以將內置型縮放的觸發方式關閉:

let option = { 
     dataZoom: [
         {
              type: 'inside',
              xAxisIndex: 0,
              zoomOnMouseWheel: false //鼠標滾輪不能觸發縮放
           }
      ],
}