当前位置：首页 > VUE

vue实现多个圆环

2026-02-11 10:31:52VUE

使用 SVG 实现多个圆环

SVG 是绘制圆环的高效方式，适合动态调整样式。以下是一个基于 Vue 的示例：

vue实现多个圆环

<template>
  <svg width="200" height="200">
    <!-- 背景圆环 -->
    <circle
      cx="100"
      cy="100"
      :r="radius"
      fill="none"
      stroke="#eee"
      stroke-width="strokeWidth"
    />
    <!-- 动态圆环 -->
    <circle
      cx="100"
      cy="100"
      :r="radius"
      fill="none"
      stroke="#42b983"
      :stroke-width="strokeWidth"
      :stroke-dasharray="dashArray"
      stroke-linecap="round"
    />
  </svg>
</template>

<script>
export default {
  data() {
    return {
      radius: 80,
      strokeWidth: 10,
      progress: 75, // 百分比
    };
  },
  computed: {
    dashArray() {
      const circumference = 2 * Math.PI * this.radius;
      return `${(circumference * this.progress) / 100} ${circumference}`;
    },
  },
};
</script>

使用 Canvas 绘制多个圆环

Canvas 适合复杂动画或大量圆环场景。以下是一个 Vue 组件示例：

vue实现多个圆环

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

<script>
export default {
  mounted() {
    this.drawCircles();
  },
  methods: {
    drawCircles() {
      const ctx = this.$refs.canvas.getContext('2d');
      const center = { x: 100, y: 100 };

      // 背景圆环
      ctx.beginPath();
      ctx.arc(center.x, center.y, 80, 0, Math.PI * 2);
      ctx.strokeStyle = '#eee';
      ctx.lineWidth = 10;
      ctx.stroke();

      // 动态圆环
      ctx.beginPath();
      ctx.arc(center.x, center.y, 80, -Math.PI / 2, (Math.PI * 2 * 75) / 100 - Math.PI / 2);
      ctx.strokeStyle = '#42b983';
      ctx.lineWidth = 10;
      ctx.stroke();
    },
  },
};
</script>

使用 CSS 和伪元素实现

纯 CSS 方案适合静态圆环，结合 Vue 动态绑定样式：

<template>
  <div class="ring-container">
    <div class="ring-background"></div>
    <div 
      class="ring-progress" 
      :style="{
        '--progress': `${progress}%`,
        '--color': '#42b983',
        '--width': '10px'
      }"
    ></div>
  </div>
</template>

<style>
.ring-container {
  position: relative;
  width: 200px;
  height: 200px;
}

.ring-background, .ring-progress {
  position: absolute;
  border-radius: 50%;
  width: 100%;
  height: 100%;
}

.ring-background {
  border: 10px solid #eee;
}

.ring-progress {
  clip: rect(0, 100px, 200px, 0);
  transform: rotate(90deg);
  border: var(--width) solid transparent;
  border-top-color: var(--color);
  border-right-color: var(--color);
  animation: fill 1s linear forwards;
}

@keyframes fill {
  100% {
    transform: rotate(calc(360deg * var(--progress) / 100 + 90deg));
  }
}
</style>

使用第三方库（如 ECharts）

对于复杂需求，ECharts 提供高度可定制的圆环图：

<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%', '80%'],
        data: [
          { value: 75, name: 'Progress', itemStyle: { color: '#42b983' } },
          { value: 25, name: 'Remaining', itemStyle: { color: '#eee' } }
        ],
        label: { show: false }
      }]
    });
  },
};
</script>