数据大屏模板 | ECharts 执法监控可视化大屏，单文件开箱即用

基于 ECharts + dayjs 打造的执法监控数据大屏模板。单 HTML 文件承载整屏，开箱即用。

一块指挥中心大屏，最贵的是”从图表到叙事”的排版设计。这套模板以省公安厅食药环执法监控为示例场景，把执法力量、设备、车辆、检测等核心指标与图表编排成一整屏指挥视图，单文件零构建，改数据源即可变成任何监控指挥场景的大屏。

模板亮点

1. 执法监控场景全指标覆盖

顶部状态栏集成日期时间与核心统计：总人数、在线人数、设备数、车辆数、检测数等，一屏尽览执法力量与监测动态，指标卡结构可直接复用。

2. ECharts 图表矩阵

基于 ECharts 的多图表组合布局（趋势、占比、排名等常见图表位），配色统一为深色大屏风格，替换数据即成新屏。

3. 单文件极轻量

整站仅 1 个 HTML 文件，投屏即用：指挥中心大屏、值班室显示器、汇报演示，拷贝一个文件即可运行。

4. dayjs 时间驱动

内置 dayjs 实时时钟，大屏时间自动更新，无需人工干预。

技术栈

技术	用途
HTML5 / CSS3	页面结构与样式
ECharts	全部图表渲染
dayjs	实时日期时间

项目结构

large-screen/
├── index.html        # 大屏整页（顶部状态栏 + 图表矩阵）
├── css/              # 深色大屏样式
├── js/               # ECharts / dayjs
└── img/              # 背景与装饰素材

快速开始

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

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

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

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

二次开发指南

需求	操作
更换业务场景	替换顶部标题与各图表标题文案
接入真实数据	修改 index.html 内 ECharts 的 option 数据源
更换图表类型	替换 ECharts option 即可（柱图/饼图/地图通用）
调整配色	CSS 变量集中管理，一处修改全屏生效
增删指标卡	顶部统计区块按需复制或删除

适用场景

公安 / 食药环执法监控、应急指挥中心、政务数据大屏、园区监测大屏、企业运营看板、汇报演示屏，也可作为任何单屏数据可视化场景的起点。

从零自研 vs 使用本模板

维度	从零自研	使用本模板
交付周期	1~2 周起	半天改数据上线
版面编排	需反复打磨	指挥视图布局已成型
图表开发	逐个配置	ECharts 图表位已就位
运维成本	自行承担	单文件拷贝即用

在线预览

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

http://8.166.93.126:8989/large-screen