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];
 });