echarts环形图的带指示语

如图

     const option = {
        // 中心标题
        graphic: [
        // 图标
          {
            type: 'image',
            style: {
              image: require('@/assets/image/people-icon.png'),
              width: 42,
              height: 46,
              color: '#fff'
            },
            left: '23.5%',
            top: '25%'
          },
         // 文字
          {
            type: 'text',
            left: '23.4%',
            top: '41%',
            style: {
              text: '疫情监测',
              fill: '#fff',
              width: 30,
              height: 30,
              fontSize: '0.07rem'
            }
          }
        ],
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        // 图例,即右边的彩色小方块
        legend: {
          orient: 'vertical', // 图例的排放方向
          right: 0,
          top: 20,
          bottom: 20,
          itemGap: 21, // 图例的间距
          // right: 'left',
          textStyle: {
            color: 'rgba(255, 255, 255, 0.5)'
          }
        },
        color: [
          '#B8F0F7',
          '#E58FB9',
          '#0ED9B5',
          '#81C4FF',
          '#FFD45D',
          '#3FC570',
          '#42E2E9'
        ],
        series: [
          {
            name: '疫情管控',
            type: 'pie',
            width: 600,
            radius: ['45%', '60%'],  // 设置为环形图
            center: ['50%', '35%'], // 图表的位置
            itemStyle: {
              borderRadius: 0
            },
            labelLine: {
              length: 20,
              length2: 0,
              maxSurfaceAngle: 30
            },
            // 计算提示框的长度
            labelLayout: function (params) {
              const chartDom = document.getElementById('main')
              const myChart = echarts.init(chartDom)
              var isLeft = params.labelRect.x < myChart.getWidth() / 2
              var points = params.labelLinePoints
              // Update the end point.
              points[2][0] = isLeft
                ? params.labelRect.x
                : params.labelRect.x + params.labelRect.width

              return {
                labelLinePoints: points
              }
            },
            label: {
              alignTo: 'edge',
              formatter: '{per|{b}}  {b|{d}} {a|%} \n',
              color: 'rgba(255, 255, 255, 0.5)',
              minMargin: 5,
              edgeDistance: 10,
              lineHeight: 25,
              rich: {
              // 调整标签样式
                b: {
                  fontSize: '0.1rem',
                  color: '#fff',
                  fontWeight: 700
                },
                a: {
                  fontSize: '0.07rem'
                }
              }
            },
            data: [
              {
                value: 10,
                name: '朱泾镇'
              },
              {
                value: 20,
                name: '石化街道'
              },
              {
                value: 10,
                name: '金山工业园金山工业园'
              },
              {
                value: 5,
                name: '枫泾镇金山工业园'
              },
              {
                value: 20,
                name: '第二工业园金山工业园'
              },
              {
                value: 15,
                name: '张堰镇'
              },
              {
                value: 25,
                name: 'xx镇'
              }
            ]
          }
        ]
      }
      return option