Echarts大数据量图表：鼠标滚轮缩放、滑动条缩放、区域缩放

一：问题的产生

        我们想要画图表时一般都会选用Echarts组件库。数据量小的我们先不说，如果数据量特别大，我们画出来的图表可能是这样的：

这是1968年到2018年的所有数据，可以看到，我们画出来的图非常密集，看不到其中的细节的数据变化。

        为此，Echarts给我们提供了三种在直角坐标系里可以缩放图表的方式，即可以看到的区域缩放与滑动条缩放，以及不能看到的鼠标滚轮缩放。

区域缩放gif:

滑动条缩放gif:

鼠标滚轮缩放gif:

可以看到这三种方式非常好用，看细节非常方便。

二：问题的解决

1.鼠标滚轮缩放

查看API文档，可以看到option里有一个叫dataZoom的配置项

也就是说我们只要在option里配置这个组价就可以实现鼠标滚轮缩放。且对于鼠标滚轮缩放使用时一般不需要配置别的什么属性，只需要写上类型即可。

dataZoom: [
         // 鼠标滚轮缩放
          {
            type: 'inside'
          }
        ]

2.滑动条缩放

滑动条缩放同样是在dataZoom配置。它通常还需要配start与end两个属性，用来指明初次加载时的显示的数据范围。

dataZoom: [
          {
            // 滑动条缩放
            type: 'slider',
            start: 0,
            end: 100
          }
        ],

此外，滑动条缩放是dataZoom的默认配置，也就是说可以不用写type属性指明滑动条。

dataZoom: [
          {
            start: 0,
            end: 100
          }
        ],

即使鼠标滚轮和滑动条同时存在也可以省略滑动条的type。

dataZoom: [
          {
            type: 'inside'
          },
          {
            start: 0,
            end: 100
          }
        ],

3.区域缩放

区域缩放的配置是在toolbox中，可以看到这个配置项可以配置五个工具。

区域缩放作为toolbox中的一个属性存在。

使用时我们通常需要这样配置：

// 区域缩放
toolbox: {
    feature: {
        dataZoom: {
            yAxisIndex: 'none'
        },
    // 还原
    restore: {}
    }
},

配置完图表右上角会显示三个按钮：区域缩放、区域缩放还原、还原。

区域缩放还原与还原的区别是，当进行了多次区域缩放之后，点击区域缩放还原会返回上一次缩放区域，点击还原会直接返回初始缩放区域。

三：总结

通过这两个option配置项就可以配置这三种好用的Echarts平面直角坐标系图表缩放工具。

const option = {
        title: {},
        tooltip: {},
        dataZoom: [
          {
            type: 'inside'
          },
          {
            start: 0,
            end: 100
          }
        ],
        xAxis: {},
        yAxis: {},
        // 区域缩放
        toolbox: {
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            restore: {}
          }
        },
        series: []
      }