highchart配置出儀表盤

 chart: {
      type: 'gauge',
      plotBackgroundColor: null,
      plotBackgroundImage: null,
      plotBorderWidth: 0,
      plotShadow: false,
    },
    title: null,
    credits: {
      enabled: false,
    },
    pane: {
      center: ['50%', '65%'],
      size: '150%',
      startAngle: -130,
      endAngle: 130,
      background: {
        backgroundColor: 'transparent',
        borderColor: 'transparent',
        innerRadius: '85%',
        outerRadius: '90%',
        shape: 'arc',
      },
    },

    yAxis: [
      {
        min: 0,
        max: 100,
        labels: {
          enabled: false,
        },
        tickWidth: 0,
        gridLineWidth: 0,
        minorTickWidth: 0,
        lineWidth: 0,
        plotBands: [
          {
            from: 0,
            to: 30,
            thickness: '20%',
            color: {
              linearGradient: [0, 120, 200, 200],
              stops: [[0, '#4DCE76'], [1, '#34BA95']],
            },
          },
          {
            from: 31,
            to: 70,
            thickness: '20%',
            color: {
              linearGradient: [120, 200, 200, 200],
              stops: [[0.1, '#E4E016'], [1, '#F98D57']],
            },
          },
          {
            from: 71,
            to: 100,
            thickness: '20%',
            color: {
              linearGradient: [200, 180, 200, 0],
              stops: [[0, '#E74C55'], [0.9, '#F7969C']],
            },
          },
        ],
      },
      {
        min: 0,
        max: 100,
        offset: -15,
        lineWidth: 0,
        minorTickInterval: 'auto',
        minorGridLineWidth: 0,
        minorTickLength: 5,
        minorTickPosition: 'inside',
        minorTickColor: '#E5E5E5',

        tickInterval: 5,
        tickWidth: 0,
        tickPosition: 'inside',
        tickLength: 0,
        tickColor: '#999999',
        labels: {
          distance: 10,
          enabled: false,
        },
      },
    ],
    plotOptions: {
      gauge: {
        dial: {
          radius: '65%',
          backgroundColor: '#F2666E',
          borderWidth: 0,
          baseWidth: 6,
          topWidth: 0,
          baseLength: '88%',
          rearLength: '-88%',
        },
      },
    },
    tooltip: {
      enabled: false,
    },

    series: [
      {
        name: '--',
        data: [80],
        dataLabels: {
          // enabled: false,
          borderWidth: 0,
          useHTML: true,
          formatter() {
            const s = `
              <span style="color: #F2666E;font-size: 30px;display: inline-block;font-family: PingFangSC-Medium;">
                ${this.point.y}
              </span><span style="color: #F2666E;font-size: 14px";font-family: PingFangSC-Medium;>%</span>
              <br/>
            `;
            return s;
          },
          style: {
            border: 0,
            color: '#F2666E',
          },
          y: 25,
        },
      },
    ],