1.0.2 • Published 2 years ago
半圆进度条
📦 Install
npm i semi-circle-progress
📎 use
import SemiCircleProgress from "semi-circle-progress"
组件参数：
| 属性 | 说明 | 类型 | 默认值 |
|---|
| width | svg的宽 | number | 400 |
| heigt | svg的高 | number | 200 |
| config | 进度条配置 | configItem\|configItem[] | - |
configItem
| 属性 | 说明 | 类型 | 默认值 |
|---|
| position | 圆心的位置 | { x: number, y: number } | - |
| radius | 半径 | number | 50 |
| percent | 进度条百分比0～1 | number | 0.5 |
| strokeWidth | 进度条宽度 | number | 14 |
| strokeLinecap | 进度条样式 | butt\|square\|round | round |
| strokeBackgroundColor | 进度条背景色支持渐变色 | string\|{ offset: string;color: string;}[] | #f4f4f4 |
| strokeBarColor | 同strokeBackgroundColor | string\|{ offset: string;color: string;}[] | [{ offset: '0%', color: '#FF7529' },{ offset: '5%', color: '#FFAC47' },{ offset: '100%', color: '#FF7529' }] |