智能电表/水表等硬件可视化常用图表，如何基于Highcharts开发嵌入式图表示例

Highcharts
0 阅读4分钟

智能电表 / 水表 / 物联网硬件可视化，在 Highcharts 里最常见的是这几种图表：

常用图表类型

  1. 折线图 / 面积图

    • 看实时功耗、流量、电压、电流、温度等随时间变化
    • 很适合有历史趋势和实时刷新需求的场景

  2. 柱状图

    • 看按天/小时/设备分组的用量对比
    • 比如各回路、各表计、各区域消耗统计

  3. 仪表盘 Gauge

    • 看当前瞬时值
    • 比如当前负载、瞬时流量、压力、剩余电量

  4. 条形图 / 横向条形图

    • 看设备排名、告警数量、能耗排行

  5. 散点图

    • 看异常点、采样质量、多个指标之间关系

  6. 热力图

    • 看一天 24 小时 / 一周 7 天的用电、用水规律

  7. 饼图 / 环形图

    • 看总量构成，比如不同区域、不同设备类型占比

  8. X-range / 甘特式时间条

    • 看设备在线区间、告警持续时段、阀门开关状态持续时间

基于 Highcharts 的嵌入式图表示例思路

如果你说的“嵌入式”是指 嵌在硬件管理平台、Web 面板、设备详情页里，我们通常建议：

  • 上方放 仪表盘 Gauge 看当前值
  • 中间放 趋势折线图 看最近 24 小时
  • 下方放 柱状图或热力图 看按日统计
  • 数据来自接口，定时刷新
  • 对大量历史点启用 Boost 或做服务端聚合
  • 如果是时间序列，优先用 Highcharts Stock
  • 如果需要多组件联动，考虑 Highcharts Dashboards

一个简单的嵌入式实时看板示例

下面这个示例模拟：

  • 一个仪表盘：显示当前瞬时功率
  • 一个折线图：显示最近 24 小时趋势
Highcharts.setOptions({
  time: {
    useUTC: false
  }
});

const now = Date.now();
const trendData = [];
for (let i = 0; i < 24 * 12; i++) {
  trendData.push([
    now - (24 * 12 - i) * 5 * 60 * 1000,
    40 + Math.sin(i / 6) * 8 + Math.random() * 4
  ]);
}

const gaugeChart = Highcharts.chart('container', {
  chart: {
    type: 'gauge',
    height: 280
  },
  title: {
    text: '当前瞬时功率'
  },
  pane: {
    startAngle: -90,
    endAngle: 90,
    background: [{
      backgroundColor: '#f0f0f0',
      outerRadius: '100%',
      innerRadius: '60%',
      shape: 'arc'
    }]
  },
  yAxis: {
    min: 0,
    max: 100,
    tickInterval: 20,
    plotBands: [{
      from: 0,
      to: 60,
      color: '#55BF3B'
    }, {
      from: 60,
      to: 85,
      color: '#DDDF0D'
    }, {
      from: 85,
      to: 100,
      color: '#DF5353'
    }]
  },
  series: [{
    name: '功率',
    data: [55],
    dataLabels: {
      format: '{y:.0f} kW'
    }
  }]
});

const trendChart = Highcharts.chart('container', {
  chart: {
    type: 'area',
    height: 320
  },
  title: {
    text: '最近 24 小时趋势'
  },
  xAxis: {
    type: 'datetime'
  },
  yAxis: {
    title: {
      text: 'kW'
    }
  },
  tooltip: {
    shared: true
  },
  series: [{
    name: '功率',
    data: trendData,
    color: '#2f7ed8',
    fillOpacity: 0.2
  }]
});

说明：上面两个图各自需要一个容器。由于 Highcharts 每个代码块/预览里默认只有一个 container，如果你要我给你一个真正可直接运行的“单图示例”，我可以拆成单独版本；如果你要一个完整面板，我也可以按 Dashboards 方式写。

在这里插入图片描述

更适合硬件监控的 Highcharts 方案

1）实时数据

  • series.addPoint() 追加最新点
  • 只保留最近 N 个点，避免内存增长
  • 适合秒级、分钟级刷新

2）历史趋势

  • Highcharts Stock
  • 配合 navigator、rangeSelector
  • 非常适合电表、水表这种有长期历史曲线的场景

3）多指标同屏

  • Highcharts Dashboards
  • 一个页面显示：仪表盘 + 趋势 + 告警表 + 排名图
  • 更像传统工业监控/HMI 看板

开发建议

数据结构

尽量统一成时间戳格式：

[
  [timestamp, value]
]

后端返回建议

比如接口返回：

  • 当前值
  • 最近 24 小时序列
  • 今日累计
  • 告警状态
  • 设备在线状态

这样前端可以拆成多个图层展示。

性能建议

  • 数据量大时启用 boost
  • 历史数据做分钟/小时级聚合
  • 实时曲线只显示最近 5 分钟、1 小时或 24 小时窗口

适合你的典型图表组合

如果是智能电表/水表，我们最推荐：

  • Gauge：当前值
  • Stock 折线图：实时/历史趋势
  • 柱状图：日/月用量统计
  • 热力图：时段用量规律
  • 状态指示 + 表格：设备在线、告警、故障码

相关 Highcharts 文档

你可以重点看这些方向：

  • Highcharts Core 图表类型
  • Highcharts Stock 时间序列与导航
  • Highcharts Gauge 仪表盘
  • Highcharts Dashboards 多组件联动
avatar
文章
阅读
粉丝