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

## 简介

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

## 功能特性

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

## 组件使用

### 引入组件

```vue
<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=三分之一圆） |

## 示例

### 基本用法

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

### 自定义颜色和尺寸

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

### 半圆进度条

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

### 动态更新进度

```vue
<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 的环境中使用