KingFusion 驾驶舱开发：ECharts小时模板实现动态时间窗口

驾驶舱演示数据怎么做到"无论何时打开，图表都像真实数据"？

上一篇文章分享了驾驶舱能源模块的颜色规范，这篇来聊聊技术实现中最有意思的一个点------动态时间窗口。

一、场景：演示数据，但不能是一成不变的

MES项目开发过程中，驾驶舱图表的数据来源通常有两种：

真实数据 ------ 来自PLC采集、数据库报工记录，直接展示即可
演示数据 ------ 项目未上线或甲方演示阶段，需要造数据展示效果

造数据不难，难的是造出"看起来像真的"数据。

如果直接写死一组数据，比如：

bash 复制代码

data: [28, 41, 47, 35, 36, 25, 21, 9, 15, 25]

这个图表任何时候打开，数据都一模一样。甲方上午10点来看是这组数，下午3点来看还是这组数，时间标签永远是固定的日期------一眼就能看出是假数据。

那能不能做到：不管什么时候打开，图表都显示最近24小时的数据，且数值符合该时间段的特征？

二、核心思路：小时模板 + 时间偏移

思路其实很简单，分两步：

第一步：建立24小时模板

给每个指标定义一个24元素数组，下标0=0点，下标1=1点，以此类推，每个元素表示该小时的数据值。

以用水量为例，工厂用水有明显的昼夜规律：

javascript 复制代码

var waterTemplate = [
    6,  5,  5,  6,  8,  10,  // 0~5点：夜间少量基础用水
    12, 15, 40, 50, 55, 52,  // 6~11点：上午生产高峰
    35, 48, 58, 65, 60, 50,  // 12~17点：下午持续高峰
    35, 25, 18, 14, 10, 8    // 18~23点：傍晚回落
];

用电量也类似，白天机器全开、夜间待机：

javascript 复制代码

var powerTemplate = [
    30, 28, 30, 35, 38, 42,  // 0~5点：夜间待机，低负荷
    50, 55, 75, 90, 95, 98,  // 6~11点：上午生产爬坡
    100, 102, 100, 95, 92, 88, // 12~17点：持续满负荷
    85, 80, 70, 60, 45, 35   // 18~23点：逐步下班
];

光伏发电则更特殊------白天有阳光才发电，夜间不发电：

javascript 复制代码

var pvTemplate = [
    0,  0,  0,  0,  0,  0,  // 0~5点：夜间，不发电
    8,  20, 32, 42, 48, 50,  // 6~11点：上午逐渐上升
    50, 46, 40, 30, 20, 10,  // 12~17点：下午逐渐下降
    3,  0,  0,  0,  0,  0    // 18~23点：日落，归零
];

第二步：按当前时间偏移

有了模板，接下来就是按当前时间动态截取最近24小时：

javascript 复制代码

// 对齐当前整点
var now = new Date();
now.setMinutes(0, 0, 0);
 
var hours = [];  // x轴标签
var data  = [];  // 数据序列
 
// 从23小时前倒推到当前小时
for (var i = 23; i >= 0; i--) {
    var t = new Date(now.getTime() - i * 3600 * 1000);
    var h = t.getHours();
    hours.push(String(h).padStart(2, '0') + ':00');
    data.push(template[h]);  // 该点是几点，取几点的模板值
}

关键就在template $h$ 这一行------数据值只取决于"这是几点钟"，与具体是哪一天无关。所以：

凌晨3点打开 → 显示昨天 4:00 到今天 3:00 的数据，标签是 04:00, 05:00, ... 02:00, 03:00
下午2点打开 → 显示昨天 15:00 到今天 14:00 的数据，标签是 15:00, 16:00, ... 13:00, 14:00
同一时刻打开 → 数据完全一致（演示数据可复现，甲方截图对比不会跳变）

三、光伏发电的昼夜规律演示

这个方案最妙的地方在于光伏发电的演示效果。

如果你在白天打开弹窗，光伏曲线是一条漂亮的钟形曲线（正午达到峰值50），旁边用电量曲线也是高峰，两条线一红一绿，视觉上非常直观：

javascript 复制代码

用电量_▁▂▄▇██▇▆▅▄▃▂▁   ← 白天峰值100，夜间30
光伏发电▁▁▁▁▂▄▇██▇▆▄▂▁▁▁▁▁▁▁   ← 白天钟形，夜间0

如果你在晚上打开弹窗，光伏发电曲线全天都是0，只有用电量曲线在夜间低位运行------完全符合实际情况。

甲方看到这个效果，会认为"这个系统数据是真实的"，不需要你解释"这是演示数据"。

四、这个模式还能用在哪些地方

小时模板+时间偏移的模式不只适用于能源模块，驾驶舱中其他需要展示趋势的模块都可以复用：

模块	指标	模板特点
设备信息	设备运行时长	全天24小时，白班比夜班利用率高
质量管理	每小时检验批次	白班检验多，夜班少
产线监控	每小时产量	取决于排班，可定义白班/夜班模板
压缩空气	用气量	与用电量规律相似，设备开则用气
蒸汽用量	用汽量	冬季可能比夏季高

扩展建议：如果项目已上线，模板数据可以替换为真实历史数据的平均值，这样既保留了"随当前时间动态变化"的效果，又有了真实数据的量级和波动特征。

五、总结

小时模板+时间偏移这个方案，最大的优点是简单、可复用、效果好：

✅ 代码量少 ------ 几十行JS搞定，不需要后端接口
✅ 动态真实 ------ 打开时间不同，数据窗口自动前移
✅ 规律正确 ------ 光伏白天发电夜间归零，电能白天高峰夜间低谷
✅ 可渐进替换 ------ 上线后可以直接把模板数据换成真实数据，前端代码几乎不用改

如果你也在做KingFusion驾驶舱开发，这个模式可以直接拿来用。（本文代码为泛化展示，实际项目中需根据具体能源类型调整模板数值。）

下一篇预告：将分享驾驶舱弹窗图表的模块化复用设计------如何写一个通用的创建时代码，复制粘贴就能生成新的弹窗页面。