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

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

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

其实就是实现一个防抖的功能。

具体实现代码:

实现思路:

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

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

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

这样写的代码的效果为:

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值