设置UI引擎前端页面折线图组件属性

折线图组件是趋势类数据可视化组件，通过连续的折线直观展示数据随时间、工序、设备编号等维度的变化趋势，广泛适配设备运行参数趋势监控（如温度、转速、压力时序变化）、生产产量波动分析、能耗趋势统计、工艺指标变化追踪等需求。该组件支持自定义折线样式、数据点、坐标轴等属性，可结合数据源实现动态渲染，助力用户快速识别数据趋势异常、预判生产风险。

前提条件

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

配置入口

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

基础属性

属性名称	说明	支持状态变量绑定
图表数据	配置折线图需展示的核心数据，支持绑定数据源（如设备时序运行数据、生产产量统计数据），数据格式需包含X轴维度字段（如时间、设备编号）和Y轴数值字段（如温度、产量），确保折线图正常渲染。	是
颜色	配置折线图线条的颜色，值为颜色字符串组成的数组（如“['#00ff00', '#ff0000', '#0000ff']”）。当图表中有多条折线（如多设备同指标对比）时，会从数组中循环取值。可按数据类型（正常/异常）配置差异化颜色，提升趋势辨识度。	是
图表内边距值	设置图表组件内边距，值为数值数组，顺序对应“[上，右，下，左]”，单位为像素（如“[10, 20, 10, 20]”）。可根据页面布局调整，避免图表内容与容器边缘、其他组件（如仪表盘、按钮）重叠。	是
数据点样式	设置数据点的样式。鼠标移动到X轴坐标点时，显示Y轴线与图表折线相交点作为数据点。可配置属性包括：symbolSize（数据点大小，数值类型）。如16，单位px。	是
图例配置	用于标识图表中不同折线对应的数据源（如不同设备、不同工艺指标），配置规则与条形图的图例配置完全一致，详情请参见图例配置。	是
配置x轴	自定义X轴参数（如维度字段、标签样式、轴线设置等），配置规则与条形图的X轴配置基本一致，详情请参见X轴配置。	是
配置y轴	自定义Y轴参数（如数值范围、单位、刻度间隔等），配置规则与条形图的Y轴配置基本一致，详情请参见Y轴配置。	是
平滑曲线	设置图表中数据线是否为平滑的曲线。	是
图表容器宽度	仪表盘容器的宽度。	是
图表容器高度	仪表盘容器的高度。	是
显示加载状态	是否启用加载状态提示，用于在数据加载过程中提供视觉反馈。	是
暂无数据	控制无数据时是否显示占位提示。	是

其他

如下属性适用于UI引擎所有组件，用于精细化控制。

属性名称	说明	是否支持变量绑定
元素id值	对应HTML标签的“id”属性，同一页面内必须唯一。	是
样式类	对应HTML标签的“class”属性，为空格分隔的类名列表，用于自定义组件样式。默认为“component-base-style”。	是
ref引用类	对应Vue的“ref”属性，用于注册模板引用以访问组件实例方法。如果为“数据源表单”组件，会自动填充默认值。	是

属性名称

说明

是否支持变量绑定

元素id值

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

是

样式类

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

是

ref引用类

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

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