进度图
一、组件说明
进度图用于展示当前值在某个范围内的完成程度，常用于目标达成情况、任务进展、比率变化等场景。支持环形与水平条形两种模式，能够直观、简洁地呈现数值型进度信息。
二、功能配置
进度图支持灵活的数据源绑定、数据权限设置，并提供多种数据字段配置选项。
1. 数据源选择
进度图支持以下两类数据来源：
- 表单数据源：可绑定系统中已有的表单数据进行进度展示。
- 聚合表数据源：适用于结构化、多来源汇总的数据分析。
（图片示例：数据源选择界面）
预留图片位置
2. 数据权限控制
用于限制图表所展示的数据范围，确保数据合规展示。
- 关联人员权限数据：用户仅能查看自身权限内的数据。
- 全部 数据：展示所有可用数据，无权限过滤。
（图片示例：数据权限设置界面）
预留图片位置
3. 可配置项
| 配置项 | 说明 |
|---|---|
| 纬度 | 用于分组展示不同对象的进度情况（如员工、项目、产品等）。 |
| 指标（进度值） | 用于计算当前进度的主字段。可为该字段设置最大值，用于进度比例计算。 |
| 最大值设置 | 可选择：① 固定值（如100）② 来自数据源的某字段（如目标值） |
| 显示前 N 条 | 限制图表中展示的数量，如只展示进度前5名项目。 |
| 筛选条件 | 支持对数据设置条件过滤（如部门、时间、负责人等）。 |
| 排序方式 | 可按进度值升序或降序排列，控制展示优先级。 |
（图片示例：字段配置界面（纬度、进度值、最大值设置））
预留图片位置
三、样式配置
样式配置用于调整进度图的视觉表现与展示方式，增强数据的表达力。
1. 进度图模式
- 环形模式：以环形比例展示当前进度。
- 水平模式：以横条形形式展示进度进展。
（图片示例：环形与水平模式对比图）
预留图片位置
2. 端点样式
设置进度条的起始和结束样式：
- 圆角：边缘圆润，视觉柔和。
- 方形：边缘平直，适合严谨风格展示。
（图片示例：端点样式效果对比图）
预留图片位置
3. 环形样式相关参数
| 配置项 | 说明 |
|---|---|
| 内半径 | 控制环形中空部分的大小，取值范围为 0~1，数值越大，环越细。 |
| 圆环缺口角度 | 设置圆环的开口角度，支持 0 - 295 度，默认值为 0，0 表示不缺口。 |
（图片示例：内半径与缺口角度调整效果图）
预留图片位置
4. 颜色设置
支持为进度条设置渐变色：
- 设置渐变色的起始颜色与结束颜色
- 渐变方向由系统自动适配图表类型（环形/水平）
（图片示例：渐变色设置效果示意图）
预留图片位置
5. 指标显示方式
设置进度值的展示形式：
- 显示百分比：展示为“完成百分比”，如“76%”
- 显示真实值：展示当前值 / 最大值，如“76 / 100”
- 隐藏：不显示任何指标文字
若选择“显示百分比”，可设置最大值为固定值100，适用于百分比场景。
（图片示例：百分比与真实值显示效果对比图）
预留图片位置
6. 标题设置
| 配置项 | 说明 |
|---|---|
| 显示标题 | 控制是否显示进度图标题 |
| 标题大小 | 设置标题字体大小（单位：px） |
| 标题位置 | 可选：上方 / 下方 / 居中 / 左对齐 / 右对齐等 |
| 标题颜色 | 可自定义标题文字颜色 |
（图片示例：标题样式设置效果图）
预留图片位置
四、典型使用场景
进度图适用于所有需要展示任务、目标 、过程完成情况的业务场景，以下为常见示例：
项目执行进度
展示多个项目当前任务完成比，如“项目A已完成75%”。
员工任务达成情况
对比各员工KPI进度值，结合目标值评估执行状态。
（图片示例：进度图在项目管理/销售/学习等业务中的应用效果图）
预留图片位置