【Html模板】搭建员工出勤大屏看板(可线上预览)

前言目标与要求项目结构视觉设计关键点自适应缩放（1920×1080）图表与数据上班率/延迟率分析（折线）部门出勤分布（横向条形）下班趋势（折线）岗位维度（分组柱状）与周活跃（柱状）底部三图：作业流量、区域分析、下班趋势（底）
交互与动态性能与优化建议部署与预览接入真实数据的思路结语

专栏导读

🌸 欢迎来到Python办公自动化专栏—Python处理办公问题，解放您的双手

🏳️‍🌈 个人博客主页：请点击——> 个人的博客主页求收藏

🏳️‍🌈 Github主页：请点击——> Github主页求Star⭐

🏳️‍🌈 知乎主页：请点击——> 知乎主页求关注

🏳️‍🌈 CSDN博客主页：请点击——> CSDN的博客主页求关注

👍 该系列文章专栏：请点击——>Python办公自动化专栏求订阅

🕷 此外还有爬虫专栏：请点击——>Python爬虫基础专栏求订阅

📕 此外还有python基础专栏：请点击——>Python基础学习专栏求订阅

文章作者技术和水平有限，如果文中出现错误，希望大家能指正🙏

❤️ 欢迎各位佬关注！ ❤️

前言

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

目标与要求

视觉风格：深蓝霓虹、面板发光、条形/折线组合图，接近截图效果。布局结构：左右侧栏 + 中央多图，顶部 KPI 指标，底部三图。分辨率适配：以 1920×1080 为设计稿，通过缩放适配任意屏幕。数据表现：模拟实时刷新，图表和表格定时更新，便于接入真实数据。易用与复用：纯静态模板，任意静态服务器或 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() 按窗口比例缩放，保证不同分辨率下均保持布局比例与视觉统一：


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/ 即可查看完整页面。

结尾

希望对初学者有帮助；致力于办公自动化的小小程序员一枚

希望能得到大家的【❤️一个免费关注❤️】感谢！

求个 🤞 关注 🤞 +❤️ 喜欢 ❤️ +👍 收藏 👍

此外还有办公自动化专栏，欢迎大家订阅：Python办公自动化专栏

此外还有爬虫专栏，欢迎大家订阅：Python爬虫基础专栏

此外还有Python基础专栏，欢迎大家订阅：Python基础学习专栏

文章版权归作者所有，未经允许请勿转载。如内容涉嫌侵权，请在本页底部进入<联系我们>进行举报投诉!

THE END