设置UI引擎前端页面进度图组件属性
进度图组件是一种用于数据可视化的工具，以横向进度条的形式直观展示目标任务的完成进度、指标达成率以及数据占比关系。该组件支持基础进度图与堆叠进度图两种样式，广泛适用于生产任务进度追踪、设备检修完成率监控、能耗配额使用进度、物料消耗占比、多工序产能达成率统计等场景。
通过动态配色、自定义文本样式等功能，进度图组件能够结合数据源实现动态渲染，帮助用户快速掌握进度情况及异常状态。
前提条件
已在当前页面添加“进度图”组件，具体操作请参见为UI引擎前端页面添加物料组件。
配置入口
- 在页面设计器的中心画布区，单击选中“进度图”组件。
- 在右侧设置面板中，单击
，即可展开“属性”设置面板。
基础属性
|
属性名称 |
说明 |
支持状态变量绑定 |
|---|---|---|
|
图表数据 |
配置进度图需渲染的核心数据，格式为对象数组。 数据结构随进度图类型不同而变化，具体配置请参见表1。 |
是 |
|
颜色 |
配置每个进度条的填充颜色，值为颜色字符串组成的数组（如“['#1890FF', '#52C41A', '#FAAD14']”）。 多进度条或堆叠进度图多分类时，将从数组中循环取值。 |
是 |
|
柱形宽度 |
设置进度图柱形的宽度（横向进度图中对应垂直方向尺寸，直接影响进度条视觉饱满度），单位为像素（px）。 |
是 |
|
标定值 |
作为进度计算的基准值，用于确定进度条长度占比。
|
是 |
|
类型 |
配置进度图样式类型，可选两种模式：
|
是 |
|
图表内边距值 |
设置图表组件内边距，值为数值数组，顺序对应““[上, 右, 下, 左]””，单位为像素（如“[10, 20, 10, 20]”）。可根据页面布局调整，避免进度图与容器边缘、标题、图例等组件重叠。 |
是 |
|
根据状态设置颜色 |
按数据“value”对应的状态动态切换进度条颜色，支持四种状态：error（异常）、warning（警戒）、subwarning（次级警戒）、success（正常）。 配置规则：先对各状态对应的阈值按大小排序，“value”介于两个阈值之间时，显示前一状态颜色。例如：完成率<60%为“error”红色，60%-80%为“warning”黄色，≥80%为“success”绿色。 |
是 |
|
标题样式 |
自定义进度条左侧标题（即数据“name”字段）的样式，配置规则请参见*TextStyle配置项。 |
是 |
|
右侧文本样式 |
自定义进度条右侧文本（如进度百分比、数值）的样式，配置规则请参见*TextStyle配置项。 |
是 |
|
右侧文本单位 |
控制进度条右侧文本的显示单位，随图表类型差异化配置：
|
是 |
|
图表容器宽度 |
设置进度图容器的宽度。 |
是 |
|
图表容器高度 |
设置进度图容器的高度。 |
是 |
|
显示加载状态 |
控制是否启用加载状态。 |
是 |
|
暂无数据 |
控制无数据时是否显示占位提示。 |
是 |
|
属性名称 |
类型 |
说明 |
|---|---|---|
|
name |
string |
横向进度条/堆叠进度条系列的名称。 |
|
value （进度图时传入） |
number |
基础进度图中横向进度条长度对应的核心数值，结合标定值计算进度占比。 |
|
children （堆叠进度图时传入） |
Array<{ type: string; value: number; }> |
当图表类型为堆叠进度图时：
|
数据示例：
// 基础进度图（设备检修完成率）
[
{ name: '设备A-电机检修', value: 80 }, // 完成率80%
{ name: '设备B-阀门检修', value: 65 }, // 完成率65%
{ name: '设备C-传感器检修', value: 45 } // 完成率45%
]
// 堆叠进度图（产线物料消耗构成）
[
{
name: '产线1',
children: [
{ type: '物料A（钢材）', value: 30 }, // 消耗30吨
{ type: '物料B（铝材）', value: 20 }, // 消耗20吨
{ type: '物料C（塑料）', value: 45 } // 消耗45吨
]
},
{
name: '产线2',
children: [
{ type: '物料A（钢材）', value: 12 },
{ type: '物料B（铝材）', value: 14 },
{ type: '物料C（塑料）', value: 33 }
]
}
]
其他
如下属性适用于UI引擎所有组件，用于精细化控制。
|
属性名称 |
说明 |
是否支持变量绑定 |
|---|---|---|
|
元素id值 |
对应HTML标签的“id”属性，同一页面内必须唯一。 |
是 |
|
样式类 |
对应HTML标签的“class”属性，为空格分隔的类名列表，用于自定义组件样式。默认为“component-base-style”。 |
是 |
|
ref引用类 |
对应Vue的“ref”属性，用于注册模板引用以访问组件实例方法。 如果为“数据源表单”组件，会自动填充默认值。 |
是 |
