vue实现多个圆环

Vue 实现多个圆环的方法

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

使用 SVG 实现多个圆环

SVG 是一种矢量图形技术，适合绘制圆环等图形。可以通过 vue-svg 或原生 SVG 标签实现。

<template>
  <svg width="200" height="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="502"
      :stroke-dashoffset="502 - (502 * progress) / 100"
      transform="rotate(-90 100 100)"
    />
  </svg>
</template>

<script>
export default {
  data() {
    return {
      progress: 60, // 圆环进度（0-100）
    };
  },
};
</script>

使用 Canvas 实现多个圆环

Canvas 适合动态绘制多个圆环，可以通过 vue-canvas 或原生 Canvas API 实现。

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

<script>
export default {
  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, Math.PI * 2);
      ctx.strokeStyle = "#e6e6e6";
      ctx.lineWidth = lineWidth;
      ctx.stroke();

      // 动态圆环
      const progress = 0.6; // 进度（0-1）
      ctx.beginPath();
      ctx.arc(
        centerX,
        centerY,
        radius,
        -Math.PI / 2,
        -Math.PI / 2 + Math.PI * 2 * progress
      );
      ctx.strokeStyle = "#42b983";
      ctx.lineWidth = lineWidth;
      ctx.stroke();
    },
  },
};
</script>

使用第三方库（如 D3.js）

如果需要更复杂的圆环效果，可以结合 D3.js 实现。

<template>
  <div ref="chart"></div>
</template>

<script>
import * as d3 from "d3";

export default {
  mounted() {
    this.renderChart();
  },
  methods: {
    renderChart() {
      const width = 200;
      const height = 200;
      const radius = Math.min(width, height) / 2;

      const svg = d3
        .select(this.$refs.chart)
        .append("svg")
        .attr("width", width)
        .attr("height", height)
        .append("g")
        .attr("transform", `translate(${width / 2}, ${height / 2})`);

      const arc = d3
        .arc()
        .innerRadius(radius - 10)
        .outerRadius(radius);

      const pie = d3.pie().value((d) => d.value);

      const data = [{ value: 60 }, { value: 40 }];

      svg
        .selectAll("path")
        .data(pie(data))
        .enter()
        .append("path")
        .attr("d", arc)
        .attr("fill", (d, i) => (i === 0 ? "#42b983" : "#e6e6e6"));
    },
  },
};
</script>

使用 Vue 组件库（如 ECharts）

ECharts 提供了丰富的图表功能，包括圆环图。

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

<script>
import * as echarts from "echarts";

export default {
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      const chart = echarts.init(this.$refs.chart);
      const option = {
        series: [
          {
            type: "pie",
            radius: ["50%", "70%"],
            data: [
              { value: 60, name: "Progress" },
              { value: 40, name: "Remaining" },
            ],
            label: {
              show: false,
            },
          },
        ],
      };
      chart.setOption(option);
    },
  },
};
</script>

以上方法可以根据需求选择适合的技术实现多个圆环效果。