Echarts中如何分辨datazoom回调来自拖拽还是滚轮

需求

使用echarts绘制一周每小时数据的曲线，并要求可以滚轮缩放，未放大时横坐标仅显示日（每隔一天显示），放大到一定程度要显示完整日期，也就是yyyy-mm-dd hh-mm-ss这个格式。

效果

曲线未放大时👇

曲线放大到某个程度时👇

解决

这个需求的坑在哪里呢，本来是从始至终只显示日，但是echarts在放大到某个程度时横坐标和数据对不上了，去掉formatter查看发现，本来是规律的2020-05-27 00:00:00，2020-05-28 00:00:00（formatter之后就是27，28，对应零点的数据……）……但是放大之后echarts自动给我改成了2020-05-27 00:04:00，2020-05-28 00:06:00（formatter之后仍然是27，28……但是对应不上零点数据了）……总而言之，言而总之，如果formatter的话，自然是看不到时分秒的变化的，所以也就发生了数据对不上的情况。

解决提出问题的人后，需求妥协成了放大后显示完整时间，但是当上手时，才发现没这么容易，问题出在datazoom的监听上，正常来说，echarts监听datazoom是这样的：

this['echart' + this.id].on('datazoom', function (params) {
    // ……
});

但是虽然echarts给了datazoom的params，但是没有提供缩放系数（？）这我不是很懂，仔细寻找一番，发现真的没有给系数，查询了一下别人是怎么解决的，但是并没有找到。

经过一番痛苦的思考，于是准备通过缩放的end-start来判断：

let start = params.batch[0].start;
    let end = params.batch[0].end;
    let diff = end - start;
    // diff小于50，算作‘缩放到一定程度’
    if(diff < 50) {
        let option = $this['echart' + $this.id].getOption();
        delete option.xAxis[0].axisLabel.formatter;
        $this['echart' + $this.id].clear();
        $this['echart' + $this.id].setOption(option, true);
    }
    if(diff >= 50) {
        let option = $this['echart' + $this.id].getOption();
        option.xAxis[0].axisLabel.formatter = function (value, index) {
            let str = (value.split(' '))[0];
            str = (str.split('-'))[2];
            return str;
        };
        $this['echart' + $this.id].clear();
        $this['echart' + $this.id].setOption(option, true);
    }

本以为这样就解决了，谁能想到，放上去之后，曲线放大后不能拖动了？？？

经过一番痛苦的思考和测试，发现了echarts一个让人很看不懂的设计（这就去提issue！）拖拽曲线也会触发datazoom回调！不知道一开始这样设计的初衷是什么，只知道因为它我又掉了很多头发……拖拽曲线也触发了回调，导致不停地setOption，自然也就没空处理拖动了。

最后的解决方案

没办法，又掉了一把头发之后，终于发现拖拽和放大的params的区别：start和end的改变区间很小，基本能维持在0-1之间，也就是说，只要记录上次的diff，与这次的diff，再计算差值的绝对值，如果>1，就可以算作是缩放触发，上代码：

let lastdiff = 0;
this['echart' + this.id].on('datazoom', function (params) {
    let start = params.batch[0].start;
    let end = params.batch[0].end;
    let diff = end - start;
    // mircodiff > 1，说明是放大而不是拖拽
    let mircodiff = Math.abs(diff - lastdiff);
    if(diff < 50 && mircodiff > 1) {
        // 放大之后的操作
    }
    if(diff >= 50 && mircodiff > 1) {
        // 缩小回去的操作
    }
    lastdiff = diff;
});

总结

echarts坑还是很多的，网上又找不到答案，希望有和我类似问题的同学看到这篇文章能够快速解决这个问题，继续开发下一个需求，而不是经过漫长的查询而一无所获^ ^。