智慧用电大屏模板 | ECharts 三屏物联网监控，地图下钻开箱即用

基于 ECharts + jQuery 打造的智慧用电监控大屏模板。三块大屏三种主题，地图下钻联动，开箱即用。

物联网监控大屏最费工的不是图表，而是”多屏组织”：总览、处理、监测各有侧重，还要和地图联动。这套模板把智慧用电场景做成三块成体系的大屏——总览屏、处理屏、监测屏，内置区域地图点击下钻，报警列表、设备分布、实时查询等模块全部排好版，改数据源即可迁移到任何物联网监控场景。

模板亮点

1. 三屏三主题，成体系的大屏矩阵

• index.html 总览屏：报警信息流 + 图表分析 + 设备监控点地图分布 + 预警设备列表
• index2.html 处理屏：报警处理结果 + 设备监控点分布 + 预警列表 + 分析图表
• index3.html 监测屏：接入设备统计 + 报警 / 故障详情 + 联网单位信息 + 实时监测数据查询

总览看全局、处理看闭环、监测看细节，三屏组合即是完整的物联监控指挥中心。

2. 区域地图与下钻联动

内置 ECharts 区域地图（示例为天水），地图点位展示设备监控点分布，点击区域可跳转下级页面，”省 → 市 → 点位”的联动骨架已搭好。

3. 监控场景组件齐备

报警信息滚动列表、预警设备排行、联网单位信息、实时监测数据查询表——物联网大屏最常被反复要求的组件全部内置。

4. 深色大屏视觉体系

统一的深色科技风配色与发光装饰元素，三屏视觉一致，直接可交付。

技术栈

技术	用途
HTML5 / CSS3	页面结构与样式
ECharts	图表 + 区域地图
jQuery	DOM 与交互
jquery.reveal	滚动显现动画

项目结构

large-screen2/
├── index.html    # 总览屏（报警信息 / 地图分布 / 预警列表 / 分析图表）
├── index2.html   # 处理屏（报警处理结果 / 设备监控点分布）
├── index3.html   # 监测屏（接入设备统计 / 联网单位 / 实时监测查询）
├── css/          # 深色大屏样式
├── js/           # ECharts / jQuery / 区域地图数据
└── img/          # 背景与装饰素材

快速开始

纯静态模板，无需安装依赖：

# 方式一：直接双击 index.html 即可浏览

# 方式二：使用本地静态服务器（推荐）
npx serve .

浏览器按 F11 全屏后投放至大屏显示器即为成品效果。

二次开发指南

需求	操作
更换业务场景	替换标题与各图表指标文案
更换地区地图	替换 js/ 中的地图 GeoJSON 数据
接入真实数据	修改各页面 ECharts option 与列表数据源
调整下钻联动	修改地图点击事件跳转的页面地址
增删屏	复制任一 index 页面改造，导航按需调整

适用场景

智慧用电 / 电气火灾监控、智慧消防、安防物联网平台、市政设施监测、环保监测大屏、能源管理系统、任何需要”总览 + 处理 + 监测”多屏组织的物联网指挥中心。

从零自研 vs 使用本模板

维度	从零自研	使用本模板
交付周期	3~4 周起	半天改数据上线
多屏体系	需自行规划	三屏三主题矩阵已成型
地图联动	需反复调试	区域地图下钻已内置
监控组件	逐个开发	报警/预警/查询组件齐备
运维成本	自行承担	纯静态文件，拷贝即用

在线预览

纯静态文件，上传至任意静态托管或内网服务器，浏览器打开按 F11 全屏即为大屏效果。

http://8.166.93.126:8989/large-screen2