vue echarts图表提示气泡自动轮播

最新推荐文章于 2024-04-23 09:47:19 发布

原创最新推荐文章于 2024-04-23 09:47:19 发布 · 1.5k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #vue.js #javascript

vue 同时被 2 个专栏收录

10 篇文章

订阅专栏

echarts

2 篇文章

订阅专栏

这篇博客介绍了如何在图形组件中实现自动播放的tooltip功能，通过设置定时器控制tip的轮播，并在鼠标悬浮时暂停，离开后自动恢复播放。同时，展示了如何添加事件监听，实现在鼠标悬停时停止轮播，并在鼠标离开后重新开始。

 //  图形初始化
 initData(){
 
 //tooltip自动播放
 this.autoPlayToolTip()
 this.addEvents()
}
 

// tooltip自动播放
    autoPlayToolTip() {
      // 防止多次添加轮播定时器，扰乱轮播节奏
      if(this.timer) return
      const that = this
      this.timer = setInterval(() => {
        if(that.index > 14) {
          that.index = 0
        }
        that.chart.dispatchAction({
          type: 'showTip',
          seriesIndex: 0,
          dataIndex: that.index
          })
          that.index++
      }, 3000)
    },
     // 清除轮播定时器
    resetTimer(dataIndex) {
      clearInterval(this.timer)
      this.timer = null
      this.index = dataIndex || 0
    },
    // 鼠标悬浮停止轮播 鼠标离开自动轮播
    addEvents() {
      const that = this
      this.chart.on('mousemove', function (params) {
        const { dataIndex } = params
        that.resetTimer(dataIndex + 1)
      })
      this.chart.on('mouseout', function () {
        that.autoPlayToolTip()
      })
    }