# 设置UI引擎前端页面折线图组件属性
折线图组件是趋势类数据可视化组件，通过连续的折线直观展示数据随时间、工序、设备编号等维度的变化趋势，广泛适配设备运行参数趋势监控（如温度、转速、压力时序变化）、生产产量波动分析、能耗趋势统计、工艺指标变化追踪等需求。该组件支持自定义折线样式、数据点、坐标轴等属性，可结合数据源实现动态渲染，助力用户快速识别数据趋势异常、预判生产风险。
#### 前提条件
已在当前页面添加"折线图"组件，具体操作请参见[为UI引擎前端页面添加物料组件](https://support.huaweicloud.com/usermanual-idme/idme_ui_0016.html)。
#### 配置入口
1. 在页面设计器的中心画布区，单击选中"折线图"组件。
2. 在右侧设置面板中，单击![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002535447111.png)，即可展开"属性"设置面板。
 
#### 基础属性
| 属性名称   | 说明                                                                                                                                                                                   | 支持状态变量绑定 |
|:---|:---|:---|
| 图表数据   | 配置折线图需展示的核心数据，支持绑定数据源（如设备时序运行数据、生产产量统计数据），数据格式需包含X轴维度字段（如时间、设备编号）和Y轴数值字段（如温度、产量），确保折线图正常渲染。                                                                                          | 是        |
| 颜色     | 配置折线图线条的颜色，值为颜色字符串组成的数组（如"\['#00ff00', '#ff0000', '#0000ff'\]"）。 当图表中有多条折线（如多设备同指标对比）时，会从数组中循环取值。可按数据类型（正常/异常）配置差异化颜色，提升趋势辨识度。         | 是        |
| 图表内边距值 | 设置图表组件内边距，值为数值数组，顺序对应"\[上，右，下，左\]"，单位为像素（如"\[10, 20, 10, 20\]"）。可根据页面布局调整，避免图表内容与容器边缘、其他组件（如仪表盘、按钮）重叠。                                                                               | 是        |
| 数据点样式  | 设置数据点的样式。 鼠标移动到X轴坐标点时，显示Y轴线与图表折线相交点作为数据点。 可配置属性包括：symbolSize（数据点大小，数值类型）。如16，单位px。     | 是        |
| 图例配置   | 用于标识图表中不同折线对应的数据源（如不同设备、不同工艺指标），配置规则与条形图的图例配置完全一致，详情请参见[图例配置](https://support.huaweicloud.com/usermanual-idme/idme_ui_0064.html#ZH-CN_TOPIC_0000002526250737__section2012942452515)。 | 是        |
| 配置x轴   | 自定义X轴参数（如维度字段、标签样式、轴线设置等），配置规则与条形图的X轴配置基本一致，详情请参见[X轴配置](https://support.huaweicloud.com/usermanual-idme/idme_ui_0064.html#ZH-CN_TOPIC_0000002526250737__section1048143312254)。       | 是        |
| 配置y轴   | 自定义Y轴参数（如数值范围、单位、刻度间隔等），配置规则与条形图的Y轴配置基本一致，详情请参见[Y轴配置](https://support.huaweicloud.com/usermanual-idme/idme_ui_0064.html#ZH-CN_TOPIC_0000002526250737__section14696148142515)。        | 是        |
| 平滑曲线   | 设置图表中数据线是否为平滑的曲线。                                                                                                                                                                    | 是        |
| 图表容器宽度 | 仪表盘容器的宽度。                                                                                                                                                                            | 是        |
| 图表容器高度 | 仪表盘容器的高度。                                                                                                                                                                            | 是        |
| 显示加载状态 | 是否启用加载状态提示，用于在数据加载过程中提供视觉反馈。                                                                                                                                                         | 是        |
| 暂无数据   | 控制无数据时是否显示占位提示。                                                                                                                                                                      | 是        |
   
#### 其他
如下属性适用于UI引擎所有组件，用于精细化控制。
| 属性名称   | 说明                                                                                                                                 | 是否支持变量绑定 |
|:---|:---|:---|
| 元素id值  | 对应HTML标签的"id"属性，同一页面内必须唯一。                                                                                                         | 是        |
| 样式类    | 对应HTML标签的"class"属性，为空格分隔的类名列表，用于自定义组件样式。默认为"component-base-style"。                                                                 | 是        |
| ref引用类 | 对应Vue的"ref"属性，用于注册模板引用以访问组件实例方法。 如果为"数据源表单"组件，会自动填充默认值。 | 是        |