vue+echarts实现tooltip轮播

本文主要是介绍vue+echarts实现tooltip轮播，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

效果图如下：

实现步骤如下：

1. 定义一个定时器

timer:null,
len: 0,

2. 页面一加载就清空定时器，此操作是为了防止重复加载时会设置多个定时器
3. 在setOption后设置定时器

this.myChart.clear()
this.myChart.setOption(option);
this.autoShowToolTips();

autoShowToolTips() {this.timer = setInterval(() => {// console.log("userData", this.len);if (this.len === this.xData.length) {this.len = 0;}this.myChart.dispatchAction({type: "showTip",seriesIndex: 0,dataIndex: this.len,});this.len++;}, 3000);},clearTimer() {clearInterval(this.timer);},

4. 页面销毁时，清楚定时器

beforeUnmount() {clearInterval(this.timer);},

至此便完成了。
附：
this.myChart.dispatchAction还可以设置很多别的属性，例如：点此查看具体详情

这篇关于vue+echarts实现tooltip轮播的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---