关于让Echart的PIE图自动轮播

需求：echart做一个pie图，鼠标移入pie区域，中间显示移入部分的数量跟名字。且pie图会自动轮播数据的数值和名字，用于场景大屏可视化项目中数据的展示。

首先需要用Echart一个pie图

Echart图的数据模拟
 chartName: ['公共设施', '绿地与', '居住与', '公共管理'],
 dataList: [50000, 30000, 40000, 60000],
 chartColor: ['#ED5F87', '#16C6C7', '#F8DA96', '#1071EE'],

将上面的数据转换成Echart可以使用的格式，并渲染Echart图 

initChart() {
                let invDis_Con_pieChart = echarts.init(document.getElementById('invDis_Con_pieChart'));
                let DATA
                this.chartName.forEach((item, index) => {
                    DATA.push({
                        dataIndex: index,
                        name: item,
                        value: this.dataList[index],
                        itemStyle: {
                            color: this.chartColor[index]
                        }
                    })
                })
               
                let option = {
                    tooltip: {
                        show: false,//标签
                    },
                    title: [
                        {
                            show: true,
                            text: "",
                            textStyle: {
                                color: "rgba(254, 254, 254, 0.8)",
                                fontSize: 16,
                                fontWeight: 400,
                                width:75,
                                overflow:'truncate',
                            },
                            top: "38%",
                            left: "center",
                        },
                        {
                            show: true,
                            text: "",
                            textStyle: {
                                color: "#FEFEFE",
                                fontSize: 18,
                                fontWeight: 400,
                            },
                            top: "52%",
                            left: "center",
                        },
                    ],
                    series: [
                        {
                            type: "pie",
                            radius: ["80%", "90%"],
                            label: {//标签
                                show: false
                            },
                            selectedMode: 'single',
                            selectedOffset: 5,
                            data: DATA
                        },
                    ],
                };
                invDis_Con_pieChart.setOption(option);
                
            }

这是一个最普通的pie图，然后需要让pie图自动轮播。自动轮播就是对pie图里面每一项进行选中，使用EchartApi中的属性

https://echarts.apache.org/zh/api.html#echartsInstance.dispatchAction

https://echarts.apache.org/zh/api.html#action

echart.dispatchAction({
     type: "select", //表示方式
     seriesIndex: 0,//指定第几个系列的数据
     dataIndex: pieIndex,//具体系列数据中的第几个

})
type:'select'表示选中
type:'highlight'表示高亮
两个效果有细微差别

然后加入定时器进行pieIndex的自加，全部代码

let nextSelect = function () {
                    //高亮
                    invDis_Con_pieChart.dispatchAction({
                        type: "select",
                        seriesIndex: 0,
                        dataIndex: pieIndex,
                    });
                    //当到第一个时候，清空最后一个
                    if (pieIndex == 0) {
                        invDis_Con_pieChart.dispatchAction({
                            type: "unselect",
                            seriesIndex: 0,
                            dataIndex: DATA.length - 1,
                        });
                    } else {
                        invDis_Con_pieChart.dispatchAction({
                            type: "unselect",
                            seriesIndex: 0,
                            dataIndex: pieIndex - 1,
                        });
                    }
                    option.title[0].text = that.chartName[pieIndex];
                    option.title[1].text = that.numberList[pieIndex] + ".00亩";
                    option.title[1].textStyle.color = that.chartColor[pieIndex];
                    invDis_Con_pieChart.setOption(option);
                    pieIndex++;
                    //到最后一个时返回到第一个
                    if (pieIndex == 4) {
                        pieIndex = 0;
                    }
                }
                //定时器，保持pie一直转动
                let timeTicket = setInterval(() => {
                    nextSelect()
                }, 2000);

添加自动轮播之后，要加入鼠标移入和移出

invDis_Con_pieChart.on("mouseover", (params) => {
                    clearInterval(timeTicket);
                    option.title[0].text = that.chartName[params.dataIndex];
                    option.title[1].text = that.numberList[params.dataIndex] + ".00亩";
                    option.title[1].textStyle.color = that.chartColor[params.dataIndex];
                    invDis_Con_pieChart.setOption(option);
                    //清空所有
                    for (let index in option.series[0].data) {
                        invDis_Con_pieChart.dispatchAction({
                            type: "unselect",
                            seriesIndex: 0,
                            dataIndex: index,
                        });
                    }
                    //当前选中
                    invDis_Con_pieChart.dispatchAction({
                        type: "select",
                        seriesIndex: 0,
                        dataIndex: params.dataIndex,
                    });
                });
                invDis_Con_pieChart.on("mouseout", (params) => {
                    pieIndex = params.dataIndex
                    timeTicket = setInterval(() => {
                        nextSelect()
                    }, 2000);
                });