Echarts 图表tooltip的自动播放

最新推荐文章于 2025-03-18 10:12:34 发布

qilanbei

最新推荐文章于 2025-03-18 10:12:34 发布

阅读量1.6k

点赞数 1

分类专栏：前端文章标签： Echarts js autoPlay tooltip 自动播放

本文链接：https://blog.youkuaiyun.com/qilanbei/article/details/88189113

版权

前端专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一个用于ECharts图表的自动播放功能实现方法，通过设置定时器，使图表能在指定的时间间隔内自动切换数据点，并显示相应的Tooltip提示。此功能增强了数据可视化的效果，适用于需要动态展示大量数据系列的应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

// 写一个函数，参数为chart图表的ref参数， 自动播放的间隔时间time
// 注意chart的option配置项series 要写成数据的形式，如果为对象 修改函数里面series的判断
autoPlayToopTip (chartRef, time = 1500) {
        let dataIndex = -1
        let dataLen = 0
        if (typeof chartRef !== 'undefined' && typeof chartRef.options.series !== 'undefined') {
            if (chartRef.options.series.length > 0 && typeof chartRef.options.series[0].data !== 'undefined') {
                dataLen = chartRef.options.series[0].data.length
            }
            setInterval(() => {
                chartRef.dispatchAction({
                    type: 'downplay',
                    playState: true,
                    seriesIndex: 0,
                    dataIndex
                })
                dataIndex = (dataIndex + 1) % dataLen
                chartRef.dispatchAction({
                    type: 'highlight',
                    playState: true,
                    seriesIndex: 0,
                    dataIndex
                })
                // 显示 tooltip
                chartRef.dispatchAction({
                    type: 'showTip',
                    seriesIndex: 0,
                    playState: true,
                    dataIndex
                })
            }, time)
        }
    },