环绕嵌套饼图echarts 饼配置项内容和展示

      let angle = 0; //角度，用来做简单的动画效果的
let value = 80;
var timerId;
var outerRidus1 = 0.8
var outerRidus2 = 0.85
option = {
  backgroundColor: '#090d1a',
  legend: {
    orient: 'vertical',
    show: true,
    right: '5%',
    y: 'center',
    icon: 'pin',
    itemGap: 30,
    textStyle: {
      color: '#FFFFFF',
      fontSize: 12,
      lineHeight: 20,
    },
  },
  tooltip: {
    show: true,
  },
  series: [
    // 最外层圆
    {
      type: 'pie',
      radius: ['75%', '55%'],
      center: ['50%', '50%'],
      hoverAnimation: false,
      data: [
        {
          value: 30,
          name: '运行中',
          itemStyle: {
            normal: {
              color: {
                // 完成的圆环的颜色
                colorStops: [
                  {
                    offset: 0,
                    color: '#0060FF', // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: '#00EFFE', // 100% 处的颜色
                  },
                ],
              },
            },
          },
        },
        {
          value: 30,
          name: '已停止',
          itemStyle: {
            normal: {
              color: {
                // 完成的圆环的颜色
                colorStops: [
                  {
                    offset: 0,
                    color: '#44D7B6', // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: '#6DD400', // 100% 处的颜色
                  },
                ],
              },
            },
          },
        },
        {
          value: 40,
          name: '未上线',
          itemStyle: {
            normal: {
              color: {
                // 完成的圆环的颜色
                colorStops: [
                  {
                    offset: 0,
                    color: '#FFA600', // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: '#FEDB65', // 100% 处的颜色
                  },
                ],
              },
            },
          },
        },
      ],
      label: {
        show: true,
        position: 'outside',
        formatter: '{d}%',
        color: '#FFFFFF',
      },
      labelLine: {
        normal: {
          length: 80,
          lineStyle: {
            width: 1,
          },
        },
      },
    },
    // 内圆 + 中间文字
    {
      type: 'pie',
      radius: ['60%', '40%'],
      center: ['50%', '50%'],
      hoverAnimation: false,
      z: 10,
      label: {
        position: 'center',
        formatter: () => {
          return '佣金总额\r\n{total|100} 个';
        },
        rich: {
          total: {
            fontSize: 24,
            color: '#FFFFFF',
          },
        },
        color: '#FFFFFF',
        fontSize: 16,
        lineHeight: 30,
      },
      data: [
        {
          value: 30,
          name: '运行中',
          itemStyle: {
            normal: {
              color: {
                // 完成的圆环的颜色
                colorStops: [
                  {
                    offset: 0,
                    color: '#0060FF', // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: '#00EFFE', // 100% 处的颜色
                  },
                ],
              },
              opacity: 0.5,
            },
          },
        },
        {
          value: 30,
          name: '已停止',
          itemStyle: {
            normal: {
              color: {
                // 完成的圆环的颜色
                colorStops: [
                  {
                    offset: 0,
                    color: '#44D7B6', // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: '#6DD400', // 100% 处的颜色
                  },
                ],
              },
              opacity: 0.5,
            },
          },
        },
        {
          value: 40,
          name: '未上线',
          itemStyle: {
            normal: {
              color: {
                // 完成的圆环的颜色
                colorStops: [
                  {
                    offset: 0,
                    color: '#FFA600', // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: '#FEDB65', // 100% 处的颜色
                  },
                ],
              },
              opacity: 0.5,
            },
          },
        },
      ],
      labelLine: {
        show: false,
      },
    },

    // 紫色线1 + 点
    {
      name: 'ring5',
      type: 'custom',
      coordinateSystem: 'none',
      renderItem: function (params, api) {
        return {
          type: 'arc',
          shape: {
            cx: api.getWidth() / 2,
            cy: api.getHeight() / 2,
            r: Math.min(api.getWidth(), api.getHeight()) / 2 * outerRidus1 ,// 180,
            startAngle: ((0 + angle) * Math.PI) / 180,
            endAngle: ((90 + angle) * Math.PI) / 180,
          },
          style: {
            stroke: '#8383FA',
            fill: 'transparent',
            lineWidth: 1.5,
          },
          silent: true,
        };
      },
      data: [0],
    },
    // 紫色线1点
    {
      name: 'ring5', //紫点
      type: 'custom',
      coordinateSystem: 'none',
      renderItem: function (params, api) {
        let x0 = api.getWidth() / 2;
        let y0 = api.getHeight() / 2;
        let r =  Math.min(api.getWidth(), api.getHeight()) / 2 * outerRidus1;
        let point = getCirlPoint(x0, y0, r, 0 + angle);
        return {
          type: 'circle',
          shape: {
            cx: point.x,
            cy: point.y,
            r: 4,
          },
          style: {
            stroke: '#8450F9', //绿
            fill: '#8450F9',
          },
          silent: true,
        };
      },
      data: [0],
    },
    // 蓝色
    {
      name: 'ring5',
      type: 'custom',
      coordinateSystem: 'none',
      renderItem: function (params, api) {
        return {
          type: 'arc',
          shape: {
            cx: api.getWidth() / 2,
            cy: api.getHeight() / 2,
              r: Math.min(api.getWidth(), api.getHeight()) / 2 * outerRidus1 ,// 180,
            startAngle: ((180 + angle) * Math.PI) / 180,
            endAngle: ((270 + angle) * Math.PI) / 180,
          },
          style: {
            stroke: '#4386FA',
            fill: 'transparent',
            lineWidth: 1.5,
          },
          silent: true,
        };
      },
      data: [0],
    },
    {
      name: 'ring5', // 蓝色
      type: 'custom',
      coordinateSystem: 'none',
      renderItem: function (params, api) {
        let x0 = api.getWidth() / 2;
        let y0 = api.getHeight() / 2;
        let  r = Math.min(api.getWidth(), api.getHeight()) / 2 * outerRidus1// 180
        let point = getCirlPoint(x0, y0, r, 180 + angle);
        return {
          type: 'circle',
          shape: {
            cx: point.x,
            cy: point.y,
            r: 4,
          },
          style: {
            stroke: '#4386FA', //绿
            fill: '#4386FA',
          },
          silent: true,
        };
      },
      data: [0],
    },
    // 橘色
    {
      name: 'ring5',
      type: 'custom',
      coordinateSystem: 'none',
      renderItem: function (params, api) {
        return {
          type: 'arc',
          shape: {
            cx: api.getWidth() / 2,
            cy: api.getHeight() / 2,
             r: Math.min(api.getWidth(), api.getHeight()) / 2 * outerRidus2 ,// 200,
            startAngle: ((250 + -angle) * Math.PI) / 180,
            endAngle: ((10 + -angle) * Math.PI) / 180,
          },
          style: {
            stroke: '#0CD3DB',
            fill: 'transparent',
            lineWidth: 1.5,
          },
          silent: true,
        };
      },
      data: [0],
    },
    {
      name: 'ring5', //绿点
      type: 'custom',
      coordinateSystem: 'none',
      renderItem: function (params, api) {
        let x0 = api.getWidth() / 2;
        let y0 = api.getHeight() / 2;
        let r = Math.min(api.getWidth(), api.getHeight()) / 2 * outerRidus2 // 200;
        let point = getCirlPoint(x0, y0, r, 250 + -angle);
        return {
          type: 'circle',
          shape: {
            cx: point.x,
            cy: point.y,
            r: 4,
          },
          style: {
            stroke: '#0CD3DB', //绿
            fill: '#0CD3DB',
          },
          silent: true,
        };
      },
      data: [0],
    },
    // 粉色
    {
      name: 'ring5',
      type: 'custom',
      coordinateSystem: 'none',
      renderItem: function (params, api) {
        return {
          type: 'arc',
          shape: {
            cx: api.getWidth() / 2,
            cy: api.getHeight() / 2,
            r: Math.min(api.getWidth(), api.getHeight()) / 2 * outerRidus2 ,// 200,,
            startAngle: ((70 + -angle) * Math.PI) / 180,
            endAngle: ((200 + -angle) * Math.PI) / 180,
          },
          style: {
            stroke: '#FF8E89',
            fill: 'transparent',
            lineWidth: 1.5,
          },
          silent: true,
        };
      },
      data: [0],
    },
    //粉色点
    {
      name: 'ring5',
      type: 'custom',
      coordinateSystem: 'none',
      renderItem: function (params, api) {
        let x0 = api.getWidth() / 2;
        let y0 = api.getHeight() / 2;
        let r = Math.min(api.getWidth(), api.getHeight()) / 2 * outerRidus2// 200,;
        let point = getCirlPoint(x0, y0, r, 70 + -angle);
        return {
          type: 'circle',
          shape: {
            cx: point.x,
            cy: point.y,
            r: 4,
          },
          style: {
            stroke: '#FF8E89', //粉
            fill: '#FF8E89',
          },
          silent: true,
        };
      },
      data: [0],
    },
  ],
};

//获取圆上面某点的坐标(x0,y0表示坐标，r半径，angle角度)
function getCirlPoint(x0, y0, r, angle) {
  let x1 = x0 + r * Math.cos((angle * Math.PI) / 180);
  let y1 = y0 + r * Math.sin((angle * Math.PI) / 180);
  return {
    x: x1,
    y: y1,
  };
}

function draw() {
  angle = angle + 3;
  _chart.setOption(option, true);
  //window.requestAnimationFrame(draw);
}
if (timerId) {
  clearInterval(timerId);
}
timerId = setInterval(function () {
  //用setInterval做动画感觉有问题
  draw();
}, 100);