charge_miniapp/components/qs-circle-percent/README.md

qs-circle-percent 圆形进度条组件

简介

qs-circle-percent 是一个基于 canvas 绘制的圆形进度条组件，适用于展示百分比数据，如任务完成度、评分等场景。该组件支持自定义尺寸、颜色、线宽和圆弧角度，使用灵活便捷。

功能特性

• 支持自定义进度百分比显示
• 可调整圆的尺寸大小
• 可自定义进度颜色和背景颜色
• 支持调整线宽
• 可设置圆弧角度（全圆、半圆、三分之一圆等）
• 自动响应数据变化

组件使用

引入组件

<template>
  <view>
    <qs-circle-percent 
      :percent="60" 
      :size="120" 
      :lineWidth="8" 
      color="#ff7b00" 
    />
  </view>
</template>

<script>
  import qsCirclePercent from '@/components/qs-circle-percent/qs-circle-percent.vue'
  
  export default {
    components: {
      qsCirclePercent
    }
  }
</script>

属性说明

属性名	类型	默认值	说明
canvasId	String	"11"	Canvas 元素的 ID，用于绘制圆形进度条
percent	Number	0	当前进度百分比，范围 0-100
size	Number	100	圆形进度条的尺寸（直径），单位为像素
lineWidth	Number	5	进度条的线宽
color	String	"#ff7b00"	进度条的颜色
backgroundColor	String	"#f2f2f2"	背景圆的颜色
angle	Number	360	显示的圆弧角度（360=全圆, 180=半圆, 120=三分之一圆）

示例

基本用法

<qs-circle-percent :percent="75" />

自定义颜色和尺寸

<qs-circle-percent 
  :percent="85" 
  :size="150" 
  :lineWidth="10" 
  color="#4caf50" 
  backgroundColor="#e0e0e0" 
/>

半圆进度条

<qs-circle-percent 
  :percent="60" 
  :angle="180" 
  color="#2196f3" 
/>

动态更新进度

<template>
  <view>
    <qs-circle-percent :percent="progress" />
    <button @click="increaseProgress">增加进度</button>
  </view>
</template>

<script>
  import qsCirclePercent from '@/components/qs-circle-percent/qs-circle-percent.vue'
  
  export default {
    components: {
      qsCirclePercent
    },
    data() {
      return {
        progress: 30
      }
    },
    methods: {
      increaseProgress() {
        this.progress = Math.min(100, this.progress + 10)
      }
    }
  }
</script>

注意事项

• 组件会自动响应 percent 和 angle 属性的变化并重新绘制
• 多个组件实例同时使用时，请确保为每个组件设置不同的 canvasId
• 组件内部使用了 uni-app 的 createCanvasContext API，确保在支持 canvas 的环境中使用