页面定时器使用实现echarts动效-526互联

vue+echarts 实现echarts动效
1.定义定时器工具类 loopShowTooltip

export function loopShowTooltip(myChart, option, num, time) {
  var defaultData = {
    // 设置默认值
    time: 1000,
    num: 12
  }
  if (!time) {
    time = defaultData.time
  }
  if (!num) {
    num = defaultData.num
  }
  var count = 0
  var timeTicket = null
  var clearLoop;
  timeTicket && clearInterval(timeTicket)
  timeTicket = setInterval(function () {
  	//定时逻辑
  }
  
  clearLoop = function(){
    timeTicket && clearInterval(timeTicket)
  }
  //返回 清除定时器的函数
  return clearLoop
}
export default {
  loopShowTooltip
}

2.页面引用工具类

// 引入插件
import { loopShowTooltip } from "@/utils/loopShowTooltip.js";

let tootipTimer;
// 可调用clearLoop方法，清除定时器
this.tootipTimer && this.tootipTimer();
this.tootipTimer = null;
this.tootipTimer = loopShowTooltip(data, option, 7, 1000);//data为要操作的数据  可以是echarts图例

526互联

页面 定时器使用 实现echarts动效

页面定时器使用实现echarts动效