Echarts automatically switches the selected state

        In many pages displayed on large screens, it is necessary to automatically switch the selected state of statistical charts. The dispatchAction method provided by Echarts can meet this requirement.

        This article makes a record of the automatic switching of the pie chart as a memo.

achieve effect

        Using simulated data to represent GDP by province and city, the inner circle of the pie chart represents the proportion by province, and the outer ring represents the proportion by city. When switching automatically, the city and province are selected synchronously. The final effect is as follows:

data preparation

        First prepare the mock data:

        //省份数据
        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 }
        ];

set pie chart

        Set the pie chart option according to the example on the Echarts official website:

        //设置option
        function setChartOption(chart, provinceData, cityData) {
            let option = {
                tooltip: {
                    trigger: 'item',
                    formatter: function (p) {
                        if (!!p.data.province)
                            return `省份：${p.data.province}<br/>城市：${p.data.name}<br/>GDP：${p.data.value}万`;
                        else return "";
                    }
                },
                series: [{
                    name: '省份GDP',
                    type: 'pie',
                    radius: [0, '40%'],
                    center: ['50%', '50%'],
                    data: provinceData,
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        },
                    },
                    labelLine: { show: false },
                    label: { show: false }
                }, {
                    name: '城市GDP',
                    type: 'pie',
                    radius: ['55%', '75%'],
                    center: ['50%', '50%'],
                    data: cityData,
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        },
                    },
                    labelLine: { show: false },
                    label: { show: false }
                }]
            };
            chart.setOption(option);
        }


        var myChart = echarts.init(document.getElementById('wrap'));
        setChartOption(myChart, provinceData, cityData);

Add a scheduled task

        Add a scheduled task, select and switch at fixed intervals:

        //自动切换顺序
        var cityIndex = 0;
        setInterval(function () {
            if (cityIndex < cityData.length) {
                let provinceIndex = this.provinceData.findIndex(p => p.name == cityData[cityIndex].province);
                myChart.dispatchAction({ type: 'downplay', seriesIndex: 0 });
                myChart.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: provinceIndex });
                myChart.dispatchAction({ type: 'showTip', seriesIndex: 0, dataIndex: provinceIndex });

                myChart.dispatchAction({ type: 'downplay', seriesIndex: 1 });
                myChart.dispatchAction({ type: 'highlight', seriesIndex: 1, dataIndex: cityIndex });
                myChart.dispatchAction({ type: 'showTip', seriesIndex: 1, dataIndex: cityIndex });
                cityIndex++;
            } else {
                cityIndex = 0;
            }
        }, 1000);

        After completing the above steps, the effect of automatic switching selection can be presented.

        Except for the pie chart, other charts of Echarts also call the dispatchAction method to switch states.

        Code download: https://download.csdn.net/download/evanyanglibo/87240308