echarts饼图圈内内容自动轮巡

<pie-chart :name="'pieChart'" :dataList="propleDataList" />

<template>
    <div class="chart" :id="'pie' + name" style="width: 100%; height: 100%;"></div>
</template>
<script setup>
  import { ref, nextTick } from 'vue';
  import * as echarts from 'echarts';
  const props = defineProps({
  name: {
    type: String,
    default: ''
  },
  title: {
    type: String,
    default: ''
  },
  colorList: {
    type: Array,
    default: () => {
      return ['#EBC35C', '#3CADFB', '#EBC35C', '#3CADFB']
    }
  },
  dataList: {
    type: Array,
    default: () => {
      return [
        {
          value: 30,
          name: '车辆识别'
        },
        {
          value: 16,
          name: '区域入侵'
        }
      ]
    }
  }
})
  nextTick(() => {
    const getInfo = () => {
      let chartDom = document.getElementById('pie' + props.name);
      let myChart = echarts.init(chartDom);
      const option = ref({
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['55%', '80%'],// 通过设置内径与外径将饼图变为圆环饼图
            itemStyle: {
              borderRadius: 0, // 设置圆环的圆角弧度
              color: (list) => {
                return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                  {
                    offset: 0,
                    color: props.colorList[list.dataIndex],
                  },
                ]);
              },
              //此处注释放开可以设置饼图渐变色
              //color: (list) => {
              // 这里的渐进色数组一定要大于等于data的长度，不然会找不到对应得颜色而报错
              //   var colorList = [
              //     {
              //       colorStart: '#1F7EFF',
              //       colorEnd: '#B0D2FF',
              //     },
              //     {
              //       colorStart: '#FF65D3',
              //       colorEnd: '#FFD1F2',
              //     },
              //     {
              //       colorStart: '#00AFFF',
              //       colorEnd: '#9ADFFF',
              //     },
              //     {
              //       colorStart: '#7FF0FF',
              //       colorEnd: '#00E1FF',
              //     },
              //     {
              //       colorStart: '#FFB0B0',
              //       colorEnd: '#FF5454',
              //     },
              //     {
              //       colorStart: '#FFEFBE',
              //       colorEnd: '#FFD961',
              //     },
              //     {
              //       colorStart: '#FF9946',
              //       colorEnd: '#FFE4CD',
              //     },
              //     {
              //       colorStart: '#678AF7',
              //       colorEnd: '#C2D1FF',
              //     },
              //   ];
              //   return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
              //     {
              //       //左、下、右、上
              //       offset: 0,
              //       color: colorList[list.dataIndex]['colorStart'],
              //     },
              //     {
              //       offset: 1,
              //       color: colorList[list.dataIndex]['colorEnd'],
              //     },
              //   ]);
              // },
            },
            emphasis: {
              // 设置高亮时显示标签
              label: {
                show: true,
              },
              scale: true, // 设置高亮时放大图形
              scaleSize: 10,
            },
            label: {
              // 设置图形标签样式
              show: false, // 未高亮时不显示标签，否则高亮时显示的标签会与静态的标签重叠
              position: 'center',
              // 设置标签展示内容,其中{d}、{b}为echarts标签内容格式器
              formatter: '{d_style|{c}%}\n\n{b_style|{b}}',
              // 为标签内容指定样式，只能设置series-pie.label支持的样式
              rich: {
                d_style: {
                  fontSize: 18,
                  color: '#FFCA57',
                },
                b_style: {
                  fontSize: 16,
                  color: '#fff',
                },
              },
            },
            data: props.dataList,
          },
        ],
      });
      option.value && myChart.setOption(option.value);
      // ----------------------------处理自动轮询逻辑开始----------------------------------------
      const selectPie = () => {
        // 高亮效果切换到下一个图形
        var dataLen = option.value.series[0].data.length;
        currentIndex = (currentIndex + 1) % dataLen;
        highlightPie();
      };
      let currentIndex = -1; // 当前高亮图形在饼图数据中的下标
      let changePieInterval = setInterval(selectPie, 1500); // 设置自动切换高亮图形的定时器
      const highlightPie = () => {
        // 取消所有高亮并高亮当前图形
        // 遍历饼图数据，取消所有图形的高亮效果
        for (var idx in option.value.series[0].data)
          myChart.dispatchAction({
            type: 'downplay',
            seriesIndex: 0,
            dataIndex: idx,
          });
        // 高亮当前图形
        myChart.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: currentIndex,
        });
      };
      myChart.on('mouseover', (params) => {
        // 用户鼠标悬浮到某一图形时，停止自动切换并高亮鼠标悬浮的图形
        clearInterval(changePieInterval);
        currentIndex = params.dataIndex;
        highlightPie();
      });

      myChart.on('mouseout', () => {
        // 用户鼠标移出时，重新开始自动切换
        if (changePieInterval) clearInterval(changePieInterval);
        changePieInterval = setInterval(selectPie, 1500);
      });
      // --------------------------------------------------------------------
    };
    getInfo();
  });
</script>