Echarts控制饼图或者圆环自定义旋转

先看效果

一、data中初始化函数名

    data() {
      return {
        rotateIntervalCircle:null
      }
    },

二、series中出初始化开始旋转角度

startAngle:0,

三、编写定时器

  this.rotateIntervalCircle = setInterval(() => {
  let currentAngle = (option.series[0].startAngle || 0) + 30; // 增加角度来实现旋转
  option.series[0].startAngle = currentAngle % 360; // 保持角度在0-359之间
            myChart.setOption(option);
          }, 3000); // 每1秒旋转5度

四、离开页面时销毁函数

    beforeDestroy() {
      if (this.rotateIntervalCircle) {
        clearInterval(this.rotateIntervalCircle);
      }
    }

五、饼图函数

      getCircle() {
        getUserType().then(res => {
          let chartDom = document.getElementById('circle')
          let myChart = echarts.init(chartDom)
          let option
          option = {
            title: {
              text: '广告活动体企业类型分布图',
              subtext: '',
              left: 'center'
            },
            tooltip: {
              trigger: 'item'
            },
            legend: {
              orient: 'vertical',
              left: 'left',
              formatter: function (name) {
                // 遍历数据系列，找到与图例名称匹配的数据项
                let targetValue = 0;
                for (let i = 0; i < res.data.length; i++) {
                  if (res.data[i].name === name) {
                    targetValue = res.data[i].value;
                    break;
                  }
                }
                // 返回图例名称和对应的数值
                return `${name} (${targetValue})`;
              }
            },
            series: [
              {
                // 设置饼形图在容器中的位置
                center: ["50%", "50%"],
                //  修改内圆半径和外圆半径为  百分比是相对于容器宽度来说的
                radius: ["40%", "60%"],
                name: 'Access From',
                type: 'pie',
                startAngle:0,
                // radius: '70%',
                // radius: ['30%', '70%'],
                data: res.data,
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                },
                label: {
                  normal: {
                    formatter: '{b}: {c} ({d}%)', // 这里设置了显示的内容，其中{b}是系列名，{c}是数据值，{d}是百分比
                  }
                },
              }
            ]
          }
          option && myChart.setOption(option)
          // 设置定时器来旋转饼图
           this.rotateIntervalCircle = setInterval(() => {
            let currentAngle = (option.series[0].startAngle || 0) + 30; // 增加角度来实现旋转
            option.series[0].startAngle = currentAngle % 360; // 保持角度在0-359之间
            myChart.setOption(option);
          }, 3000); // 每1秒旋转5度
        })
      },