从零搭建员工出勤大屏看板：设计、实现与优化

这篇文章记录了我如何在一个工作日上午，基于原型截图快速还原一套“员工出勤看板”的大屏页面，并把它做成可复用的静态模板。项目采用原生 HTML/CSS/JS + ECharts，重点放在视觉还原、数据表达与可维护性。

点击可进行线上预览
点击可进行线上预览
点击可进行线上预览

目标与要求

视觉风格：深蓝霓虹、面板发光、条形/折线组合图，接近截图效果。
布局结构：左右侧栏 + 中央多图，顶部 KPI 指标，底部三图。
分辨率适配：以 1920x1080 为设计稿，通过缩放适配任意屏幕。
数据表现：模拟实时刷新，图表和表格定时更新，便于接入真实数据。
易用与复用：纯静态模板，任意静态服务器或 CDN 均可部署。

项目结构

大屏看板模板3-员工出勤看板/
├─ index.html // 页面骨架与区域划分
├─ css/styles.css // 主题、栅格、面板、表格与 KPI 样式
└─ js/app.js // 适配缩放、时间/KPI、表格与 ECharts 初始化

## 视觉设计关键点
- 色彩体系：`#0b1225` 深色背景，蓝/青/紫为强调色；文本以浅蓝（`#cfe7ff`）与提示色（`#89b8ff`）。
- 发光效果：面板与 KPI 使用 `inset box-shadow` 形成内发光，和线性渐变增强层次。
- 栅格布局：`grid-template-columns: 420px 1fr 420px` 实现两侧栏 + 中心主内容。
- KPI 观感：数值使用更粗的 DIN 风格字号，配合轻微跳动增强“实时感”。
- 表格可读性：奇偶行底色、虚线分隔、适度行高，避免密集视觉疲劳。

## 自适应缩放（1920×1080）
以设计尺寸渲染内容，然后通过 `transform: scale()` 按窗口比例缩放，保证不同分辨率下均保持布局比例与视觉统一：
```js
const design = { w: 1920, h: 1080 };
const screenEl = document.getElementById('screen');
function resizeScreen() {
  const scale = Math.min(window.innerWidth / design.w, window.innerHeight / design.h);
  screenEl.style.transform = `scale(${scale})`;
}
resizeScreen();
window.addEventListener('resize', resizeScreen);

图表与数据

项目以 ECharts 5 为核心图表库，抽象了通用 grid 与配色，并使用定时器模拟数据刷新。

上班率/延迟率分析（折线）

两条平滑折线，面积淡填充以体现趋势波动。
统一坐标系风格与分隔线颜色，避免视觉割裂。

部门出勤分布（横向条形）

梯度色填充，横向柱状更直观对比各部门量级。

下班趋势（折线）

近两周每日样本数据，实时刷新以模拟运营波动。

岗位维度（分组柱状）与周活跃（柱状）

分组柱对比不同岗位上/下班数据；周活跃展示周期波峰。

底部三图：作业流量、区域分析、下班趋势（底）

上方趋势图与底部趋势图颜色区分，避免认知干扰。

交互与动态

时间显示：顶部右侧每秒刷新当前时间，提升“在线感”。
KPI 微动：每 5 秒给予 ±小幅随机波动，形成立即反馈的动态氛围。
表格替换：每 15 秒重填表格，便于接入真实接口后平滑过渡。

性能与优化建议

避免过度阴影与模糊：控制 box-shadow 强度，减少合成开销。
折线关闭符号：symbol: 'none' 在大数据点时降低绘制成本。
复用 grid 与 textStyle：减少重复配置，提高可维护性。
数据刷新节流：合理 setInterval 周期，避免与浏览器重绘冲突。
静态资源：使用 CDN 加载 ECharts，保证稳定与就近加速。

部署与预览

本模板为纯静态，可使用任何静态服务器：

# Python
python -m http.server 5500

# Node（如安装了 http-server）
npx http-server -p 5500

部署到 Nginx/CDN 时，将 index.html 作为入口，css 与 js 保持相对路径即可。

接入真实数据的思路

API 设计：统一返回维度（时间、部门、岗位、区域）与指标（量、率、时长）。
数据适配层：在 js/app.js 中新增 fetchData() 与 transform()，将后台数据映射到图表 series。
更新策略：为各图表设置独立刷新周期与错误兜底（重试/降级）。
推送机制：有条件可用 WebSocket 推送关键指标，增强实时性。

结语

通过原生技术栈与适度的抽象，这个大屏看板在一套轻量结构下实现了稳定的视觉还原与数据表达。后续只需接入实际接口即可投入使用。如果你也在做运营/物流/园区类的看板，这套模板能够作为一个快速起步的基础。

预览：启动本地服务器后，访问 http://localhost:5500/ 即可查看完整页面。