设置UI引擎前端页面进度图组件属性

进度图组件是一种用于数据可视化的工具，以横向进度条的形式直观展示目标任务的完成进度、指标达成率以及数据占比关系。该组件支持基础进度图与堆叠进度图两种样式，广泛适用于生产任务进度追踪、设备检修完成率监控、能耗配额使用进度、物料消耗占比、多工序产能达成率统计等场景。

通过动态配色、自定义文本样式等功能，进度图组件能够结合数据源实现动态渲染，帮助用户快速掌握进度情况及异常状态。

前提条件

已在当前页面添加“进度图”组件，具体操作请参见为UI引擎前端页面添加物料组件。

配置入口

在页面设计器的中心画布区，单击选中“进度图”组件。
在右侧设置面板中，单击，即可展开“属性”设置面板。

基础属性

属性名称	说明	支持状态变量绑定
图表数据	配置进度图需渲染的核心数据，格式为对象数组。数据结构随进度图类型不同而变化，具体配置请参见表1。	是
颜色	配置每个进度条的填充颜色，值为颜色字符串组成的数组（如“['#1890FF', '#52C41A', '#FAAD14']”）。多进度条或堆叠进度图多分类时，将从数组中循环取值。	是
柱形宽度	设置进度图柱形的宽度（横向进度图中对应垂直方向尺寸，直接影响进度条视觉饱满度），单位为像素（px）。	是
标定值	作为进度计算的基准值，用于确定进度条长度占比。基础进度图：默认基准值为100，进度占比 =（数据“value” / 标定值）× 100%。堆叠进度图：基准值为当前数据中各系列“children”数组“value”值总和的最大值，进度占比按单分类“value”与最大值的比例计算。	是
类型	配置进度图样式类型，可选两种模式：进度图（默认）：单条进度条展示单指标进度，适用于生产任务完成率、设备检修进度等场景。堆叠进度图：单条进度条内堆叠多分类数据，适用于多工序产能占比、物料消耗构成、能耗分类占比等场景。	是
图表内边距值	设置图表组件内边距，值为数值数组，顺序对应“[上, 右, 下, 左]”，单位为像素（如“[10, 20, 10, 20]”）。可根据页面布局调整，避免进度图与容器边缘、标题、图例等组件重叠。	是
根据状态设置颜色	按数据“value”对应的状态动态切换进度条颜色，支持四种状态：error（异常）、warning（警戒）、subwarning（次级警戒）、success（正常）。配置规则：先对各状态对应的阈值按大小排序，“value”介于两个阈值之间时，显示前一状态颜色。例如：完成率<60%为“error”红色，60%-80%为“warning”黄色，≥80%为“success”绿色。	是
标题样式	自定义进度条左侧标题（即数据“name”字段）的样式，配置规则请参见*TextStyle配置项。	是
右侧文本样式	自定义进度条右侧文本（如进度百分比、数值）的样式，配置规则请参见*TextStyle配置项。	是
右侧文本单位	控制进度条右侧文本的显示单位，随图表类型差异化配置：基础进度图：默认单位为“%”，可根据实际场景调整（如“kWh”、“件”）。堆叠进度图：默认无单位，可根据分类数据类型手动配置（如“吨”、“小时”）。	是
图表容器宽度	设置进度图容器的宽度。	是
图表容器高度	设置进度图容器的高度。	是
显示加载状态	控制是否启用加载状态。	是
暂无数据	控制无数据时是否显示占位提示。	是

表1 图表数据配置
属性名称	类型	说明
name	string	横向进度条/堆叠进度条系列的名称。
value （进度图时传入）	number	基础进度图中横向进度条长度对应的核心数值，结合标定值计算进度占比。
children （堆叠进度图时传入）	Array<{ type: string; value: number; }>	当图表类型为堆叠进度图时： name：为当前系列的名称。 children：为该系列的具体数据数组。每个子项包含以下字段： type：具体数据的分类名称。 value：具体数据的值，表示该分类在堆叠进度图中的占比或长度。

数据示例：

// 基础进度图（设备检修完成率）
[
    { 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”属性，用于注册模板引用以访问组件实例方法。如果为“数据源表单”组件，会自动填充默认值。	是

属性名称

说明

是否支持变量绑定

元素id值

对应HTML标签的“id”属性，同一页面内必须唯一。

是

样式类

对应HTML标签的“class”属性，为空格分隔的类名列表，用于自定义组件样式。默认为“component-base-style”。

是

ref引用类

对应Vue的“ref”属性，用于注册模板引用以访问组件实例方法。

如果为“数据源表单”组件，会自动填充默认值。