实时趋势¶

实时趋势图是一种用于显示数据随时间实时变化的图表。X轴是时间轴，Y轴是数据轴。

alt text

属性

名称	描述
名字	此控件的名称。
X	控件左侧距画布左侧的距离，单位px。
Y	控件顶部距画布顶部的距离，单位px。
W	控件的宽度，单位px。
H	控件的高度，单位px。
数据	设置实时趋势图的数据来源及样式。点击该按钮可以设置曲线的数据源和样式。 - 变量：设置线条的数据来源。点击变量栏最右侧的如下符号，可以将变量的路径直接复制到名称栏。 - 名称：设置线条名称。 - Y轴：选择一个Y轴，作为当前变量的Y轴。 - 线条颜色：设置线条的颜色。 - 线条类型：设置线条的类型。 - 线条样式：设置线条的样式。 - 线宽：设置线条的粗细。 - 区域填充：设置线条和轴之间的区域背景色。 - 报警线：设置是否将变量的报警值作为一条直线显示在当前控件上。点击报警线的设置按钮，选择需要显示的报警线，并为其设置样式。勾选报警线的checkbox，用于在控件上启用报警线的显示。 - 标记样式：设置线条连接点的样式。 - 标记大小：设置线条连接点的大小，单位px。 - 小数位：鼠标移到线条上所显示的数值的小数位数。
刷新频率	按此频率对控件上的数据进行刷新。
显示	选择变量按钮：控制选择变量按钮的显示、隐藏。显示的情况下，在运行页面可以通过此按钮重新设置变量及其对应曲线的显示样式。
按钮样式	选择变量按钮：设置选择变量按钮的颜色。
颜色	设置控件的颜色效果。 - 背景：控件的整体背景色。 - 栅格：栅格的线条颜色。 - X轴：X轴的轴线颜色。
边距	设置实时趋势图与其选中框之间的间距。确保图表能清晰显示，并为图表元素（如时间或图例）预留足够的空间。
X轴	设置X轴的样式。 - 显示栅格：控制栅格的显示、隐藏。 - 时间格式：设置X轴显示的时间的格式,可以选择系统预置的时间格式，也可以手动输入，设置的时间格式须符合Echarts的时间格式要求，详见： https://echarts.apache.org/zh/option.html#xAxis.axisLabel.formatter (4.2.1及其以上版本，支持此功能) - 时间范围：X 轴显示的时间范围。 - 字体：设置X轴显示的文字的字体、字体大小、粗体、斜体、字体颜色。
Y轴	设置Y轴的样式。 - 显示栅格：控制栅格的显示、隐藏。 - 启用子图：控制主图表中是否允许嵌入另一个图表。 - 分度数：设置在Y轴上插入的分割线数量。 - 轴：显示轴的行列数。点击该按钮可以设置轴的样式。 - 名称：Y轴的名称。 - 自动显示范围：Y轴的量程根据值的范围动态变化。如果选中，则将自动确定Y轴的值范围。如果未选中，则将使用最小值和最大值。选择自动后，最小值和最大值变为失效状态。 - 最小值：Y轴的最小值。 - 最大值：Y轴的最大值。 - 小数位：设置Y轴的刻度值上显示的小数位数。 - 显示：控制Y轴的显示、隐藏。 - 位置：设置Y轴的显示位置。 - 偏移：设置Y轴相对于默认位置的偏移。 - 轴颜色：设置Y轴的颜色。 - 字体：设置Y轴坐标的字体。 - 字体大小：设置Y轴坐标的字体大小。 - 字体颜色：设置Y轴坐标的字体颜色。 - 字体粗细：设置Y轴坐标的字体粗细。 - 字体倾斜：设置Y轴坐标的字体倾斜。 - 子图权重：设置子图在主图表中所占的空间大小。 - 子图背景：设置子图的背景色。
图例	设置图例的样式。 - 显示：控制图例的显示、隐藏。默认显示。 - 位置：设置图例的显示位置。 - 字体：设置图例的字体、字体大小、粗体、斜体、字体颜色。
右键菜单	在控件上设置右键菜单，可以设置菜单的背景色、边框色、字体型号、字体大小、字体颜色、加粗、倾斜。可以为右键菜单配置对应的动作，包括：导航，变量赋值，属性赋值和执行脚本。在运行许页面，在控件上单击鼠标右键，显示右键菜单。(4.2.2及其以上版本，支持此功能)

