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

Question

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只在托动结束后触发? 只想知道托动结束后的值

Answer 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');    }});

Answer 2

你可以通过监听 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 事件表示用户已经停止拖动并释放了鼠标按钮，此时你可以获取到完整的拖动范围。