echars 圓圈刻度百分比

效果如下：

export scale= (number, text) => {
  let option = {
    title: {
      x: "center",
      y: "60%",
      bottom: 50,
      text: number + '%' + text,
      textStyle: {
        fontWeight: "bold",
        fontSize: 12,
        color: "#0D252C",
        textDecoration: 'underline'
      },
    },
    series: [
      {
        splitNumber: 50,
        axisTick: false,
        axisLabel: false,
        axisLine: {
          lineStyle: {
            color: [[0, "#fff"], [1, "#fff"]],
            width: 15
          }
        },
        splitLine: {
          length: 15,
          lineStyle: {
            color: "#fff"
          }
        },
        pointer: {
          show: false,
          length: "90%",
          width: 0
        },
        detail: {
          formatter: "{value}%",
          color: "#0D252C",
          offsetCenter: [0, 0],
          fontSize: 32,
          borderBottom: "1 solid #0D252C",
          fontFamily: "Impact"
        },
        type: "gauge",
        data: [
          {
            value: number,
            name: ""
          }
        ]
      }
    ]
  }
  return option
}

<div id="gaugeContainer" style="width:200px; height:178px"></div>

mounted(){
let myChart = echarts.init(document.getElementById("gaugeContainer"));
    let option = scale(97, "可註冊");
    myChart.setOption(option);
    option.series[0].axisLine.lineStyle.color = [
      [0.97, "#0D252C"],
      [1, "#198D89"]
    ];
    myChart.setOption(option);
}