Echarts 自动切换选中状态

原创

已于 2022-12-04 10:02:57 修改 · 4.8k 阅读

标签

#echarts #自动选中 #自动高亮 #自动焦点 #dispatchAction

于 2022-02-16 21:35:20 首次发布

本文介绍了如何使用Echarts的dispatchAction方法实现饼图的自动切换选中状态。通过模拟省份和城市GDP数据，创建内外双环饼图，并设置定时任务，每隔一定时间自动切换选中状态，同时显示对应的数据提示。

在很多大屏展示的页面中，需要统计图表自动切换选中状态。Echarts提供的 dispatchAction 方法就可以满足这个需求。

本文针对饼图的自动切换做个记录，以作备忘。

实现效果

使用模拟数据表示按照省份和城市统计的GDP，饼图内圆表示按省份的占比，外环表示按城市的占比。自动切换时，城市和省份同步选中。最后实现的效果如下图：

数据准备

首先准备好模拟数据：

        //省份数据
        var provinceData = [{ name: '河南', value: 10 }, { name: '河北', value: 20 }, { name: '湖南', value: 30 }, { name: '湖北', value: 40 }];
        //城市数据
        var cityData = [
            { province: '河南', name: '郑州', value: 10 },
            { province: '河北', name: '石家庄', value: 10 },
            { province: '河北', name: '保定', value: 10 },
            { province: '湖南', name: '长沙', value: 10 },
            { province: '湖南', name: '湘潭', value: 20 },
            { province: '湖北', name: '武汉', value: 10 },
            { province: '湖北', name: '宜昌', value: 30 }
        ];