简介面向需要快速搭建数据可视化大屏的前端开发者和运维人员这份基于HTML的大屏模板属于十种风格系列中的一款适配不同业务场景无需复杂配置即可直接运行也方便后续二次修改。资源包共27个文件压缩后约109KB细分包含17个PNG图片、6个JS脚本、2个HTML页面、1个CSS样式表和1个说明文档图片用于背景与图标脚本负责图表联动和动态效果页面与样式搭起大屏骨架。模板内置多种酷炫可视化风格涵盖指标卡、地域分布、趋势统计等常见模块兼容各类分辨率可全屏展示代码独立且注释清晰便于按需求替换数据和调整布局。已有901人学习下载特别适合需要快速交付可视化方案或做扩展开发的读者能有效缩短大屏搭建周期。1. 大屏不是网页这份 HTML 可视化大屏源码为什么能直接上屏会议室门口站着几位业务领导屏幕却还在转圈这种场面做大屏的人都经历过。大屏不是普通网页没有鼠标引导没有滚动条观众站在三米外第一眼就要看到核心指标。这份可视化大屏风格2源码属于一套十种风格的系列资源中的一张牌双击 index.html 就能出效果。它把加载动画、时钟、地图、指标卡、预警图标全部拆成独立 JS 文件互不锁死改数据时可以只动一个模块。它的价值不是某个图表画得多细而是把科技线条、地域分布、趋势箭头和指标卡组成完整的信息层级。适合数据可视化工程师、前端开发以及正被大屏分辨率适配折磨的团队参考。2. 可视化大屏源码的目录结构index.html、loadingScript 与 drawMap 谁先谁后2.1 先读文件结构再决定从哪改起拿到压缩包解压后不建议直接双击 index.html 就满屏找图表配置。先看目录这套源码把页面、脚本、样式和图标做了明确分层根目录放页面style 下只有一个 cssFile.csslib 下是 jQuery 和四个业务脚本icon 下是全部图标素材。文件越少越容易看清楚渲染链路。大屏风格2/ ├── index.html ├── 优质源码合集.html ├── style/ │ └── cssFile.css ├── lib/ │ ├── jquery.min.js │ ├── loadingScript.js │ ├── createTip.js │ ├── createSpeed.js │ ├── getTime.js │ └── drawMap.js └── icon/ ├── 考勤.png ├── 上升趋势.png ├── selectIcon.png ├── xjt.png ├── 高亮图标大.png ├── legend.png ├── 地域完成率.png ├── 欣晨软件服务.png ├── 地域完成数排名.png ├── 下降趋势.png ├── 高亮图标小.png ├── 收起.png ├── 详细指标.png ├── 地域报修数排名.png ├── 展开.png ├── 预警.png └── 总指标.png目录里最有辨识度的几个点icon 文件夹里既有“考勤”“预警”“总指标”这样的业务图标也有“上升趋势”“下降趋势”“展开”“收起”这样的状态图标。前者决定指标卡看起来专不专业后者决定大屏在交互时有没有反馈。各文件职责整理成表格文件/目录职责index.html页面骨架承载所有模块的 DOM 结构优质源码合集.html系列内多风格预览入口方便挑版式style/cssFile.css全部布局、配色、动画、媒体查询lib/jquery.min.jsDOM 操作与事件绑定的基础库lib/loadingScript.js开屏加载动画控制lib/getTime.js大屏头部时间和星期刷新lib/createTip.js指标卡悬浮提示层lib/createSpeed.js数字滚动、趋势动画lib/drawMap.js地图区域绘制与高亮icon/图标切图配合 CSS 形成指标卡视觉2.2 加载顺序决定首屏白屏时间大屏页面和后台管理系统不同它对首屏速度更敏感因为播放大屏的人不会去刷新页面。这套源码里没有打包工具全靠 script 标签顺序维护依赖。常见做法是把 jQuery 放在最前面因为 createTip、createSpeed、drawMap 这些脚本都依赖$loadingScript 要放在内容脚本之前才能保证先出现加载动画再渲染数据。script srclib/jquery.min.js/script script srclib/loadingScript.js/script script srclib/getTime.js/script script srclib/createTip.js/script script srclib/createSpeed.js/script script srclib/drawMap.js/script这段顺序不能随意打乱。如果 getTime 先于 loadingScript 执行时间模块会抢在加载动画结束前更新页面观众会看到时间跳动与动画叠加的错乱。更隐蔽的问题是 drawMap地图模块要等 DOM 容器有实际宽度才能绘制否则 canvas 宽高拿到的是 0地图画不出来或画出来只有一半。这里的参数说明很简单每个脚本的初始化函数都应包裹在$(function () {})里确保 DOM ready 后再操作节点。2.3 drawMap.js 为什么要等容器宽高地图是可视化大屏里最容易翻车的一环。常见做法是地图用 canvas 或者 SVG 绘制而 canvas 的宽高必须在初始化时给定不能像普通 DOM 那样靠 CSS 自动撑开。drawMap.js 等容器宽高其实是很多大屏项目的通用套路用定时器轮询容器尺寸宽度大于 0 才开始绘图。$(function () { var mapBox $(#mapContainer); if (mapBox.length 0) { return; } var timer setInterval(function () { var width mapBox.width(); if (width 0) { clearInterval(timer); drawMap(); // 实际绘制逻辑放在这里 } }, 200); });轮询间隔 200ms最多等多久由业务决定。这个做法的好处是不管 index.html 里的地图容器是固定宽度还是 flex 撑开绘制逻辑一定在布局完成后执行。如果你发现地图出现在屏幕左上角且尺寸不对优先检查的不是 drawMap.js而是 mapBox 外层是否有容器塌陷或者 cssFile.css 里地图容器被设成了display:none又在某个动画结束才显示。3. 指标组件实现getTime、createTip、createSpeed 与图标体系的组合3.1 getTime.js右上角时钟不只是显示时间大屏上的时间通常同时承担两个职责一是给人读二是给运维看数据是否在滚动刷新。如果时间停住观众会怀疑整个页面死掉。getTime.js 的常规实现是每秒更新一次文本并且把星期算出来这样就不用依赖后端返回日期。function pad(n) { return n 10 ? 0 n : n; } function updateTime() { var now new Date(); var dateStr now.getFullYear() - pad(now.getMonth() 1) - pad(now.getDate()); var timeStr pad(now.getHours()) : pad(now.getMinutes()) : pad(now.getSeconds()); $(#currentTime).text(dateStr timeStr); var week [日, 一, 二, 三, 四, 五, 六]; $(#currentWeek).text(星期 week[now.getDay()]); } setInterval(updateTime, 1000); updateTime();这里的pad函数保证月份、日期、时分秒总是两位数字避免出现 9:5:3 这种难看格式。setInterval(updateTime, 1000)之后紧跟一次立即调用而不是等第一秒否则页面加载后的第一秒时间里模块是空的。如果你要在开发环境做假数据演示可以把这个时间干扰项调成 2 秒更新一次但正式上屏建议还是 1 秒观众对大屏时间的预期和手表一致。3.2 createTip.js大量指标卡用事件委托挂悬浮提示大屏上的指标卡可能有几十个如果每个卡片都单独绑定 mouseenter内存里会有大量监听器页面掉帧。createTip.js 更合理的实现是把事件绑定到公共容器上用事件委托识别当前悬浮的卡片再根据卡片上的 data 属性拼出提示内容。$(document).on(mouseenter, .indicator-item, function () { var name $(this).data(name); var value $(this).data(value); var offset $(this).offset(); $(#tooltip) .text(name value) .css({ left: offset.left 12, top: offset.top - 28 }) .fadeIn(150); }).on(mouseleave, .indicator-item, function () { $(#tooltip).fadeOut(150); });事件委托把监听器数量从 N 个降成 1 个新增的指标卡不需要重新绑定事件。offset.left 12这个偏移量是为了避免提示层盖住手指或鼠标top - 28是让提示浮在卡片上方。你在改这套源码时要注意.indicator-item的命名必须和 index.html 里的类名一致如果 cssFile.css 里已经有同名样式就以它为准。3.3 createSpeed.js数字滚动和趋势箭头的节奏控制createSpeed.js 管的是指标数字变化和趋势箭头。大屏上数字突然从 0 跳到 8 万会显得很生硬常见做法是用 requestAnimationFrame 做缓动让数字在 800 到 1500 毫秒之间从 0 滚到目标值同时切换上升趋势或下降趋势的箭头图标。function animateNumber(el, target, duration) { var start 0; var startTime null; function step(timestamp) { if (!startTime) startTime timestamp; var progress Math.min((timestamp - startTime) / duration, 1); var current Math.floor((target - start) * progress start); $(el).text(current.toLocaleString()); if (progress 1) { requestAnimationFrame(step); } else { $(el).closest(.indicator-item).find(.trend).attr( src, target current ? icon/上升趋势.png : icon/下降趋势.png ); } } requestAnimationFrame(step); }duration是滚动的总时长数值越大越丝滑但超过 2 秒观众会等得不耐烦。toLocaleString()负责把 12800 变成 12,800避免大屏上一串数字没有千分位。趋势图标的切换放在动画结束时判断而不是一开始判断是因为有些指标会先降到负数再回正只看最终值会错过中间状态。如果你要改成先降后升的表现就得把判断逻辑挪进 step 函数里。3.4 cssFile.css 与图标切图的对应关系图标文件和样式之间最常见的配合是DOM 里放 img 标签CSS 控制尺寸、间距和 hover 状态或者把多张图标拼成一张雪碧图用 background-position 定位。这套源码的 icon 文件都是独立 PNG说明实现方式大概率是前者好处是替换图标不需要改 CSS直接换文件同名覆盖即可。图标典型挂载位置作用考勤.png考勤指标卡头部说明指标类型预警.png异常指标旁标记超标上升趋势.png / 下降趋势.png指标卡底部趋势方向展开.png / 收起.png折叠面板交互状态高亮图标大.png / 高亮图标小.png地图弹层地图点位的层级区分legend.png地图图例说明颜色映射调整时最容易忽略的是 icon 的尺寸。大屏通常以 1920x1080 为设计基准你在 cssFile.css 中看到.indicator-item img { width: 24px; height: 24px; }这类规则时先改成设计稿里的实际值而不是直接换图标文件。图标源文件本身如果分辨率低于 2 倍屏在 4K 大屏上会糊所以实际项目里常把 png 替换成 svg这套源码用 PNG后续升级时注意同时改 CSS 中的宽高。4. 分辨率适配与 F12 调试把大屏压进任意屏幕还不走样4.1 scale 缩放与 vw/vh 的取舍拿到任何一套可视化大屏源码第一个要解决的问题都是分辨率。会议室的屏幕可能是 1080p也可能是拼出来的 4K 电视墙。常见适配方案有三种CSS transform 缩放、vw/vh 布局、rem 布局。这套源码的根页面按 1920x1080 设计最简单的方案是整体缩放即用 JavaScript 算出浏览器视口与设计稿的宽高比取最小值作为缩放系数保证 16:9 之外的屏幕上也不出现滚动条。方案优点缺点transform scale开发时完全按设计稿写死不会出现文字错位缩放后点击坐标需要换算模糊化处理较多vw/vh布局百分比化响应式更强字体和边框的细小尺寸容易被四舍五入搞坏rem兼顾字体与间距需要引入动态根字号脚本复杂度最高对大屏会议场景我一般用 transform scale因为大屏的交互密度低点击坐标偏移的影响远小于布局错位的影响。这份源码没有引入复杂框架全部用 jQuery 和 CSS 实现整体缩放的改造成本最低。4.2 用 scale 方案把设计稿压进任意分辨率假设设计稿是 1920x1080根容器假设叫#screen。把#screen固定在设计稿尺寸再用 transform 等比缩放。function resizeScreen() { var designWidth 1920; var designHeight 1080; var ratio Math.min( window.innerWidth / designWidth, window.innerHeight / designHeight ); $(#screen).css({ transform: scale( ratio ), transformOrigin: left top }); } $(window).on(resize, resizeScreen); resizeScreen();transformOrigin: left top是最关键的一行。如果不设置缩放的原点默认在元素中心1920x1080 的容器缩放后左上角会偏出屏幕。设置成 left top 之后容器从屏幕左上角开始缩放整体布局不会漂移。window.innerWidth / designWidth和window.innerHeight / designHeight取较小值是为了保证宽度、高度同时被塞进视口不会出现横向或纵向滚动条。要注意的是如果 index.html 根容器本身不是固定宽高 1920x1080这套代码就不成立。你得先检查 cssFile.css 里最外层容器的宽度和高度把它改成 1920 和 1080。还有一种情况是页面本身已经用 flex 做了自适应再套 transform 会双重缩放导致字体过大这时应该放弃 scale改用 vw 方案。4.3 F12 全屏调试的三个检查点这份源码的摘要里提到调整分辨率后按 F12 全屏观看实际操作不只是按一下 F12。调试时我习惯开三个检查点。第一个是元素尺寸用开发者工具选中地图容器看 Computed 里 width 是否等于设计稿中的宽度乘以缩放比如果等于说明 transform 生效。第二个是字体是否模糊如果整体 scale 之后文字边缘发虚通常是缩放比不是整数比如 0.83333这时可以把设计稿改成和物理分辨率接近的尺寸或者把 target 分辨率设为 1600x900。第三个检查点是事件坐标。当#screen被 scale 后jQuery 的 click 事件坐标仍然基于原始像素坐标鼠标点在地图上高亮的区域和视觉落点会偏差。常见做法是在事件处理函数里除以缩放比var rect $(#screen)[0].getBoundingClientRect(); var ratio parseFloat($(#screen).css(transform).split(,)[3]) || 1; var realX (event.clientX - rect.left) / ratio; var realY (event.clientY - rect.top) / ratio;这串代码读取了 transform 矩阵中的缩放值再把鼠标坐标还原到设计稿坐标。如果源码的地图模块没有点击交互可以省略但如果后续要在 drawMap.js 里加省份点击事件这个换算逃不掉。异常现象定位方向地图多出一截检查外层容器溢出加 overflow hidden文字发虚缩放比非整数调整设计稿或启用字体平滑背景图错位检查背景尺寸是 cover 还是 contain时间模块不刷新看 getTime.js 是否在页面隐藏时被浏览器节流5. 从风格二到你的业务屏数据替换与选型技巧5.1 十种风格怎么选这个系列一共十种风格这份是风格二。风格二的特征是左侧考勤指标、右侧地域报修排名、中间地图适合综合运营场景。选风格不能只看好看要看业务是否真的需要地图。如果纯做设备状态监控没有地域维度选带地图的风格还要额外准备 GeoJSON 数据纯属增加工作量。如果屏幕投放距离超过五米优先选大标题、粗数字的风格距离近则可以接受细线条和小图例。5.2 把静态指标卡数据换成真实接口源码里指标卡初始数据是写死的接入后端时最稳妥的做法是保留 createSpeed.js 的动画入口只替换数据来源。先请求接口再遍历指标卡更新目标值。async function loadOverview() { var res await fetch(/api/overview, { headers: { Authorization: Bearer getToken() } }); if (!res.ok) { showErrorState(); return; } var data await res.json(); data.cards.forEach(function (item) { animateNumber(# item.id, item.targetValue, 1200); }); }getToken()是统一鉴权函数真实项目中 token 走 header 比放 URL 安全。animateNumber的第三个参数 1200 控制滚动动画时长轮询刷新数据时如果每次都滚 1.2 秒会让观众觉得页面在反复跳动建议首次进入 1200ms后续轮询改成 300ms 或直接瞬跳。5.3 轮询参数与组件销毁大屏页面通常常驻不关闭但轮询请求不能无脑 setInterval。常见做法是 30 秒请求一次并在页面进入后台时用visibilitychange暂停请求避免浏览器后台限流导致堆积。var refreshTimer null; var pageHidden false; function stopRefresh() { if (refreshTimer) { clearInterval(refreshTimer); refreshTimer null; } } document.addEventListener(visibilitychange, function () { if (document.hidden) { pageHidden true; stopRefresh(); } else if (pageHidden) { pageHidden false; loadOverview(); refreshTimer setInterval(loadOverview, 30000); } });这段代码把刷新流程拆成两段页面可见时立即拉一次数据然后开启 30 秒轮询页面隐藏时清掉定时器避免后台堆积请求。最后再加一个 resize 时的防御性刷新当地图容器尺寸变化后重新调用 drawMap就能完整覆盖大屏最常见的三类问题白屏、错位、数据不更新。本文还有配套的精品资源点击获取 可视化大屏源码深度剖析：从页面结构到动态数据接入
简介面向需要快速搭建数据可视化大屏的前端开发者和运维人员这份基于HTML的大屏模板属于十种风格系列中的一款适配不同业务场景无需复杂配置即可直接运行也方便后续二次修改。资源包共27个文件压缩后约109KB细分包含17个PNG图片、6个JS脚本、2个HTML页面、1个CSS样式表和1个说明文档图片用于背景与图标脚本负责图表联动和动态效果页面与样式搭起大屏骨架。模板内置多种酷炫可视化风格涵盖指标卡、地域分布、趋势统计等常见模块兼容各类分辨率可全屏展示代码独立且注释清晰便于按需求替换数据和调整布局。已有901人学习下载特别适合需要快速交付可视化方案或做扩展开发的读者能有效缩短大屏搭建周期。1. 大屏不是网页这份 HTML 可视化大屏源码为什么能直接上屏会议室门口站着几位业务领导屏幕却还在转圈这种场面做大屏的人都经历过。大屏不是普通网页没有鼠标引导没有滚动条观众站在三米外第一眼就要看到核心指标。这份可视化大屏风格2源码属于一套十种风格的系列资源中的一张牌双击 index.html 就能出效果。它把加载动画、时钟、地图、指标卡、预警图标全部拆成独立 JS 文件互不锁死改数据时可以只动一个模块。它的价值不是某个图表画得多细而是把科技线条、地域分布、趋势箭头和指标卡组成完整的信息层级。适合数据可视化工程师、前端开发以及正被大屏分辨率适配折磨的团队参考。2. 可视化大屏源码的目录结构index.html、loadingScript 与 drawMap 谁先谁后2.1 先读文件结构再决定从哪改起拿到压缩包解压后不建议直接双击 index.html 就满屏找图表配置。先看目录这套源码把页面、脚本、样式和图标做了明确分层根目录放页面style 下只有一个 cssFile.csslib 下是 jQuery 和四个业务脚本icon 下是全部图标素材。文件越少越容易看清楚渲染链路。大屏风格2/ ├── index.html ├── 优质源码合集.html ├── style/ │ └── cssFile.css ├── lib/ │ ├── jquery.min.js │ ├── loadingScript.js │ ├── createTip.js │ ├── createSpeed.js │ ├── getTime.js │ └── drawMap.js └── icon/ ├── 考勤.png ├── 上升趋势.png ├── selectIcon.png ├── xjt.png ├── 高亮图标大.png ├── legend.png ├── 地域完成率.png ├── 欣晨软件服务.png ├── 地域完成数排名.png ├── 下降趋势.png ├── 高亮图标小.png ├── 收起.png ├── 详细指标.png ├── 地域报修数排名.png ├── 展开.png ├── 预警.png └── 总指标.png目录里最有辨识度的几个点icon 文件夹里既有“考勤”“预警”“总指标”这样的业务图标也有“上升趋势”“下降趋势”“展开”“收起”这样的状态图标。前者决定指标卡看起来专不专业后者决定大屏在交互时有没有反馈。各文件职责整理成表格文件/目录职责index.html页面骨架承载所有模块的 DOM 结构优质源码合集.html系列内多风格预览入口方便挑版式style/cssFile.css全部布局、配色、动画、媒体查询lib/jquery.min.jsDOM 操作与事件绑定的基础库lib/loadingScript.js开屏加载动画控制lib/getTime.js大屏头部时间和星期刷新lib/createTip.js指标卡悬浮提示层lib/createSpeed.js数字滚动、趋势动画lib/drawMap.js地图区域绘制与高亮icon/图标切图配合 CSS 形成指标卡视觉2.2 加载顺序决定首屏白屏时间大屏页面和后台管理系统不同它对首屏速度更敏感因为播放大屏的人不会去刷新页面。这套源码里没有打包工具全靠 script 标签顺序维护依赖。常见做法是把 jQuery 放在最前面因为 createTip、createSpeed、drawMap 这些脚本都依赖$loadingScript 要放在内容脚本之前才能保证先出现加载动画再渲染数据。script srclib/jquery.min.js/script script srclib/loadingScript.js/script script srclib/getTime.js/script script srclib/createTip.js/script script srclib/createSpeed.js/script script srclib/drawMap.js/script这段顺序不能随意打乱。如果 getTime 先于 loadingScript 执行时间模块会抢在加载动画结束前更新页面观众会看到时间跳动与动画叠加的错乱。更隐蔽的问题是 drawMap地图模块要等 DOM 容器有实际宽度才能绘制否则 canvas 宽高拿到的是 0地图画不出来或画出来只有一半。这里的参数说明很简单每个脚本的初始化函数都应包裹在$(function () {})里确保 DOM ready 后再操作节点。2.3 drawMap.js 为什么要等容器宽高地图是可视化大屏里最容易翻车的一环。常见做法是地图用 canvas 或者 SVG 绘制而 canvas 的宽高必须在初始化时给定不能像普通 DOM 那样靠 CSS 自动撑开。drawMap.js 等容器宽高其实是很多大屏项目的通用套路用定时器轮询容器尺寸宽度大于 0 才开始绘图。$(function () { var mapBox $(#mapContainer); if (mapBox.length 0) { return; } var timer setInterval(function () { var width mapBox.width(); if (width 0) { clearInterval(timer); drawMap(); // 实际绘制逻辑放在这里 } }, 200); });轮询间隔 200ms最多等多久由业务决定。这个做法的好处是不管 index.html 里的地图容器是固定宽度还是 flex 撑开绘制逻辑一定在布局完成后执行。如果你发现地图出现在屏幕左上角且尺寸不对优先检查的不是 drawMap.js而是 mapBox 外层是否有容器塌陷或者 cssFile.css 里地图容器被设成了display:none又在某个动画结束才显示。3. 指标组件实现getTime、createTip、createSpeed 与图标体系的组合3.1 getTime.js右上角时钟不只是显示时间大屏上的时间通常同时承担两个职责一是给人读二是给运维看数据是否在滚动刷新。如果时间停住观众会怀疑整个页面死掉。getTime.js 的常规实现是每秒更新一次文本并且把星期算出来这样就不用依赖后端返回日期。function pad(n) { return n 10 ? 0 n : n; } function updateTime() { var now new Date(); var dateStr now.getFullYear() - pad(now.getMonth() 1) - pad(now.getDate()); var timeStr pad(now.getHours()) : pad(now.getMinutes()) : pad(now.getSeconds()); $(#currentTime).text(dateStr timeStr); var week [日, 一, 二, 三, 四, 五, 六]; $(#currentWeek).text(星期 week[now.getDay()]); } setInterval(updateTime, 1000); updateTime();这里的pad函数保证月份、日期、时分秒总是两位数字避免出现 9:5:3 这种难看格式。setInterval(updateTime, 1000)之后紧跟一次立即调用而不是等第一秒否则页面加载后的第一秒时间里模块是空的。如果你要在开发环境做假数据演示可以把这个时间干扰项调成 2 秒更新一次但正式上屏建议还是 1 秒观众对大屏时间的预期和手表一致。3.2 createTip.js大量指标卡用事件委托挂悬浮提示大屏上的指标卡可能有几十个如果每个卡片都单独绑定 mouseenter内存里会有大量监听器页面掉帧。createTip.js 更合理的实现是把事件绑定到公共容器上用事件委托识别当前悬浮的卡片再根据卡片上的 data 属性拼出提示内容。$(document).on(mouseenter, .indicator-item, function () { var name $(this).data(name); var value $(this).data(value); var offset $(this).offset(); $(#tooltip) .text(name value) .css({ left: offset.left 12, top: offset.top - 28 }) .fadeIn(150); }).on(mouseleave, .indicator-item, function () { $(#tooltip).fadeOut(150); });事件委托把监听器数量从 N 个降成 1 个新增的指标卡不需要重新绑定事件。offset.left 12这个偏移量是为了避免提示层盖住手指或鼠标top - 28是让提示浮在卡片上方。你在改这套源码时要注意.indicator-item的命名必须和 index.html 里的类名一致如果 cssFile.css 里已经有同名样式就以它为准。3.3 createSpeed.js数字滚动和趋势箭头的节奏控制createSpeed.js 管的是指标数字变化和趋势箭头。大屏上数字突然从 0 跳到 8 万会显得很生硬常见做法是用 requestAnimationFrame 做缓动让数字在 800 到 1500 毫秒之间从 0 滚到目标值同时切换上升趋势或下降趋势的箭头图标。function animateNumber(el, target, duration) { var start 0; var startTime null; function step(timestamp) { if (!startTime) startTime timestamp; var progress Math.min((timestamp - startTime) / duration, 1); var current Math.floor((target - start) * progress start); $(el).text(current.toLocaleString()); if (progress 1) { requestAnimationFrame(step); } else { $(el).closest(.indicator-item).find(.trend).attr( src, target current ? icon/上升趋势.png : icon/下降趋势.png ); } } requestAnimationFrame(step); }duration是滚动的总时长数值越大越丝滑但超过 2 秒观众会等得不耐烦。toLocaleString()负责把 12800 变成 12,800避免大屏上一串数字没有千分位。趋势图标的切换放在动画结束时判断而不是一开始判断是因为有些指标会先降到负数再回正只看最终值会错过中间状态。如果你要改成先降后升的表现就得把判断逻辑挪进 step 函数里。3.4 cssFile.css 与图标切图的对应关系图标文件和样式之间最常见的配合是DOM 里放 img 标签CSS 控制尺寸、间距和 hover 状态或者把多张图标拼成一张雪碧图用 background-position 定位。这套源码的 icon 文件都是独立 PNG说明实现方式大概率是前者好处是替换图标不需要改 CSS直接换文件同名覆盖即可。图标典型挂载位置作用考勤.png考勤指标卡头部说明指标类型预警.png异常指标旁标记超标上升趋势.png / 下降趋势.png指标卡底部趋势方向展开.png / 收起.png折叠面板交互状态高亮图标大.png / 高亮图标小.png地图弹层地图点位的层级区分legend.png地图图例说明颜色映射调整时最容易忽略的是 icon 的尺寸。大屏通常以 1920x1080 为设计基准你在 cssFile.css 中看到.indicator-item img { width: 24px; height: 24px; }这类规则时先改成设计稿里的实际值而不是直接换图标文件。图标源文件本身如果分辨率低于 2 倍屏在 4K 大屏上会糊所以实际项目里常把 png 替换成 svg这套源码用 PNG后续升级时注意同时改 CSS 中的宽高。4. 分辨率适配与 F12 调试把大屏压进任意屏幕还不走样4.1 scale 缩放与 vw/vh 的取舍拿到任何一套可视化大屏源码第一个要解决的问题都是分辨率。会议室的屏幕可能是 1080p也可能是拼出来的 4K 电视墙。常见适配方案有三种CSS transform 缩放、vw/vh 布局、rem 布局。这套源码的根页面按 1920x1080 设计最简单的方案是整体缩放即用 JavaScript 算出浏览器视口与设计稿的宽高比取最小值作为缩放系数保证 16:9 之外的屏幕上也不出现滚动条。方案优点缺点transform scale开发时完全按设计稿写死不会出现文字错位缩放后点击坐标需要换算模糊化处理较多vw/vh布局百分比化响应式更强字体和边框的细小尺寸容易被四舍五入搞坏rem兼顾字体与间距需要引入动态根字号脚本复杂度最高对大屏会议场景我一般用 transform scale因为大屏的交互密度低点击坐标偏移的影响远小于布局错位的影响。这份源码没有引入复杂框架全部用 jQuery 和 CSS 实现整体缩放的改造成本最低。4.2 用 scale 方案把设计稿压进任意分辨率假设设计稿是 1920x1080根容器假设叫#screen。把#screen固定在设计稿尺寸再用 transform 等比缩放。function resizeScreen() { var designWidth 1920; var designHeight 1080; var ratio Math.min( window.innerWidth / designWidth, window.innerHeight / designHeight ); $(#screen).css({ transform: scale( ratio ), transformOrigin: left top }); } $(window).on(resize, resizeScreen); resizeScreen();transformOrigin: left top是最关键的一行。如果不设置缩放的原点默认在元素中心1920x1080 的容器缩放后左上角会偏出屏幕。设置成 left top 之后容器从屏幕左上角开始缩放整体布局不会漂移。window.innerWidth / designWidth和window.innerHeight / designHeight取较小值是为了保证宽度、高度同时被塞进视口不会出现横向或纵向滚动条。要注意的是如果 index.html 根容器本身不是固定宽高 1920x1080这套代码就不成立。你得先检查 cssFile.css 里最外层容器的宽度和高度把它改成 1920 和 1080。还有一种情况是页面本身已经用 flex 做了自适应再套 transform 会双重缩放导致字体过大这时应该放弃 scale改用 vw 方案。4.3 F12 全屏调试的三个检查点这份源码的摘要里提到调整分辨率后按 F12 全屏观看实际操作不只是按一下 F12。调试时我习惯开三个检查点。第一个是元素尺寸用开发者工具选中地图容器看 Computed 里 width 是否等于设计稿中的宽度乘以缩放比如果等于说明 transform 生效。第二个是字体是否模糊如果整体 scale 之后文字边缘发虚通常是缩放比不是整数比如 0.83333这时可以把设计稿改成和物理分辨率接近的尺寸或者把 target 分辨率设为 1600x900。第三个检查点是事件坐标。当#screen被 scale 后jQuery 的 click 事件坐标仍然基于原始像素坐标鼠标点在地图上高亮的区域和视觉落点会偏差。常见做法是在事件处理函数里除以缩放比var rect $(#screen)[0].getBoundingClientRect(); var ratio parseFloat($(#screen).css(transform).split(,)[3]) || 1; var realX (event.clientX - rect.left) / ratio; var realY (event.clientY - rect.top) / ratio;这串代码读取了 transform 矩阵中的缩放值再把鼠标坐标还原到设计稿坐标。如果源码的地图模块没有点击交互可以省略但如果后续要在 drawMap.js 里加省份点击事件这个换算逃不掉。异常现象定位方向地图多出一截检查外层容器溢出加 overflow hidden文字发虚缩放比非整数调整设计稿或启用字体平滑背景图错位检查背景尺寸是 cover 还是 contain时间模块不刷新看 getTime.js 是否在页面隐藏时被浏览器节流5. 从风格二到你的业务屏数据替换与选型技巧5.1 十种风格怎么选这个系列一共十种风格这份是风格二。风格二的特征是左侧考勤指标、右侧地域报修排名、中间地图适合综合运营场景。选风格不能只看好看要看业务是否真的需要地图。如果纯做设备状态监控没有地域维度选带地图的风格还要额外准备 GeoJSON 数据纯属增加工作量。如果屏幕投放距离超过五米优先选大标题、粗数字的风格距离近则可以接受细线条和小图例。5.2 把静态指标卡数据换成真实接口源码里指标卡初始数据是写死的接入后端时最稳妥的做法是保留 createSpeed.js 的动画入口只替换数据来源。先请求接口再遍历指标卡更新目标值。async function loadOverview() { var res await fetch(/api/overview, { headers: { Authorization: Bearer getToken() } }); if (!res.ok) { showErrorState(); return; } var data await res.json(); data.cards.forEach(function (item) { animateNumber(# item.id, item.targetValue, 1200); }); }getToken()是统一鉴权函数真实项目中 token 走 header 比放 URL 安全。animateNumber的第三个参数 1200 控制滚动动画时长轮询刷新数据时如果每次都滚 1.2 秒会让观众觉得页面在反复跳动建议首次进入 1200ms后续轮询改成 300ms 或直接瞬跳。5.3 轮询参数与组件销毁大屏页面通常常驻不关闭但轮询请求不能无脑 setInterval。常见做法是 30 秒请求一次并在页面进入后台时用visibilitychange暂停请求避免浏览器后台限流导致堆积。var refreshTimer null; var pageHidden false; function stopRefresh() { if (refreshTimer) { clearInterval(refreshTimer); refreshTimer null; } } document.addEventListener(visibilitychange, function () { if (document.hidden) { pageHidden true; stopRefresh(); } else if (pageHidden) { pageHidden false; loadOverview(); refreshTimer setInterval(loadOverview, 30000); } });这段代码把刷新流程拆成两段页面可见时立即拉一次数据然后开启 30 秒轮询页面隐藏时清掉定时器避免后台堆积请求。最后再加一个 resize 时的防御性刷新当地图容器尺寸变化后重新调用 drawMap就能完整覆盖大屏最常见的三类问题白屏、错位、数据不更新。本文还有配套的精品资源点击获取