vue实现圆环进度

Vue 实现圆环进度的方法

使用 SVG 实现圆环进度

SVG 的 circle 和 path 元素可以轻松绘制圆环进度条。通过动态计算 stroke-dasharray 和 stroke-dashoffset 实现进度效果。

<template>
  <div class="circle-progress">
    <svg width="200" height="200" viewBox="0 0 200 200">
      <circle
        cx="100"
        cy="100"
        r="80"
        fill="none"
        stroke="#e6e6e6"
        stroke-width="10"
      />
      <circle
        cx="100"
        cy="100"
        r="80"
        fill="none"
        stroke="#42b983"
        stroke-width="10"
        :stroke-dasharray="circumference"
        :stroke-dashoffset="offset"
      />
    </svg>
    <div class="progress-text">{{ progress }}%</div>
  </div>
</template>

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

<style>
.circle-progress {
  position: relative;
  width: 200px;
  height: 200px;
}
.progress-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 24px;
}
</style>

使用 Canvas 实现圆环进度

Canvas 提供了更灵活的绘图方式，适合需要复杂动画效果的场景。

<template>
  <div class="circle-progress">
    <canvas ref="canvas" width="200" height="200"></canvas>
    <div class="progress-text">{{ progress }}%</div>
  </div>
</template>

<script>
export default {
  props: {
    progress: {
      type: Number,
      default: 0,
      validator: value => value >= 0 && value <= 100
    }
  },
  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, Math.PI * 2);
      ctx.strokeStyle = '#e6e6e6';
      ctx.lineWidth = lineWidth;
      ctx.stroke();

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

使用第三方库实现圆环进度

对于更复杂的需求，可以使用专门的可视化库如 vue-awesome-progress 或 echarts。

安装 vue-awesome-progress：

npm install vue-awesome-progress

使用示例：

<template>
  <div>
    <circle-progress
      :percent="progress"
      :size="200"
      :border-width="10"
      :border-bg-width="10"
      fill-color="#42b983"
      empty-color="#e6e6e6"
    />
  </div>
</template>

<script>
import CircleProgress from 'vue-awesome-progress';

export default {
  components: {
    CircleProgress
  },
  props: {
    progress: {
      type: Number,
      default: 0
    }
  }
};
</script>

动画效果优化

为进度条添加平滑的动画过渡效果，可以使用 CSS 过渡或 JavaScript 动画库。

/* 为 SVG 实现的圆环添加过渡 */
circle {
  transition: stroke-dashoffset 0.5s ease-in-out;
}

/* 为 Canvas 实现的圆环添加动画 */
@keyframes progress {
  from { transform: rotate(-90deg); }
  to { transform: rotate(calc(-90deg + 360deg * var(--progress))); }
}

以上方法提供了多种实现圆环进度的方案，可以根据项目需求选择最适合的方式。