echarts图表自动轮播toolTip,鼠标悬浮则停止

背景:最近做了很多用【echarts】组件写图表的需求,然后需要自动轮播toolTip,以及鼠标移入自动轮播停止,鼠标移出,自动轮播开始等需求。下面是方法的代码:

复制代码
(function () {
  let myChart = 开发者根据自己上下文赋值; // 图表
  let categoryLength = 开发者根据自己上下文赋值; // 类别数量,类似于图表X轴数据的个数长度
  let timers = null;
  let pos = -1;
// 自动轮播定时器
const initTimer = () => {
  pos = -1;
if (timers) { clearInterval(timers); } timers = setInterval(() => {
       myChart.dispatchAction({

           type: 'downplay',
           seriesIndex: 0,
        });

     pos++;
      if (pos.value > categoryLength - 1) {
          pos.value = 0;
        }
      myChart.dispatchAction({

           type: 'highlight',
           seriesIndex: 0,
           dataIndex: pos,
       });

     myChart.dispatchAction({

           type: 'showTip',
           seriesIndex: 0,
           dataIndex: pos,
       });

    }, 2000);
  };
  const autoShowTip = () => {
    initTimer();
  };
  const stopShowTip = () => {
    clearInterval(timers);
  };
  // 鼠标悬浮上去时自动轮播停止
  let zRender = myChart.getZr();
  myChart.on('mouseover', function () {
    stopShowTip();
  });
  myChart.on('mouseout', function () {
    autoShowTip();
  });
  zRender.on('mousemove', () => {
    stopShowTip();
  });
  zRender.on('globalout', () => {
    autoShowTip();
  });
})();
复制代码

 

posted @   蛙仔  阅读(1993)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
点击右上角即可分享
微信分享提示