数据可视化大屏合集

DASHBOARDS · 监控 / 经营 / 分析 / 绩效 / 报表

5 块屏 · 独立可开 零构建 · 无后端
--:--:--

从实时监控到经营报表,五块屏各管一件事

每块屏是一个完整独立的 HTML,双击即开,不依赖构建工具、不依赖后端服务。全部页面共用一套设计令牌与运行时,数据为演示用的模拟数据,接真实接口时只改每页顶部标注的数据源区块。

统一令牌 · assets/theme.css 深色 2 块 / 浅色 3 块 单屏铺满 · 不滚动 1280 × 720 → 2560 × 1440 自适应
01 深色 · 青

实时运行监控大屏

盯住"此刻正在发生什么":请求吞吐、流量趋势、资源水位、服务健康、慢接口与告警流,每 2 秒推一拍。

实时刷新告警流雷达 / 环形
LIVE OPS打开 →
02 深色 · 琥珀

经营指标 KPI 看板

挂在墙上的经营驾驶舱:GMV、订单、客单价、转化与目标达成,一屏回答"这个周期做得怎么样"。

周期筛选目标达成漏斗 / 榜单
KPI BOARD打开 →
03 浅色 · 蓝

BI 多维分析看板

分析师的观测台:维度与度量自由组合即时重算,堆叠趋势、路径桑基、价格带气泡与活跃热力互相印证。

三维联动桑基 / 气泡热力格
BI EXPLORER打开 →
04 浅色 · 青绿

团队绩效看板

一张有"人"的成绩单:达成率、能力雷达、部门对比与个人榜,适合季度复盘会和述职场景。

部门 / 季度能力雷达排行榜
PERFORMANCE打开 →
05 浅色 · 石板灰

经营数据报表

能打印、能导出的报表台:筛选口径、汇总读数、可排序明细与迷你趋势列,数字全部等宽对齐。

可排序迷你趋势列打印 / 导出
REPORTS打开 →
∞ HOW TO USE

怎么用 / 怎么接数据

所有页面共用 assets/theme.css(设计令牌)与 assets/core.js(运行时)。换主题改 data-theme / data-accent 两个属性;接真实数据只需替换每页顶部标注的「数据源」区块。

零构建双主题令牌单图失败隔离
README.md见文件夹