data-marketing-platform/src/views/count/components/ProgressRing.vue

<template>
  <svg :width="size" :height="size" :viewBox="`0 0 ${size} ${size}`">
    <!-- 背景圆环 -->
    <circle 
      :cx="center" 
      :cy="center" 
      :r="radius" 
      fill="none" 
      :stroke="backgroundColor" 
      :stroke-width="strokeWidth"
      :stroke-linecap="softCorner ? 'round' : 'butt'"
    />
    <!-- 进度圆环 -->
    <circle 
      :cx="center" 
      :cy="center" 
      :r="radius" 
      fill="none" 
      :stroke="progressColor" 
      :stroke-width="strokeWidth"
      :stroke-dasharray="`${circumference * progress} ${circumference}`"
      :transform="`rotate(-90 ${center} ${center})`"
      :stroke-linecap="softCorner ? 'round' : 'butt'"
    />
  </svg>
</template>

<script lang="ts" setup>
import { computed } from 'vue'

interface Props {
  // 进度值 (0-1)
  progress?: number
  // 圆环大小
  size?: number
  // 背景圆环颜色
  backgroundColor?: string
  // 进度圆环颜色
  progressColor?: string
  // 圆环粗细
  strokeWidth?: number
  // 是否为软角
  softCorner?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  progress: 0,
  size: 96,
  backgroundColor: 'rgba(239, 239, 239, 1)',
  progressColor: 'rgba(0, 188, 113, 1)',
  strokeWidth: 10,
  softCorner: false
})

// 计算中心点
const center = computed(() => props.size / 2)

// 计算半径 (减去strokeWidth的一半，确保圆环完全显示)
const radius = computed(() => (props.size - props.strokeWidth) / 2)

// 计算圆周长
const circumference = computed(() => 2 * Math.PI * radius.value)
</script>

<style scoped>
svg {
  vertical-align: middle;
}
</style>