echarts双层环形图循环高亮--存档

参照下方链接的文章改了一部分代码

https://blog.csdn.net/weixin_43138050/article/details/107912048

   // var myChart = echarts.init(document.getElementById('circlechart'));
        let option = {
            color: color,
            backgroundColor:"black",
            legend: {
               // show:true,
                orient: "horizontal",
                x: "center",
                y: "bottom",
                itemHeight: 13,
                itemWidth: 13,
                selectedMode: false,
                data: [
            {value: 1048, name: '百度'},
            {value: 335, name: '直达'},
            {value: 310, name: '邮件营销'},
            {value: 251, name: '谷歌'},
            {value: 234, name: '联盟广告'},
            {value: 147, name: '必应'},
            {value: 135, name: '视频广告'},
            {value: 102, name: '其他'}
        ],
                textStyle: {
                    color: "pink",
                    fontSize: 12,
                },
            },
            calculable: true,
            series: [
            //外层圆
              {
                  name: "圆圈",
                  type: "pie",
                  zlevel: 2,
                  silent: true,
                  radius: ["58%", "58.5%"],
                  center: ["53%", "50%"],
                  clockWise: true, //顺时加载
                  hoverAnimation: true,
                  itemStyle: {
                      normal: {
                          label: {
                              show: false,
                          },
                          labelLine: {
                              show: false,
                          },
                      },
                  },
              //   data:  [{name:name,value:value}],//这里赋值
                data: [
            {value: 1048, name: '百度'},
            {value: 335, name: '直达'},
            {value: 310, name: '邮件营销'},
            {value: 251, name: '谷歌'},
            {value: 234, name: '联盟广告'},
            {value: 147, name: '必应'},
            {value: 135, name: '视频广告'},
            {value: 102, name: '其他'}
        ],
              },
              {
                  type: "pie",
                  clockWise: true, //顺时加载
                  hoverAnimation: true, //鼠标移入变大
                  radius: ["40%", "54%"],
                  center: ["53%", "50%"],
                  zlevel: 1,
                  tooltip: {
                      show: false,
                  },
                  label: {
                      show: false,
                      position: "center",
                  //    color: "#fff",
                  },
                  emphasis: {
                      label: {
                          show: true,
                          fontSize: "30",
                          fontWeight: "bold",
                          formatter: ["{a|{c}}", "{b|{b}}"].join("\n"),
                          rich: {
                              a: { // 中间字的数值样式
                                 // color: color,
                                  fontSize: 32,
                                  lineHeight: 40,
                                  verticalAlign: "bottom",
                              },
                              b: {// 中间字的名称样式
                                  //color: "black",
                                  fontSize: "90%",
                                  lineHeight: 24,
                              },
                          },
                      },
                  },
                 // data:  [{name:name,value:value}],
                   data:[
            {value: 1048, name: '百度'},
            {value: 335, name: '直达'},
            {value: 310, name: '邮件营销'},
            {value: 251, name: '谷歌'},
            {value: 234, name: '联盟广告'},
            {value: 147, name: '必应'},
            {value: 135, name: '视频广告'},
            {value: 102, name: '其他'}
        ],
                  itemStyle: {
                      normal: {
                          labelLine: {
                              show: false,
                          },
                      },
                  },
              },
            ],
        };
        myChart.setOption(option);
         let index = 0; //高亮所在下标
        let dataLength = option.series[0].data.length; // 当前饼图有多少个扇形
        
        let mTime = setInterval(() => {
            myChart.dispatchAction({  //触发图表行为，例如图例开关legendToggleSelect, 数据区域缩放dataZoom，显示提示框showTip等等
                type: "downplay", //取消高亮指定的数据图形
                seriesIndex: 1, //里层的圆形
                dataIndex: index % dataLength,
            });
            index++;
            myChart.dispatchAction({
                type: "highlight",
                seriesIndex: 1,
                dataIndex: index % dataLength,
            });
        }, 2000);
        
        
        //  鼠标划入
        myChart.on("mouseover", (e) => {
            // 停止定时器，清除之前的高亮
            clearInterval(mTime);
            myChart.dispatchAction({
                type: "downplay",
                seriesIndex: 1 //清一下高亮
            });
            myChart.dispatchAction({
                type: "highlight",
                seriesIndex: 1,
                dataIndex: e.dataIndex, //当前鼠标选中的高亮
            });
        });
        myChart.on("mouseout", (e) => {
            clearInterval(mTime);
            myChart.dispatchAction({
                type: "downplay",
                seriesIndex: 1,
                dataIndex: e.dataIndex,
            }); //鼠标移出后先把上次的高亮取消
            mTime = setInterval(() => {
                // 取消高亮指定的数据图形
                myChart.dispatchAction({
                    type: "downplay",
                    seriesIndex: 1,
                    dataIndex: e.dataIndex % dataLength,//从当前选中完的下一个开始顺序高亮
                });
                e.dataIndex++;
                // 高亮指定的数据图形
                myChart.dispatchAction({
                    type: "highlight",
                    seriesIndex: 1,
                    dataIndex: e.dataIndex % dataLength,
                });
            }, 2000);
        });

可直接复制代码在echarts官网的编辑器中预览。