echarts饼图自动轮巡

可以设置轮询时间

鼠标移入停止轮询

鼠标移出自动开始轮询

可以设置渐变颜色

<template>
  <div class="line_chart h-full w-full">
    <div id="main" style="width: 300px; height: 300px; position: relative; float: left"></div>
  </div>
</template>
<script lang="ts" setup>
  import { ref, nextTick } from 'vue';
  import * as echarts from 'echarts';
  nextTick(() => {
    const getInfo = () => {
      let chartDom: any = document.getElementById('main');
      let myChart = echarts.init(chartDom);
      const option = ref<any>({
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['45%', '64%'], // 通过设置内径与外径将饼图变为圆环饼图
            itemStyle: {
              borderRadius: 0, // 设置圆环的圆角弧度
              //此处注释放开可以设置饼图渐变色
              // 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: 20,
            },
            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: '#fff',
                },
                b_style: {
                  fontSize: 16,
                  color: '#fff',
                },
              },
            },
            data: [
              // 饼图数据
              {
                name: '测试数据01',
                value: '100',
              },
              {
                name: '测试数据02',
                value: '200',
              },
              {
                name: '测试数据03',
                value: '300',
              },
              {
                name: '测试数据04',
                value: '400',
              },
              {
                name: '测试数据05',
                value: '500',
              },
              {
                name: '测试数据06',
                value: '600',
              },
              {
                name: '测试数据07',
                value: '700',
              },
              {
                name: '测试数据08',
                value: '800',
              },
            ],
          },
        ],
      });
      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>