echarts legend 的单选模式以及轮播技巧

ECharts图例轮播实现

最新推荐文章于 2025-06-26 16:25:31 发布

转载最新推荐文章于 2025-06-26 16:25:31 发布 · 942 阅读

文章标签：

#javascript #ViewUI

本文介绍如何在ECharts中通过设置legend属性和使用myCharts.dispatchAction方法实现图例的自动轮播效果，包括代码示例和实现细节。

1、设置 legend 属性： selectedMode: 'single'

2、使用 myCharts.dispatchAction 来设置legend的聚焦

broadcast (v) {
            // 如果是false，则消灭轮播
            if (v === false) return clearInterval(this.timer) 
            // 获取legend的data
            const data = this.myChart.getOption().legend[0].data
            // 首次总是从0开始的
            let i = 0
            // 开始轮播
            this.timer = setInterval(() => {
                // 激活
                this.myChart.dispatchAction({ type: 'legendToggleSelect', name: data[ ++i % data.length ] })
            }, 3500)
}