移动端echarts设置dataZoom之后，滚动时隐藏tooltip

移动端echarts设置dataZoom之后，滚动时隐藏tooltip
需求
echarts设置了datazoom同时也设置了tooltip的时候，左右滚动时候就会这样：
在这里插入图片描述
产品提出需求说要滚动的时候隐藏tooltip，要这样：
在这里插入图片描述
查阅了相关解决办法：https://blog.csdn.net/gdutRex/article/details/112532326
其中还会有一个问题，就是在滑动的时候鼠标也会点击，点击了就会出现tooltip

首先，你需要在 echarts 的初始化配置中为 dataZoom 设置 silent 为 true，以防止在滑动过程中触发 click 事件。其次，你可以使用 dataZoom 的事件监听来控制 tooltip 的显示和隐藏

let chart = echarts.init(document.getElementById('chart'));

let option = {
    // your chart option
    tooltip: {
        show: true
        // other tooltip options
    },
    dataZoom: [
        {
            type: 'slider',
            xAxisIndex: 0,
            start: 10,
            end: 60,
            silent: true // 防止在滑动过程中触发 click 事件
        },
        // other dataZoom options
    ],
    // other chart options
}

chart.setOption(option);

let isUserDragging = false; // 用户是否正在拖动的标记

chart.on('datazoom', function (params) {
    isUserDragging = true; // 用户开始拖动
    chart.dispatchAction({
        type: 'hideTip'
    });
});

chart.getZr().on('mouseup', function(){
    isUserDragging = false; // 用户结束拖动
});

chart.on('mousemove', function (params) {
    if(!isUserDragging){
        chart.dispatchAction({
            type: 'showTip',
            seriesIndex: params.seriesIndex,
            dataIndex: params.dataIndex
        });
    }
});
在这段代码中，我们通过监听 'datazoom' 事件来设置 isUserDragging 标志，并隐藏 tooltip。然后，在 'mousemove' 事件中，我们根据 isUserDragging 标志决定是否显示 tooltip。同时，在 'mouseup' 事件中我们标记 isUserDragging 为 false，表示用户结束了拖动
这个方案假设 tooltip 只在 'mousemove' 事件中显示。如果你的 tooltip 配置或其他事件处理程序会导致 tooltip 的显示，你可能需要进行额外的处理来保证 tooltip 在用户拖动时隐藏