更新记录

1.1（2026-04-11） 下载此版本

更新日志

所有重要的项目更新都会记录在此文件中。

[1.0.0] - 2026-04-11

新增

• 初始版本发布
• 基础功能
  • 支持单环进度条模式
  • 支持多环（同心圆叠加）模式
  • 支持渐变色进度条
  • 支持自定义圆弧角度（默认 4/3 圆 = 270°）
  • 支持自定义起始角度（默认 225°，左下角）
  • 支持自定义圆环宽度、颜色
  • 居中显示标题和百分比

组件特性

后续更新将在此文件中添加。

平台兼容性

uni-app(4.56)

渐变圆环进度条组件

一个基于 uni-app + Vue 3 的渐变圆环进度条组件，支持单环和多环（同心圆叠加）模式。

特性

• 支持单环和多环模式
• 支持渐变色进度条
• 支持自定义圆弧角度（默认 4/3 圆 = 270°）
• 支持自定义起始角度
• 支持自定义圆环宽度和颜色
• 居中显示标题和百分比

项目结构

.
├── components/
│   └── circularProgress/
│       └── circularProgress.vue    # 圆环进度条组件
├── pages/
│   └── index/
│       └── index.vue               # 示例页面
├── App.vue                          # 应用入口
├── main.js                          # 主入口文件
├── manifest.json                    # uni-app 配置
├── package.json                     # 依赖配置
└── README.md                        # 项目文档

快速开始

安装依赖

npm install

运行项目

# H5
npm run dev:h5

# 微信小程序
npm run dev:mp-weixin

# 其他平台
npm run dev:平台名

组件使用

基本用法（单环模式）

<circular-progress
  :boxWidth="200"
  :boxHeight="200"
  :percent="75"
  title="进度"
  progressColor="#3B82F6"
  gradualColor="#8B5CF6"
/>

多环模式（同心圆叠加）

<circular-progress
  :boxWidth="240"
  :boxHeight="240"
  :angleRatio="0.75"
  title="综合"
  :rings="[
    { percent: 75, lineWidth: 12, progressColor: '#FF6B6B', gradualColor: '#FFA500', bgColor: '#FFE5E5', startAngle: 225 },
    { percent: 60, lineWidth: 12, progressColor: '#3B82F6', gradualColor: '#8B5CF6', bgColor: '#E5F0FF', startAngle: 225 },
    { percent: 85, lineWidth: 12, progressColor: '#10B981', gradualColor: '#34D399', bgColor: '#D1FAE5', startAngle: 225 }
  ]"
/>

Props 参数

rings 数组项配置

示例效果

组件支持以下视觉效果：

• 单环进度条（带渐变色）
• 多环同心圆叠加（最多支持多个同心圆）
• 自定义圆弧角度（从 0 到完整圆）
• 自定义起始角度（默认从左下角 225° 开始）

技术栈

• uni-app
• Vue 3
• TypeScript
• Canvas API

许可证

MIT