更新记录

1.0（2025-06-22） 下载此版本

初始版本发布 支持半圆形进度条基础功能 支持自定义颜色、大小、边框、文本、动画等参数

平台兼容性

uni-app(4.03)

uni-app x(4.03)

其他

半圆形进度图组件 - 快速使用指南

🚀 快速开始

1. 复制组件文件

将 halfCircleProgress.vue 文件复制到你的 uni-app 项目中。

2. 在页面中引入

<template>
  <view>
    <half-circle-progress :progress="75" />
  </view>
</template>

<script>
import HalfCircleProgress from './halfCircleProgress.vue'

export default {
  components: {
    HalfCircleProgress
  }
}
</script>

📝 常用配置

基础用法

<!-- 显示75%进度 -->
<half-circle-progress :progress="75" />

自定义颜色

<!-- 绿色主题 -->
<half-circle-progress 
  :progress="80" 
  fill-color="#4CAF50"
  border-color="#E8F5E8"
/>

自定义大小

<!-- 小尺寸 -->
<half-circle-progress 
  :progress="60" 
  :size="100"
/>

<!-- 大尺寸 -->
<half-circle-progress 
  :progress="60" 
  :size="200"
/>

显示自定义文本

<!-- 显示步数 -->
<half-circle-progress 
  :progress="65" 
  text="8,500步"
  :show-percentage="false"
/>

<!-- 显示温度 -->
<half-circle-progress 
  :progress="85" 
  text="25°C"
  :show-percentage="false"
/>

调整文本位置

<!-- 文本居中（默认） -->
<half-circle-progress 
  :progress="70" 
  text-position="center"
/>

<!-- 文本顶部 -->
<half-circle-progress 
  :progress="70" 
  text-position="top"
/>

<!-- 文本底部 -->
<half-circle-progress 
  :progress="70" 
  text-position="bottom"
/>

控制是否显示百分号（showPercentage）

1. 默认显示百分号

<half-circle-progress :progress="75" />

显示效果： 75%

2. 不显示百分号

<half-circle-progress :progress="75" :show-percentage="false" />

显示效果： 75

3. 配合自定义文本

<half-circle-progress :progress="80" text="8000步" :show-percentage="false" />

显示效果： 8000步

<half-circle-progress :progress="90" text="25°C" :show-percentage="false" />

显示效果： 25°C

🎨 常用场景

任务进度

<view class="task-item">
  <text>今日任务</text>
  <half-circle-progress 
    :progress="taskProgress"
    fill-color="#007AFF"
    :text-size="16"
  />
</view>

健康数据

<view class="health-card">
  <text>步数目标</text>
  <half-circle-progress 
    :progress="stepProgress"
    fill-color="#FF9800"
    text="8,500"
    :show-percentage="false"
  />
</view>

数据仪表盘

<view class="dashboard">
  <half-circle-progress 
    :progress="cpuUsage"
    fill-color="#F44336"
    text="CPU使用率"
    :text-size="12"
  />
</view>

⚙️ 完整参数列表

🔧 动态更新

<template>
  <view>
    <half-circle-progress 
      :progress="currentProgress"
      :animation-duration="500"
    />
    <button @click="updateProgress">更新进度</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentProgress: 30
    }
  },
  methods: {
    updateProgress() {
      this.currentProgress = Math.floor(Math.random() * 100)
    }
  }
}
</script>

🎯 最佳实践

1. 选择合适的尺寸: 小尺寸(80-120px)适合列表项，大尺寸(150-200px)适合卡片展示
2. 颜色搭配: 使用对比度适中的颜色，确保文本清晰可读
3. 动画时长: 快速更新用500ms，重要数据用1000ms
4. 文本内容: 进度百分比适合任务进度，具体数值适合数据展示

❓ 常见问题

Q: 如何禁用动画？ A: 设置 animationDuration="0"

Q: 如何隐藏百分比符号？ A: 设置 showPercentage="false"

Q: 如何调整文本大小？ A: 使用 textSize 属性，建议值为组件大小的1/8到1/6

Q: 支持哪些平台？ A: 支持所有 uni-app 平台：iOS、Android、H5、各种小程序

📖 更多详细信息请查看 README.md