主题
3.2 图表组件(ECharts)
所有图表组件均基于 ECharts,数据绑定后实时刷新。
3.2.1 仪表盘
用途:以仪表形式显示数值型数据,如温度、压力。
控件属性:
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| 表达式 | 绑定的数据点 | 数据点选择器 | — |
| 最小值 / 最大值 | 量程范围 | 数字 | 0 / 100 |
| 表盘起始角 | 起始角度 | 数字 | 225 |
| 表盘结束角 | 结束角度 | 数字 | -45 |
| 表盘大小 | 半径百分比 | 数字 | 80 |
| 下限颜色 / 中间颜色 / 上限颜色 | 分段配色 | 颜色 | — |
| 下限阀值 / 上限阀值 | 分界比例 | 数字 | 0.2 / 0.8 |
| 分度数 | 刻度数量 | 数字 | 10 |
| 表盘宽度 | 轴线宽度 | 数字 | 20 |
| 单位 | 数值后缀 | 字符串 | — |
3.2.2 曲线(折线图)
用途:多数据点折线趋势对比。
控件属性:
| 属性 | 说明 | 类型 |
|---|---|---|
| 数据源 | 绑定的多个数据点 | 数据点数组 |
| 标题 | 图表标题 | 字符串 |
| 主题颜色 | 配色方案 | 颜色选择 |
支持实时刷新与历史查询两种模式。
3.2.3 柱状图
用途:柱形对比多个数据点数值。属性结构与曲线一致。
3.2.4 饼图
用途:多数据点数值占比。属性结构同上。
3.2.5 旭日图
用途:展示多层级环形占比数据。
| 属性 | 说明 | 类型 |
|---|---|---|
| 数据 | JSON 格式的层级数据 | 字符串 |
| 半径 | 图表半径 | 数字 |
3.2.6 树图
用途:展示层级结构,如组织架构或设备拓扑。属性结构与旭日图一致。
3.2.7 实时趋势
用途:滚动刷新的实时曲线,不需要历史库,数据从打开画面那一刻开始记录。
| 属性 | 说明 | 类型 |
|---|---|---|
| 数据源 | 绑定的多个数据点 | 数据点数组 |
| 缓存数量 | 曲线上最多保留几个点 | 数字 |
| 刷新间隔 | 多少毫秒采一个点 | 数字 |
3.2.8 报警灯
用途:绑定数据点,根据报警状态闪烁/变色指示。
| 属性 | 说明 | 类型 |
|---|---|---|
| 绑定数据 | 状态数据点 | 数据点 |
| 正常颜色 | 值为 0 时颜色 | 颜色 |
| 报警颜色 | 值非 0 时颜色 | 颜色 |
| 闪烁 | 报警时是否闪烁 | 布尔 |