当前位置：首页 > VUE

vue实现圆环进度环

2026-02-24 13:17:34VUE

使用 SVG 实现圆环进度条

SVG 的 <circle> 元素适合绘制圆环进度条。通过 stroke-dasharray 和 stroke-dashoffset 控制进度。

模板代码

<template>
  <div class="progress-ring">
    <svg width="120" height="120">
      <circle
        class="progress-ring__background"
        stroke="#eee"
        stroke-width="8"
        fill="transparent"
        r="52"
        cx="60"
        cy="60"
      />
      <circle
        class="progress-ring__circle"
        stroke="#42b983"
        stroke-width="8"
        fill="transparent"
        r="52"
        cx="60"
        cy="60"
        :style="{
          strokeDasharray: circumference,
          strokeDashoffset: dashOffset,
        }"
      />
    </svg>
    <div class="progress-text">{{ progress }}%</div>
  </div>
</template>

脚本逻辑

<script>
export default {
  props: {
    progress: {
      type: Number,
      default: 0,
      validator: (value) => value >= 0 && value <= 100,
    },
  },
  data() {
    return {
      circumference: 2 * Math.PI * 52,
    };
  },
  computed: {
    dashOffset() {
      return this.circumference - (this.progress / 100) * this.circumference;
    },
  },
};
</script>

样式调整

<style scoped>
.progress-ring {
  position: relative;
  display: inline-block;
}
.progress-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 16px;
}
.progress-ring__circle {
  transition: stroke-dashoffset 0.5s ease;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}
</style>

使用 Canvas 实现动态圆环

Canvas 适合需要动态渲染的场景，通过 requestAnimationFrame 实现动画效果。

模板与脚本

<template>
  <canvas ref="canvas" width="200" height="200"></canvas>
</template>

<script>
export default {
  props: {
    progress: {
      type: Number,
      default: 0,
    },
  },
  mounted() {
    this.drawProgress();
  },
  watch: {
    progress() {
      this.drawProgress();
    },
  },
  methods: {
    drawProgress() {
      const canvas = this.$refs.canvas;
      const ctx = canvas.getContext("2d");
      const centerX = canvas.width / 2;
      const centerY = canvas.height / 2;
      const radius = 80;
      const lineWidth = 10;

      // 清除画布
      ctx.clearRect(0, 0, canvas.width, canvas.height);

      // 绘制背景圆环
      ctx.beginPath();
      ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
      ctx.strokeStyle = "#eee";
      ctx.lineWidth = lineWidth;
      ctx.stroke();

      // 绘制进度圆环
      const startAngle = -Math.PI / 2;
      const endAngle = startAngle + (2 * Math.PI * this.progress) / 100;
      ctx.beginPath();
      ctx.arc(centerX, centerY, radius, startAngle, endAngle);
      ctx.strokeStyle = "#42b983";
      ctx.lineWidth = lineWidth;
      ctx.stroke();

      // 绘制文本
      ctx.fillStyle = "#333";
      ctx.font = "24px Arial";
      ctx.textAlign = "center";
      ctx.fillText(`${this.progress}%`, centerX, centerY + 10);
    },
  },
};
</script>

使用第三方库（如 `vue-awesome-progress`）

安装库后直接调用组件，适合快速集成：

npm install vue-awesome-progress

示例代码

<template>
  <vue-awesome-progress
    type="circle"
    :progress="progress"
    :color="'#42b983'"
    :size="120"
  />
</template>

<script>
import VueAwesomeProgress from "vue-awesome-progress";
export default {
  components: { VueAwesomeProgress },
  data() {
    return {
      progress: 75,
    };
  },
};
</script>

vue实现圆环进度环