echarts tooltip自动轮播

本文详细介绍如何使用ECharts的dispatchAction方法实现图表Tooltip的自动轮播效果,通过定时器和数据索引的递增,使得图表上的提示信息能够按设定的时间间隔自动滚动展示。

echarts tooltip自动轮播

需求:实现图表的tootip自动轮播
原理:用到dispatchAction方法,以下是echarts上的介绍数遍悬浮在图表触发tootip其实就是触发data数据项里的selected属性,该属性韦true时触发,false不触发。
初始化data

this.myChart.dispatchAction({
type: 'showTip',
    seriesIndex: 0,
    dataIndex: 0
});

轮播定时

let idx = 1;
setInterval(() => {
     this.myChart.dispatchAction({
         type: 'showTip',
         seriesIndex: 0,
         dataIndex: idx
     });
     idx++;

     if (idx >= xData.length) {
         idx = 0;
     }
 }, 3000)



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值