# 设置UI引擎前端页面进度图组件属性
进度图组件是一种用于数据可视化的工具，以横向进度条的形式直观展示目标任务的完成进度、指标达成率以及数据占比关系。该组件支持基础进度图与堆叠进度图两种样式，广泛适用于生产任务进度追踪、设备检修完成率监控、能耗配额使用进度、物料消耗占比、多工序产能达成率统计等场景。
通过动态配色、自定义文本样式等功能，进度图组件能够结合数据源实现动态渲染，帮助用户快速掌握进度情况及异常状态。
#### 前提条件
已在当前页面添加"进度图"组件，具体操作请参见[为UI引擎前端页面添加物料组件](https://support.huaweicloud.com/usermanual-idme/idme_ui_0016.html)。
#### 配置入口
1. 在页面设计器的中心画布区，单击选中"进度图"组件。
2. 在右侧设置面板中，单击![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002535567137.png)，即可展开"属性"设置面板。
 
#### 基础属性
| 属性名称     | 说明                                                                                                                                                                                                                                                                                                                                                                                                                                              | 支持状态变量绑定 |
|:---|:---|:---|
| 图表数据     | 配置进度图需渲染的核心数据，格式为对象数组。 数据结构随进度图类型不同而变化，具体配置请参见[表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配置项](https://support.huaweicloud.com/usermanual-idme/idme_ui_0064.html#ZH-CN_TOPIC_0000002526250737__section1426657153620)。                                                                                                                                                                                                                                                                       | 是        |
| 右侧文本样式   | 自定义进度条右侧文本（如进度百分比、数值）的样式，配置规则请参见[\*TextStyle配置项](https://support.huaweicloud.com/usermanual-idme/idme_ui_0064.html#ZH-CN_TOPIC_0000002526250737__section1426657153620)。                                                                                                                                                                                                                                                                         | 是        |
| 右侧文本单位   | 控制进度条右侧文本的显示单位，随图表类型差异化配置： - 基础进度图：默认单位为"%"，可根据实际场景调整（如"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"属性，用于注册模板引用以访问组件实例方法。 如果为"数据源表单"组件，会自动填充默认值。 | 是        |