vue实现多个圆环

Vue 实现多个圆环的方法

使用 SVG 绘制圆环

SVG 是绘制圆环的理想选择，可以通过 circle 和 path 元素实现圆环效果。以下是一个简单的 Vue 组件示例：

<template>
  <svg width="200" height="200">
    <circle
      cx="100"
      cy="100"
      :r="radius"
      fill="none"
      stroke="#e6e6e6"
      stroke-width="strokeWidth"
    />
    <circle
      cx="100"
      cy="100"
      :r="radius"
      fill="none"
      stroke="#4CAF50"
      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 },
    percentage: { type: Number, default: 75 }
  },
  computed: {
    dashArray() {
      const circumference = 2 * Math.PI * this.radius;
      const dashValue = (this.percentage / 100) * circumference;
      return `${dashValue} ${circumference}`;
    }
  }
};
</script>

使用 Canvas 绘制圆环

Canvas 提供了更灵活的绘图能力，适合动态变化的圆环：

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

<script>
export default {
  props: {
    percentage: { type: Number, default: 75 }
  },
  mounted() {
    this.drawRing();
  },
  methods: {
    drawRing() {
      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 = '#e6e6e6';
      ctx.lineWidth = lineWidth;
      ctx.stroke();

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

使用 CSS 实现圆环

纯 CSS 方案适合简单的静态圆环效果：

<template>
  <div class="ring-container">
    <div class="ring-background"></div>
    <div class="ring-progress" :style="progressStyle"></div>
  </div>
</template>

<script>
export default {
  props: {
    percentage: { type: Number, default: 75 }
  },
  computed: {
    progressStyle() {
      return {
        'background-image': `conic-gradient(#4CAF50 ${this.percentage}%, transparent 0)`
      };
    }
  }
};
</script>

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

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

.ring-background {
  background: #e6e6e6;
}

.ring-progress {
  mask: radial-gradient(transparent 70px, #000 71px);
}
</style>

使用第三方库

对于更复杂的圆环需求，可以考虑使用专门的图表库：

1. Chart.js：适合数据可视化，支持圆环图（Doughnut Chart）

   

   <template>
     <canvas ref="chart"></canvas>
   </template>
   
   <script>
   import Chart from 'chart.js';
   
   export default {
     props: {
       data: { type: Array, default: () => [75, 25] }
     },
     mounted() {
       new Chart(this.$refs.chart, {
         type: 'doughnut',
         data: {
           datasets: [{
             data: this.data,
             backgroundColor: ['#4CAF50', '#e6e6e6']
           }]
         }
       });
     }
   };
   </script>

2. ECharts：提供更丰富的圆环图定制选项

   <template>
     <div ref="chart" style="width: 200px; height: 200px;"></div>
   </template>
   
   <script>
   import * as echarts from 'echarts';
   
   export default {
     props: {
       percentage: { type: Number, default: 75 }
     },
     mounted() {
       const chart = echarts.init(this.$refs.chart);
       chart.setOption({
         series: [{
           type: 'pie',
           radius: ['70%', '80%'],
           label: { show: false },
           data: [
             { value: this.percentage, itemStyle: { color: '#4CAF50' } },
             { value: 100 - this.percentage, itemStyle: { color: '#e6e6e6' } }
           ]
         }]
       });
     }
   };
   </script>

动态多个圆环的实现

要同时显示多个圆环，可以封装上述方法为可复用组件，并通过循环渲染：

<template>
  <div class="multi-rings">
    <Ring
      v-for="(item, index) in rings"
      :key="index"
      :percentage="item.percentage"
      :color="item.color"
    />
  </div>
</template>

<script>
import Ring from './Ring.vue'; // 假设使用前面封装的SVG组件

export default {
  components: { Ring },
  data() {
    return {
      rings: [
        { percentage: 75, color: '#4CAF50' },
        { percentage: 60, color: '#2196F3' },
        { percentage: 45, color: '#FFC107' }
      ]
    };
  }
};
</script>

<style>
.multi-rings {
  display: flex;
  gap: 20px;
}
</style>

以上方法提供了从简单到复杂的多种实现方案，可根据项目需求选择合适的方案。SVG方案适合大多数静态展示场景，Canvas适合需要高性能动画的场景，CSS方案最轻量，而第三方库则提供了最丰富的功能。