更新记录

1.0.0（2025-05-28） 下载此版本

v1.0.0

• 首次发布仪表盘进度条组件。
• 支持多段颜色区间配置（colorSections）。
• 支持动态指针、中心数值与描述文本展示。
• 支持自定义外环颜色、背景色、尺寸、canvasId。
• 响应 value 和 size 变化自动重绘。
• 优化刻度与指针渲染，提升性能与视觉效果。

平台兼容性

uni-app

tzx-gauge-progress 仪表盘进度条组件

组件简介

tzx-gauge-progress 是一个基于 canvas 实现的仪表盘进度条组件，支持多段颜色、动态指针、中心数值与描述文本展示，适用于 UniApp 项目。

tzx-gauge-progress 组件 API 说明

属性（Props）

colorSections 详细说明

• 类型：Array<{max:Number, color:String}>
• 作用：定义不同进度区间的刻度和文字颜色。例如：
  • {max:10, color:'#F44336'} 表示 0~10 区间为红色
  • {max:80, color:'#1DE9F3'} 表示 10~80 区间为蓝色
  • {max:100, color:'#00FF00'} 表示 80~100 区间为绿色
• 注意：max 必须递增，最后一个 max 应为 100

示例

<tzx-gauge-progress
  :value="70"
  title="进度"
  :size="350"
  valueColor="#333"
  :colorSections="[{max:10,color:'#F44336'},{max:80,color:'#1DE9F3'},{max:100,color:'#00FF00'}]"
  outerRingColor="#F44336"
  outerRingBgColor="#444"
/>