Echarts之仪表盘式进度条

需求：

实现：

<template>
  <div
    class="progress"
    style="width: 300px; height: 400px; background: rgba(2, 15, 43, 0.7)"
  >
    <div id="progressChart" style="width: 300px; height: 400px"></div>
    <div class="rank">
      <span>一级</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    initProgressChart() {
      let value = 65.82;
      let option = {
        color: ["rgba(255,255,255,0)", "rgb(0, 224, 151)", "rgb(8, 48, 63)"], //  进度条颜色 进度条背景颜色
        series: [
          {
            name: "完成率",
            type: "pie",
            startAngle: 315,
            radius: ["70%", "95%"],
            legendHoverLink: false,
            hoverAnimation: false,
            avoidLabelOverlap: false,
            labelLine: {
              normal: {
                show: false,
              },
            },
            data: [
              {
                value: 33,
                name: value + "%",
                label: {
                  position: "center",
                  color: "rgba(0, 234, 156, 1)",
                  fontSize: 30,
                },
              },
              {
                value: value,
              },
              {
                value: 100 - value,
              },
            ],
          },
        ],
      };
      let myChart = this.$echarts.init(
        document.getElementById("progressChart")
      );
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
  },
  mounted() {
    this.initProgressChart();
  },
};
</script>

<style lang="scss" scoped>
.progress {
  position: relative;
  .rank {
    width: 120px;
    height: 50px;
    position: absolute;
    left: 50%;
    top: 280px;
    transform: translate(-50%);
    // background: url("./images/progress.png") no-repeat;
    background: url("data:image/png;base64,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") no-repeat;
    background-size: 100% 100%;
    // position: relative;
    span {
      color: #fff;
      font-size: 20px;
      position: absolute;
      left: 50%;
      top: 10%;
      transform: translate(-50%);
    }
  }
}
</style>

以上