echart图表缩放到一定比例（可自定义）后，停止放大，还可以缩小回去

一、需求：

      有时候，我们有这样的需求：当echart图表（特别是折线图）的数据量很大，客户要求可以放大图表来仔细查看数据。echart有dataZoom这种技术来支持，也蛮好用的。但是有的客户就是很刁钻，要求放大到一定的程度都就不让缩放了（dataZoom会放的很大很大）。那怎么办呢？？？

二、网上现状：

1.说改源码可以解决。但是，我想说我不是前端工程师啊，怎么改？参考网上的回复：https://segmentfault.com/q/1010000014751205

2.查看各种文档，找到了一个dataZoom的配置项：zoomLock。信心来了，开始干吧！

  1）动态的改变dataZoom中zoomLock来实现。

   步骤：

    a.获取echart对象

    b.获取option属性

    c.获取dataZoom数组（数组通常有两个对象，zoomLock配置在哪个对象，根据自己的情况而定）

    d.获取zoomLock属性，并重新赋值

  备注：这个方法并没有生效，不知道这样做是不是不规范的。动态的改变属性，失败了。

  2）动态设置option

   步骤：

    a.把option抽离出去，定义为一个变量。我用的是vue，在data里面定义就可以了。

    b.当图表放大到一定时候，获取chart对象并setOption()即可。

   备注：问题有点眉目了。当放大到一定的程度的时候，图表真的就被禁止缩放了。然而新的问题由来了：1.图表回到了原始大小。2.禁止放大后，如果我要缩小回去呢？就不能操作了。怎么办？？？

3.新问题解决

    1)图表禁止放大后，回到放大前的效果。

        问题分析：通过获取option可以知道，放大后的option里面的数值（x周，series等）并没改变。可以确定的是，放大后的效果和图表数据没有关系。再看看dataZoom绑定的方法的参数，发现起始参数回到了初始值。问题就找到了。

        问题解决：

         a.在dataZoom绑定的方法的中记录（定义变量来存下来）下每次缩放是的起始值。

         b.当确定要禁止放大的时候，把记录下来的起始值重新赋值给dadaZoom。

         c.重新setOption.

         部分代码：param是dataZoom绑定的方法传入的参数。

    if(param.batch){
        this.zoomStart = param.batch[0].start;
        this.zoomEnd = param.batch[0].end;
    }else{
        this.zoomStart = param.start;
        this.zoomEnd = param.end;
    };
    重新赋值：
    this.option.dataZoom[1].start = this.zoomStart;
    this.option.dataZoom[1].end = this.zoomEnd;
    this.option.dataZoom[1].zoomLock = false;

   2)禁止放大后，我要缩小回去怎么办呢？此时已经禁止缩放功能了。

     问题分析：1.此时已经不能缩放图表了，显然我们不能再在dataZoom上面做文章。2.可以新增按钮，触发事件去改变dataZoom，但是新增按钮显然不是很美观。3.可以绑定js的鼠标滑轮事件，来改变dataZoom，并setOption来实现。

     问题解决：

        a.js绑定一个鼠标滑轮事件，参考代码如下：

     window.addEventListener('mousewheel',this.handleScroll,false);

        b.在this.handleScroll方法中处理“禁止放大”时的一切操作。不同的是放开zoomLock 锁定：

     this.option.dataZoom[1].zoomLock = false;

        c.这里有个小技巧，为了避免继续放大，在this.handleScroll方法中可以判断滚动的方向。一般来说前滚是放大，后滚是缩小。如果是继续放大，就不做处理，缩小就放开zoomLock为false。参考伪代码：
          handleScrol(e){
               if(e.zrDelta === -1){

                   do something.....

               }

           }

到这里问题都解决了，很多细节的问题各不相同就不多赘述。

三、疑问解答：

1.什么时候处理“禁止放大”的操作？

答：dataZoom绑定的方法中判断start和end来处理。

2.绑定的鼠标滑轮时间和dataZoom的事件有没有冲突？

答：不会有，当图表可以滚动的时候，自定义的滑轮事件会失效，反之亦然。