圆形进度条组件 (c-circleProgress)

圆形进度条组件提供了一个美观的环形进度指示器，可用于显示任务完成进度、倒计时、评分等场景。组件使用 canvas 绘制，支持自定义颜色、大小和显示格式。

基本用法

<template>
  <view class="container">
    <c-circleProgress :percentage="75"></c-circleProgress>
  </view>
</template>

自定义颜色和大小

<template>
  <view class="container">
    <c-circleProgress 
      :percentage="80" 
      :size="240" 
      strokeColor="#00C853" 
      backgroundColor="#E0E0E0"
    ></c-circleProgress>
  </view>
</template>

显示自定义标签

<template>
  <view class="container">
    <c-circleProgress 
      :percentage="60" 
      label="完成度"
    ></c-circleProgress>
  </view>
</template>

显示自定义内容

<template>
  <view class="container">
    <c-circleProgress :percentage="85">
      <view class="custom-content">
        <image src="/static/icons/star.png" class="star-icon"></image>
        <text class="score">8.5</text>
      </view>
    </c-circleProgress>
  </view>
</template>

<style lang="scss" scoped>
.custom-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  
  .star-icon {
    width: 30rpx;
    height: 30rpx;
  }
  
  .score {
    font-size: 36rpx;
    font-weight: bold;
    margin-top: 10rpx;
  }
}
</style>

属性说明

属性名	类型	默认值	说明
percentage	Number	0	进度百分比，范围 0-100
size	Number	200	圆环大小，单位rpx
strokeWidth	Number	10	圆环宽度，单位rpx
strokeColor	String	'#FD0100'	圆环颜色
backgroundColor	String	'#EBEEF5'	圆环背景色
textColor	String	'#1A1A1A'	中心文字颜色
subTextColor	String	'#999999'	副文字颜色
label	String	''	中心文字标签
showText	Boolean	true	是否显示中心文字
clockwise	Boolean	true	是否顺时针增加

插槽

插槽名	说明
default	自定义中心内容，设置后会覆盖默认的百分比文字

实现原理

组件基于 Canvas 实现，主要工作流程如下：

1. 组件初始化时，获取画布的实际宽高和设备像素比
2. 创建 canvas 上下文并绘制圆环：
   • 首先绘制背景圆环（完整的圆）
   • 然后根据传入的百分比计算进度圆弧的终点角度
   • 绘制进度圆弧（从12点钟位置开始）
3. 在 canvas 上层使用绝对定位显示中心内容
4. 当 percentage 属性变化时，自动重新绘制圆环

样式特点

• 圆环采用圆角线段端点（lineCap: 'round'）
• 默认中心内容采用垂直排列的方式，上方显示百分比，下方显示标签
• 百分比文字大小自动根据圆环大小按比例调整（size * 0.2）
• 标签文字大小自动根据圆环大小按比例调整（size * 0.08）
• 百分比文字使用粗体显示，标签文字使用常规字体

注意事项

1. 组件使用 canvas 绘制，确保在支持 canvas 的环境中使用
2. 百分比值超过 100 或小于 0 时会自动限制在 0-100 范围内
3. 组件会在 mounted 生命周期后初始化 canvas，并在 percentage 变化时重新绘制
4. 组件会根据传入的 size 自动调整内部文字的大小
5. 如果使用自定义插槽内容，建议也按比例调整内容大小，以适应不同的圆环尺寸