说明：实时趋势控件基于Echarts 5.x版本开发，该版本上分度数存在缺陷，不按设置的数值生效，导致实时趋势图也存在此问题。请等待Echarts修复该缺陷。

动作

允许您基于某种条件执行特定的动作。请参阅“动作”页上各种动作的完整描述。

示例1

使用实时趋势来显示水温。

在画面上插入一个实时趋势图。
设置实时趋势图的属性。

属性	值
X轴	关闭栅格的显示。
Y轴	关闭栅格的显示。
数据	绑定变量，设置曲线的样式。 - 变量：@工厂:水温 - 名称：水温 - Y轴：水温 - 线条颜色：#6ec800 - 线条类型：折线 - 线条样式：实线 - 线宽：1 - 区域填充：未启用 - 报警线：未启用 - 标记样式：无 - 标记大小：6 - 小数位：2

点击预览按钮进行预览。

示例2

使用实时趋势来显示水温，并显示水温报警线。

在画面上插入一个实时趋势图。

设置实时趋势图的属性。

属性	值
X轴	关闭栅格的显示。
Y轴	关闭栅格的显示。
数据	绑定变量，设置曲线的样式。 - 变量：`@Demo:temperature` - 名称：水温 - Y轴：水温 - 线条颜色：#6ec800 - 线条类型：折线 - 线条样式：实线 - 线宽：1 - 区域填充：未开启 - 报警线：开启。选择高温报警，将线条颜色设置为红色，样式设置为虚线。 - 标记样式：无 - 标记大小：6 - 小数位：2

点击预览按钮进行预览，红色的虚线为水温的报警线。通过报警线可以只管的判断出，在哪些时刻变量产生了报警。

示例3

使用实时趋势来显示水温，并可以在运行时随时添加水温参考线。

在画面上插入一个实时趋势图，并绑定变量: Demo:temperature

配置一个添加参考线的弹窗：AddMarkLine，用于在运行页面在趋势图上添加参考线

alt text

点击“确定”按钮，在动作属性中设置按下动作脚本

const value = await System.Page.getPropertyValue('Value输入框1#value')
const lineName = await System.Page.getPropertyValue('Name输入框1#text')
const lineColor = await System.Page.getPropertyValue('Color输入框1#text')
const lineStyle = await System.Page.getPropertyValue('Style下拉框1#selectedText')
const lineWidth = await System.Page.getPropertyValue('Width输入框1#value')
const model = {
    value: value,
    name: lineName,
    lineColor: lineColor,
    lineStyle: lineStyle,
    lineWidth: lineWidth
};
System.UI.close(model)

点击“取消”按钮，在动作属性中设置按下动作脚本

System.UI.close()

配置一个删除参考线的弹窗：DeleteMarkLine，用于在运行页面根据参考线的名称，在趋势图上删除参考线

点击“确定”按钮，在动作属性中设置按下动作脚本
```
const value = await System.Page.getPropertyValue('文本输入框1#text')
System.UI.close(value)
```
点击“取消”按钮，在动作属性中设置按下动作脚本
```
System.UI.close()
```

在实时趋势图上配置右键菜单

alt text

AddMarkLine: 用于添加参考线

RemoveMarkLine: 按照参考线名称，删除参考线

RemoveAllMarkLine：删除所有已添加的参考线。如果不指定名称，则删除所有参考线。

在右键菜单中，点击AddMarkLine的动作按钮，在弹出的窗口中编写如下脚本：

const popup = await System.UI.openPopup('AddMarkLine')
console.log(popup)
if(!popup){
    return;
}
const chart = await System.UI.findControl('RealTimeChart1')
chart.addMarkLine(popup);

点击DeleteMarkLine的动作按钮，在弹出的窗口中编写如下脚本：

const popup = await System.UI.openPopup('RemoveLine')
console.log(popup)
if(!popup){
    return;
}
const chart = await System.UI.findControl('RealTimeChart1')
chart.removeMarkLine(popup);

点击DeleteAllMarkLine的动作按钮，在弹出的窗口中编写如下脚本：

const chart = await System.UI.findControl('RealTimeChart1')
chart.removeMarkLine()

在运行页面上，在趋势图上右击鼠标，点击AddMarkLine，弹出AddMarkLine弹窗，设置参考参考线样式后点击确定按钮，完成添加。
在运行页面上，在趋势图上右击鼠标，点击DeleteMarkLine，输入要删除的参考线的名称，删除该参考线。
在运行页面上，在趋势图上右击鼠标，点击DeleteAllMarkLine，删除所有添加的参考线。