vue实现环形进度

Vue 实现环形进度条的方法

使用 SVG 和 CSS 实现

在 Vue 中创建一个环形进度条可以通过 SVG 和 CSS 结合实现。以下是一个简单的实现方式：

<template>
  <div class="circle-progress">
    <svg viewBox="0 0 36 36" class="circular-chart">
      <path
        class="circle-bg"
        d="M18 2.0845
          a 15.9155 15.9155 0 0 1 0 31.831
          a 15.9155 15.9155 0 0 1 0 -31.831"
      />
      <path
        class="circle"
        :stroke-dasharray="`${progress}, 100`"
        d="M18 2.0845
          a 15.9155 15.9155 0 0 1 0 31.831
          a 15.9155 15.9155 0 0 1 0 -31.831"
      />
    </svg>
    <div class="progress-text">{{ progress }}%</div>
  </div>
</template>

<script>
export default {
  props: {
    progress: {
      type: Number,
      default: 0,
      validator: value => value >= 0 && value <= 100
    }
  }
}
</script>

<style>
.circle-progress {
  position: relative;
  width: 100px;
  height: 100px;
}

.circular-chart {
  display: block;
  width: 100%;
  height: 100%;
}

.circle-bg {
  fill: none;
  stroke: #eee;
  stroke-width: 3;
}

.circle {
  fill: none;
  stroke: #4CAF50;
  stroke-width: 3;
  stroke-linecap: round;
  animation: progress 1s ease-out forwards;
}

.progress-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.2em;
  font-weight: bold;
}

@keyframes progress {
  0% {
    stroke-dasharray: 0, 100;
  }
}
</style>

使用第三方库

如果需要更复杂的功能，可以考虑使用专门的可视化库：

npm install vue-css-donut-chart

使用示例：

<template>
  <donut-chart
    :percent="progress"
    :size="100"
    :thickness="10"
    foreground-color="#4CAF50"
    background-color="#eee"
  />
</template>

<script>
import DonutChart from 'vue-css-donut-chart'

export default {
  components: {
    DonutChart
  },
  props: {
    progress: Number
  }
}
</script>

使用 Canvas 实现

对于需要动态绘制的情况，可以使用 Canvas：

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

<script>
export default {
  props: {
    progress: Number
  },
  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.lineWidth = lineWidth
      ctx.strokeStyle = '#eee'
      ctx.stroke()

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

实现动画效果

为环形进度条添加平滑的动画效果：

<template>
  <div class="animated-progress">
    <svg viewBox="0 0 36 36">
      <path
        class="track"
        d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
      />
      <path
        class="fill"
        :style="{ 'stroke-dashoffset': dashOffset }"
        d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
      />
    </svg>
  </div>
</template>

<script>
export default {
  props: {
    progress: {
      type: Number,
      default: 0
    }
  },
  computed: {
    dashOffset() {
      return 100 - this.progress
    }
  }
}
</script>

<style>
.animated-progress {
  width: 100px;
  height: 100px;
}

.track {
  fill: none;
  stroke: #eee;
  stroke-width: 3;
}

.fill {
  fill: none;
  stroke: #4CAF50;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 100;
  transition: stroke-dashoffset 0.5s ease-out;
}
</style>

这些方法提供了不同复杂度的环形进度条实现方式，可以根据项目需求选择最适合的方案。SVG 方法通常是最灵活和响应式的，而 Canvas 方法则适合需要复杂动态绘制的场景。第三方库可以快速实现但可能带来额外的依赖。