Echarts和HTML5创建数据大屏展示

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 //鼠标滚轮不能触发缩放
           }
      ],
}