设置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”属性，用于注册模板引用以访问组件实例方法。 如果为“数据源表单”组件，会自动填充默认值。 |
是 |
