echarts-toolTip自动轮播

贫穷依然存在.

已于 2023-07-05 14:30:32 修改

阅读量1k

点赞数 1

分类专栏： echarts图表文章标签： javascript echarts Powered by 金山文档

于 2023-02-02 09:26:25 首次发布

本文链接：https://blog.csdn.net/weixin_49095220/article/details/128844194

版权

echarts图表专栏收录该内容

1 篇文章 0 订阅

订阅专栏

该代码段展示了如何使用JavaScript实现ECharts图表的图例轮播效果，并在鼠标移入和移出时控制轮播的暂停与继续。通过设置定时器以及dispatchAction方法来动态更新显示的数据Index，并在mouseover和mouseout事件中处理轮播逻辑。

摘要由CSDN通过智能技术生成

//图例轮播展示
tooltipShow(){
  this.timer&&clearTimeout(this.timer)
  this.timer=window.setTimeout(()=>{
    this.myChart.dispatchAction({//显示tooptip
        type:'showTip',
        seriesIndex:0,//索引值，可触发多个
        dataIndex:this.currentIndex,
        playState:true,
    })
    this.currentIndex++;
    if(this.currentIndex>.=this.devHealthList.length){
        this.currentIndex=0
    }
    this.tooltipShow()
  },1000)
}
//在渲染图表数据的地方加上鼠标移入移出事件，实现鼠标移入暂停轮播，移出开始轮播
this.myChart.setOption(option)
this.myChart.on('mouseover',()=>{
    window.clearTimeout(this.timer)
})
this.myChart.on('mouseout',()=>{
    this.currentIndex=0;
    this.tooltipShow()
})