用echarts实现圆形进度条

基于vue2的，不过基本能看懂

 this.topThree.push({
                    name: item.typeName,
                value: item.count,
                percent: Math.round((item.count / this.topThreeSum) * 100),
              });
              this.$nextTick(() => {
                this.initAlarmProgress("alarm-progress" + index, index, {
                  name: item.typeName,
                  value: item.count,
                  sum: this.topThreeSum,
                  percent: isNaN(
                    Math.round((item.count / this.topThreeSum) * 100)
                  )
                    ? 0
                    : Math.round((item.count / this.topThreeSum) * 100),
                  strokeColor:
                    index == 0 ? "#147AD6" : index == 1 ? "#5CE5D7" : "#4E68E9",
                });
              });

 initAlarmProgress(id, index, data) {
      const dashbordOne = document.getElementById(id);
      if (dashbordOne) {
        this.myChartProgress[index] = echarts.init(dashbordOne);
        let option;
        option = this.initOneAlarmProgress(data);
        this.myChartProgress[index].setOption(option);
      }
    }

//核心关键代码
initOneAlarmProgress(data) {
      let option = {
        grid: {
          top: "0",
          left: "0",
          right: "0",
          bottom: "0",
          containLabel: true,
        },
        series: [
          {
            name: "Pressure",
            type: "gauge",
            detail: {
              // formatter: "{value}",
              formatter: (params) => {
                return Math.round((params / 100) * this.topThreeSum);
              },
              offsetCenter: ["0", "5%"],
              textStyle: {
                fontSize: 24,
                fontWeight: "bold",
                color: "#fff",
              },
            },
            startAngle: 90,
            endAngle: -360,
            pointer: {
              show: false,
            },
            progress: {
              show: true,
              overlap: false,
              roundCap: true,
              clip: false,
              itemStyle: {
                borderWidth: 2,
                borderColor: data.strokeColor,
                color: data.strokeColor,
              },
            },
            axisLine: {
              lineStyle: {
                width: 12,
              },
            },
            splitLine: {
              show: false,
              distance: 0,
              length: 10,
            },
            axisTick: {
              show: false,
            },
            //刻度
            axisLabel: {
              show: false,
              distance: 50,
            },
            data: [
              {
                value: data.percent,
              },
            ],
          },
        ],
      };
      return option;
    }