趋势弹窗

功能概述

趋势曲线弹窗用于实时或历史数据的趋势可视化分析，支持多数据测点的数值变化趋势对比，帮助用户直观掌握数据随时间的波动规律。

界面元素说明

1. 顶部控制区

• 模式切换（实时 / 历史）：
  • 「实时」模式：展示数据的即时变化，界面含暂停（||）、刷新（↻）、数据选择等控件；
  • 「历史」模式：需指定时间范围和开始时间，用于回溯历史数据趋势。
• 时间范围设置：可选择 “天、时、分” 维度定义数据展示的时间跨度（如示例中 “0 天 1 时 0 分”）。
• 数据序列控制：
  • 图例：点击可单独隐藏 / 显示对应数据曲线；
  • 「全选」/「反选」：快速批量控制所有数据序列的显示状态。
• 功能按钮区：含窗口最大化、图表缩放、添加参考线、数据导出等操作按钮。

2. 趋势图表区

• 横轴为时间轴，标注关键时间节点（如 08:20、09:00 等）；
• 纵轴为数值轴，反映数据的取值范围（如示例中 0-10）；
• 数据曲线：不同颜色代表不同数据序列（如 B 为蓝色、C 为绿色、A 为深蓝色）；
• tooltip（悬浮提示）：鼠标 hover 曲线时，显示具体时间点的数值明细。

3. 数据表格区

数据表格区用于管理趋势弹窗中的每个测点对应的数据序列。

列名	说明
网格名称	数据序列的分组标识，测点会被划分到不同名称的网络中
名称	数据序列的名称
时间	实时数据的时间戳
实时值	实时数据的当前取值
最大值	该数据序列的最大值
最小值	该数据序列的最小值
平均值	该数据序列的平均值
单位	该数据序列的显示单位，可用于区分 Y 轴，同单位的测点会共用相同的 Y 轴
线宽	曲线线条的粗细，默认 2px
颜色	数据曲线的显示颜色
小数位数	数值的小数精度设置
操作	支持对数据序列的额外操作（如编辑）

操作流程

1. 实时模式操作

1. 选择「实时」模式；
2. 设置时间范围（如 “0 天 1 时 0 分” 表示展示最近 1 小时数据）；
3. 按需点击图例隐藏 / 显示数据曲线，或使用「全选」/「反选」批量控制；
4. 点击「暂停」可冻结曲线刷新，「刷新」可手动更新实时数据；
5. 悬浮鼠标查看 tooltip 明细，或在数据网格区查看实时数值、最大值等信息。

2. 历史模式操作

1. 选择「历史」模式；
2. 设置时间范围和开始时间（如 2025-11-03 08:19:12）；
3. 同 “实时模式” 步骤 3-5，查看历史数据的趋势和明细。

3. 通用操作

• 图表交互：可拖拽时间轴下方的滚动条，缩放时间范围；

• 数据导出：点击顶部 “导出” 按钮，可将趋势图或数据网格导出为文件（如图片、Excel）；

• 数值精度调整：在数据网格区修改 “小数位数”，可调整数值的显示精度；

• 颜色自定义：点击 “颜色” 列的色块，可修改数据曲线的显示颜色。

• 参考线：点击图表工具栏中的“添加参考线”按钮，在图表中再次点击可在相应位置上添加参考线（缩放、数据更新后，参考线自动清除）。

触发趋势弹窗

1. 脚本方式触发趋势弹窗

组态画面对象中封装了弹出趋势窗口的方法，操作示例如下：

var option = {
  name: '', // 显示的数据序列名称
  deviceID: '',  // 设备标识
  pointID: '',   // 测点标识
  grid: '' // 网格名称，不同的测点使用相同的 grid 会被划分到同一个网格，默认划分在第 1 个网格
}
// 弹出趋势窗口并追加测点
gv.showTrends(option)
// 只弹出趋势窗口不追加测点
gv.showTrends()
// 弹出趋势窗口并清空之前的测点
gv.showTrends(option, true)

2. “值显示”组件触发趋势弹窗

值显示组件，绑定数值类型测点后，在运行状态下，双击该组件，可触发趋势弹窗，并将该测点显示到趋势弹窗中。

在编辑状态下，用户可以定义该测点在趋势弹窗中的网络名称和曲线名称（数据系列名称）。

常见问题

Q：实时模式下数据不刷新？

A：检查「暂停」按钮是否处于激活状态，点击可恢复自动刷新。

Q：历史模式下无数据展示？

A：确认开始时间和时间范围的合理性，确保该时间段内有数据记录。

Q：如何隐藏某条数据曲线？

A：点击图表上方图例中对应的数据名称，即可切换显示 / 隐藏状态。

通过以上操作和说明，可高效利用趋势曲线弹窗完成数据的实时监控与历史追溯，助力业务场景中的数据趋势分析决策。