首页 前端知识 vue2/Echarts 实现模拟slider缩放/拖动松手后触发事件效果

vue2/Echarts 实现模拟slider缩放/拖动松手后触发事件效果

2024-08-23 20:08:40 前端知识 前端哥 290 415 我要收藏

目标:实现图表数据在进行数据范围缩放或变化后进行数据的实时更新效果

因为Echarts自带的datazoom事件只要拖动缩放条就会触发,过于频繁了,因此想要实现松手后再触发的效果,但Echarts组件内并没有这样的事件,网上也没有查到相关的使用,因此自己尝试用setTimeout函数来模拟了松手触发事件的效果。

具体实现代码:

实现思路:

在触发缩放事件时初始化一个计时器;

若在设置的时间范围内重复触发,则将清除之前设置的倒计时,并重新倒计时;

倒计时结束后,触发想要在松手后触发的事件(此处为reComputeData);

这样写的代码的效果为:

当进行拖动后,若0.3秒内没有再次拖动,视为松手并触发相应事件。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/16668.html
标签
评论
发布的文章

HTML5 基本框架

2024-09-01 23:09:50

HTML5取消边框的方法

2024-09-01 23:09:50

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!