vue3+echarts 绘制扇形进度图

实现样式为：

是不是还可以。反正我自己认为so beautiful（沾沾自喜）
这个实现起来就有点费劲了。
代码

option = {
  series: [
    {
      name: 'Indicator',
      type: 'gauge',
      startAngle: 200,//扇形开始的角度
      endAngle: -20,//扇形结束的角度
      detail: {
        formatter: '{a|{value}}{b|%}',

        rich: {
          a: {
            color: '#fff',
            verticalAlign: 'bottom',
            fontSize: 25,
            fontFamily: 'YouSheBiaoTiHei',
            textShadowColor: 'rgba(54, 255, 242, 0.36)',
            textShadowBlur: 4,
            textShadowOffsetX: 1,
            textShadowOffsetY: 1
          },
          b: {
            color: '#fff',
            verticalAlign: 'bottom',
            padding: [0, 0, 4, 0],
            fontSize: 12,
            fontFamily: 'YouSheBiaoTiHei',
            textShadowColor: 'rgba(54, 255, 242, 0.36)',
            textShadowBlur: 4,
            textShadowOffsetX: 1,
            textShadowOffsetY: 1
          }
        },
        show: true,
        color: '#fff',
        offsetCenter: ['0', '-5%'],
        fontSize: 25,
        fontFamily: 'YouSheBiaoTiHei'
      },
      data: [
        {
          value: 78,//中间的值
          name: '健康率'
        }
      ],
      radius: '90%',//扇形的大小100%为最大
      axisLine: {
        show: true,
        lineStyle: {
          width: 15, // 这个是修改宽度的属性
          color: [[1, '#173449']]
        }
      },
      progress: {
        show: true,
        width: 100,
        overlap: false,
        itemStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 1,
            y2: 0,
            colorStops: [
              {
                offset: 0,
                color: 'rgba(0, 255, 163, 1)' // 0% 处的颜色
              },
              {
                offset: 0.2,
                color: 'rgba(168, 255, 159, 1)' // 20% 处的颜色
              },
              {
                offset: 0.5,
                color: 'rgba(255, 225, 116, 1)' // 50% 处的颜色
              },
              {
                offset: 0.8,
                color: 'rgba(255, 171, 139, 1)' // 80% 处的颜色
              },
              {
                offset: 1,
                color: 'rgba(240, 64, 64, 1)' // 100% 处的颜色
              }
            ],
            global: false 
          }
        }
      },
      splitLine: {
        show: false,
        length: 0
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        show: false
      },
      pointer: {
        show: false
      },
      title: {
        show: false,
        offsetCenter: ['0', '71%'],
        color: '#fff',
        fontSize: 12,
        fontFamily: 'Source Han Sans CN-Normal'
      }
    },
    {
      name: '内边框',
      type: 'gauge',
      startAngle: 205,
      endAngle: -25,
      radius: '80%',
      axisLine: {
        show: true,
        lineStyle: {
          width: 2, // 这个是修改宽度的属性
          color: [
            [
              0.2,
              {
                type: 'linear',
                x: 0,
                y: 1,
                x2: 0,
                y2: 0,
                colorStops: [
                  {
                    offset: 0,
                    color: 'rgba(77, 234, 255, 0)' // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: 'rgba(77, 234, 255, 1)' // 100% 处的颜色
                  }
                ],
                global: false // 缺省为 false
              }
            ],
            [0.8, 'rgba(77, 234, 255, 1)'],
            [
              1,
              {
                type: 'linear',
                x: 0,
                y: 1,
                x2: 0,
                y2: 0,
                colorStops: [
                  {
                    offset: 1,
                    color: 'rgba(77, 234, 255, 1)' // 0% 处的颜色
                  },
                  {
                    offset: 0,
                    color: 'rgba(77, 234, 255, 0)' // 100% 处的颜色
                  }
                ],
                global: false // 缺省为 false
              }
            ]
          ]
        }
      },
      splitLine: {
        show: false,
        length: 0
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        show: false
      },
      pointer: {
        show: false
      }
    }
  ]
};