Echarts dataZoom事件如何只获取拖动结果?

let recentEntryBarGog = ...
// 基础选项
const tmp = basicOption
// 一部分一部分显示/每屏显示的数量
tmp.dataZoom = [{
          type: 'inside', // 'slider',
          start: 0,
          end: onePShow,  // 此处是百分比@20231123
          throttle: 1000,   //设置触发视图刷新的频率。单位为毫秒(ms)
          zoomOnMouseWheel: false // 不可以通过鼠标滚轮缩放
}]
// 填充图表数据
// ETC
// 绑定图表
recentEntryBarGog.setOption(tmp)
// 开启dataZoom侦听
recentEntryBarGog.on('dataZoom', function(event) {
        // 控制台中输出两次: 一次是托动开始前的和一次托动结束后的
        console.log('[REZoom] section S2 dataZoom event start')
        const temp = getXAxisRange(this)
        console.dir(temp)
        console.log('[REZoom] section S2 dataZoom event end')
})

如何让dataZoom只在托动结束后触发? 只想知道托动结束后的值

阅读 2.2k
avatarAI BotBETA

你可以通过监听 dataZoom 事件的 end 事件来仅在拖动结束后触发。这会给你一个完整的拖动范围,你可以用这个范围来做出反应。

下面是你可以如何修改你的代码:

let recentEntryBarGog = ...

// 基础选项
const basicOption = {
    // ...其他配置...
    dataZoom: [{
        type: 'inside', // 'slider',
        start: 0,
        end: onePShow,  // 此处是百分比@20231123
        throttle: 1000,   //设置触发视图刷新的频率。单位为毫秒(ms)
        zoomOnMouseWheel: false // 不可以通过鼠标滚轮缩放
    }]
}

// 绑定图表
recentEntryBarGog.setOption(basicOption)

// 开启dataZoom侦听
recentEntryBarGog.on('dataZoom', function(event) {
    if (event.type === 'end') {
        console.log('[REZoom] section S2 dataZoom event end');
        const temp = getXAxisRange(this);
        console.dir(temp);
    }
});

在上述代码中,我们只在 dataZoom 事件的 end 事件发生时才打印范围。dataZoom 事件的 end 事件表示用户已经停止拖动并释放了鼠标按钮,此时你可以获取到完整的拖动范围。

1 个回答

加个判断

recentEntryBarGog.on('dataZoom', function (event) {
    if (event.start !== undefined && event.end !== undefined) {
        // 仅在拖动结束后的事件中执行
        console.log('[REZoom] section S2 dataZoom event start');
        const temp = getXAxisRange(this);
        console.dir(temp);
        console.log('[REZoom] section S2 dataZoom event end');
    }
});
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题