<div style="text-align: center;">
  <svg :id="'mySvg'" width="400" height="400">
    <path
      v-for="(color, index) in colors"
      :key="index"
      :d="describeArc(centerX, centerY, radius, index * arcAngle - 15, (index + 1) * arcAngle - 15)"
      :fill="color"
    />
    <circle
      :cx="centerX"
      :cy="centerY"
      :r="radius * 0.7"
      stroke="white"
      fill="white"
    />
  </svg>
</div>

<script>
export default {
  data() {
    return {
      colors: [
        'yellow', 'gold', 'orange', 'orangered', 'red',
        'violet', 'purple', 'blueviolet', 'blue', 'aqua',
        'green', 'yellowgreen'
      ],
      centerX: 200,
      centerY: 200,
      radius: 200,
      arcAngle: 30
    };
  },
  methods: {
    describeArc(x, y, radius, startAngle, endAngle) {
      const startRad = (startAngle - 90) * Math.PI / 180;
      const endRad = (endAngle - 90) * Math.PI / 180;
      const startX = x + radius * Math.cos(startRad);
      const startY = y + radius * Math.sin(startRad);
      const endX = x + radius * Math.cos(endRad);
      const endY = y + radius * Math.sin(endRad);
      const largeArcFlag = endAngle - startAngle <= 180 ? '0' : '1';
      return `M ${startX} ${startY} A ${radius} ${radius} 0 ${largeArcFlag} 1 ${endX} ${endY} L ${x} ${y} Z`;
    }
  }
};
</script>
  

<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" id="mySvg"></svg>

<script>
  (() => {
    const colors = ['yellow', 'gold', 'orange', 'orangered', 'red', 'violet', 'purple', 'blueviolet', 'blue', 'aqua', 'green', 'yellowgreen'];
    const svg = document.getElementById('mySvg');
    const centerX = 200;
    const centerY = 200;
    const radius = 200;
    const arcAngle = 30;

    for (let i = 0; i < 12; i++) {
      // 计算每个扇形的起始角度和终止角度
      const startAngle = i * arcAngle - 15;
      const endAngle = (i + 1) * arcAngle - 15;

      // 创建扇形路径
      const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
      path.setAttribute('d', describeArc(centerX, centerY, radius, startAngle, endAngle));

      // 设置扇形的填充颜色
      path.setAttribute('fill', getColor(i));

      // 将扇形添加到 SVG 容器中
      svg.appendChild(path);
    }

    // 创建圆形元素
    const circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");

    // 设置圆心位置和半径
    circle.setAttribute("cx", centerX);
    circle.setAttribute("cy", centerY);
    circle.setAttribute("r", radius * 0.7);

    // 设置圆形样式
    circle.setAttribute("stroke", "white");
    circle.setAttribute("fill", "white");

    // 将圆形元素添加到 SVG 容器中
    svg.appendChild(circle);

    // 根据圆心、半径、起始角度和终止角度计算路径描述字符串
    function describeArc(x, y, radius, startAngle, endAngle) {
      const startRad = (startAngle - 90) * Math.PI / 180;
      const endRad = (endAngle - 90) * Math.PI / 180;

      const startX = x + radius * Math.cos(startRad);
      const startY = y + radius * Math.sin(startRad);
      const endX = x + radius * Math.cos(endRad);
      const endY = y + radius * Math.sin(endRad);

      const largeArcFlag = endAngle - startAngle <= 180 ? '0' : '1';

      const pathData = [
        'M', startX, startY,
        'A', radius, radius, 0, largeArcFlag, 1, endX, endY,
        'L', x, y,
        'Z'
      ];

      return pathData.join(' ');
    }

    // 根据索引获取不同的颜色值
    function getColor(index) {
      return colors[index % colors.length];
    }
  })();
</script>