El front-end de vue usa svg para implementar la visualización de uso circular

 Efecto

 código

index.vue

<template>
  <div class="main">
      <div
          style="
          display: flex;
          width: 158px;
          height: 136px;
          justify-content: center;
          align-items: center;
          gap: 10px;
          flex-shrink: 0;
          "
      >
          <svg width="122" height="122">
          <!-- 內層圓環未使用部分，直接繪製圓，用已使用的覆蓋 -->
          <circle
              cx="61"
              cy="61"
              r="50"
              stroke="#FFEFD7"
              stroke-width="15"
              fill="none"
          />
          <!-- 內層圓環已使用部分 -->
          <circle
              cx="61"
              cy="61"
              r="50"
              stroke="#F6A500"
              stroke-width="15"
              fill="none"
              :stroke-dasharray="`${endAngle} 360`"
              transform="rotate(-90, 61, 61)"
          />

          <text
              x="50%"
              y="40%"
              text-anchor="middle"
              dominant-baseline="middle"
              style="
              fill: var(--cool-gray-500, #6b7280);
              font-family: Inter;
              font-size: 14px;
              font-weight: 400;
              "
          >
              使用率
          </text>
          <text
              x="50%"
              y="60%"
              text-anchor="middle"
              dominant-baseline="middle"
              style="
              fill: var(--cool-gray-700, #374151);
              font-family: Inter;
              font-size: 18px;
              font-weight: 700;
              "
          >
              {
   
   { redemptionRatio }}%
          </text>
          </svg>
      </div>

      <div>
        <div style="margin: 10px 0;">總數</div>
      <el-input
          v-model="form.quantity"
          type="text"
          style="width: 100%"
      ></el-input>
          <div style="margin: 10px 0;">已使用</div>
      <el-input
          v-model="form.redeemed_quantity"
          type="text"
          style="width: 100%"
      ></el-input>
      <div style="margin: 10px 0;">版权声明：本文为CSDN博主「772389」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
        原文链接：https://blog.csdn.net/u014288878/article/details/132541994 
      </div>
        <el-link href="https://blog.csdn.net/u014288878/article/details/132541994" type="primary">原文链接</el-link>
      </div>
  </div>
 
</template>

<script>


export default {
  name: "index",
  props: {
   
  },

  data() {
    return {
      
      form: {
       
        quantity: 10, //優惠券總數
        redeemed_quantity: 5, //優惠券已兌換數量
        
      },
     
    };
  },
  computed: {
    
    // 顯示兌換率
    redemptionRatio() {
      // 检查form.quantity是否是有效的数值
      const quantity = parseFloat(this.form.quantity);
      if (isNaN(quantity) || quantity === 0) {
        return (0).toFixed(2);
      } else {
        return ((this.form.redeemed_quantity / quantity) * 100).toFixed(2);
      }
    },
    // 顯示兌換率的結束角度
    endAngle() {
      return this.redemptionRatio * Math.PI;
    },
  },
  watch: {
    
  },
  created() {
    
  },
  methods: {
      
   },
  }

</script>

<style lang="scss" scoped>
.main {
  margin: 48px 48px 0px 48px;
}


</style>