vue实现多个圆环

Vue 实现多个圆环的方法

在 Vue 中实现多个圆环可以通过 SVG 或 Canvas 实现，以下是两种常见的实现方式：

使用 SVG 绘制圆环

SVG 是一种矢量图形格式，适合绘制圆环等图形。可以通过 vue-svg-circle 或手动实现。

<template>
  <svg width="200" height="200">
    <circle
      cx="100"
      cy="100"
      :r="radius"
      fill="transparent"
      stroke="#e0e0e0"
      stroke-width="strokeWidth"
    />
    <circle
      cx="100"
      cy="100"
      :r="radius"
      fill="transparent"
      :stroke="color"
      stroke-width="strokeWidth"
      :stroke-dasharray="dashArray"
      stroke-linecap="round"
    />
  </svg>
</template>

<script>
export default {
  props: {
    radius: { type: Number, default: 80 },
    strokeWidth: { type: Number, default: 10 },
    progress: { type: Number, default: 70 },
    color: { type: String, default: "#4CAF50" }
  },
  computed: {
    dashArray() {
      const circumference = 2 * Math.PI * this.radius;
      const dashValue = (this.progress / 100) * circumference;
      return `${dashValue} ${circumference}`;
    }
  }
};
</script>

使用 Canvas 绘制圆环

Canvas 适合动态或复杂的图形渲染，可以通过 Vue 的 ref 和生命周期钩子实现。

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

<script>
export default {
  props: {
    progress: { type: Number, default: 70 },
    color: { type: String, default: "#4CAF50" }
  },
  mounted() {
    this.drawCircle();
  },
  methods: {
    drawCircle() {
      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.beginPath();
      ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
      ctx.strokeStyle = "#e0e0e0";
      ctx.lineWidth = lineWidth;
      ctx.stroke();

      // 绘制进度圆环
      ctx.beginPath();
      ctx.arc(
        centerX,
        centerY,
        radius,
        -0.5 * Math.PI,
        (2 * Math.PI * this.progress) / 100 - 0.5 * Math.PI
      );
      ctx.strokeStyle = this.color;
      ctx.lineWidth = lineWidth;
      ctx.stroke();
    }
  }
};
</script>

使用第三方库（如 ECharts）

如果需要更复杂的圆环图表，可以使用 ECharts 或 Chart.js 等库。

<template>
  <div ref="chart" style="width: 200px; height: 200px"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
  mounted() {
    const chart = echarts.init(this.$refs.chart);
    chart.setOption({
      series: [
        {
          type: "pie",
          radius: ["60%", "70%"],
          label: { show: false },
          data: [
            { value: 70, name: "Progress", itemStyle: { color: "#4CAF50" } },
            { value: 30, name: "Remaining", itemStyle: { color: "#e0e0e0" } }
          ]
        }
      ]
    });
  }
};
</script>

多个圆环的实现

如果需要多个圆环，可以通过循环或组件复用的方式实现。

<template>
  <div class="circle-container">
    <CircleProgress
      v-for="(item, index) in circles"
      :key="index"
      :progress="item.progress"
      :color="item.color"
    />
  </div>
</template>

<script>
import CircleProgress from "./CircleProgress.vue";
export default {
  components: { CircleProgress },
  data() {
    return {
      circles: [
        { progress: 70, color: "#4CAF50" },
        { progress: 50, color: "#2196F3" },
        { progress: 30, color: "#FFC107" }
      ]
    };
  }
};
</script>

以上方法可以根据需求选择 SVG、Canvas 或第三方库实现多个圆环。