简介：一款基于HTML的科技风大屏模板源码，面向需要快速搭建数据可视化大屏、监控看板或展厅展示界面的前端开发者与项目集成人员，提供酷炫的视觉效果和灵活的模块化布局，可自由扩展功能并调整版块样式。压缩包共40个文件，包含5个JS脚本（如ECharts图表与地图逻辑）、2个HTML页面、2个CSS样式文件、28张PNG界面素材，以及1个MP4演示视频，整体大小约77.11MB。JS、HTML、CSS与图片素材分层存放，便于按需替换和二次开发；内置地图及多种图表组件，适合展示地理分布、实时业务指标等大屏场景，项目结构清晰，可作为高颜值大屏项目的基础脚手架。目前已有2527人学习该模板，附带说明文档与演示视频，可帮助有前端基础的开发者快速理解源码逻辑，并根据业务需求灵活定制界面风格与功能模块。
1. 大屏模板不只是套页面，适配和模块化才是核心
接手这块科技风大屏模板时，第一反应是“又一个用 ECharts 拼出来的看板”。但真正打开目录结构后发现，它把 flexible.js 适配方案、按需加载的地图数据和可切换的弹框组件都揉在了一起，比单纯抄图表代码要复杂一层。这类模板适合两种人：一是需要快速给客户或领导交付可视化项目的开发者，二是想研究大屏适配与模块拆分思路的前端工程师。它的价值不在那张地图和那几条折线，而在“一套代码如何在不同分辨率下保持布局不崩”的工程化写法。接下来我直接拆文件、讲参数、跑效果，把这份源码从头到尾撸一遍。
2. 目录里的每个文件都有活干：从 flexible.js 到自定义弹框
2.1 先看压缩包结构，不要急着打开 index.html
拿到 zip 后，解压出来的文件很典型：index.html是入口，css文件夹里是index.css和animate.min.css，js文件夹里是flexible.js、echarts.min.js、china.js、myMap.js和index.js，还有一堆img下的背景图、边框图、按钮图。注意readme.txt，先读它，里面通常写了最低分辨率要求和浏览器兼容说明。
js/ flexible.js // 移动端适配库，这里用来做大屏 rem 基准 echarts.min.js // 图表核心，体积大，别乱动 china.js // 中国地图 GeoJSON 数据，注册为地图 myMap.js // 地图相关初始化逻辑，含缩放、飞行线 index.js // 主逻辑：图表初始化、定时刷新、交互切换 css/ index.css // 布局、字体、弹框样式 animate.min.css // 入场动画，可替换或裁减 img/ bg.png / head_bg.png // 整体背景和头部底图 border_lefttop.png ... // 四角边框，做科技感框线 popbg.png // 弹框背景 titlebg.png / titlecss.png // 大标题底图这套资源里animate.min.css是纯 CSS3 动画，没依赖 jQuery，所以页面加载会轻一些。china.js体积不小，如果只做省内地图，建议后续换成省 GeoJSON，减小几十 KB。
2.2 flexible.js 在大屏里的真正用法
很多人以为 flexible.js 只给移动端用，其实它的核心是设置html的font-size。大屏场景下，我们用它把设计稿宽度映射成 rem，实现等比缩放。
// flexible.js 核心逻辑（部分） (function flexible(window, document) { var docEl = document.documentElement; var dpr = window.devicePixelRatio || 1; // 计算基准宽度，默认设计稿宽度是 1920 var designWidth = 1920; function setRemUnit() { var base = designWidth / 10; // 1rem = 192px docEl.style.fontSize = base + 'px'; } setRemUnit(); // 窗口缩放时重新设置 window.addEventListener('resize', setRemUnit); })(window, document);上面是简化版，真实源码里还有 dpr 处理和首屏优化。关键逻辑是：把设计稿宽度1920分成 10 等份，1rem = 192px。所以当你看到width: 10rem时，实际就是设计稿里的1920px。用起来时，PS 稿里量了多少 px，除以 192 就是 rem 值。
参数说明：
designWidth：按你的设计稿改，比如常见大屏设计稿还有 2560、3840（4K），改成 2560 后1rem = 256px。resize监听：窗口变化时重新计算font-size，但大屏端通常只监听不用防抖，因为缩放频率低。
注意：flexible.js默认开启的是maximum-scale=1，并且会忽略用户手动缩放。资源描述里提到“Ctrl+鼠标滚轮”调整，实际是让用户手动缩放页面来匹配物理分辨率，这跟 flexible 的自动适配并不冲突——自动适配保证布局比例，手动缩放解决最终显示像素溢出问题。
2.3 index.css 里的栅格布局：flex 和百分比走天下
这套模板的大屏布局不是用绝对定位硬堆，而是用了 flex 网格加宽的盒模型。打开index.css，你会看到大量这样的结构：
.screen { display: flex; flex-direction: column; width: 100%; height: 100%; background: url('../img/bg.png') no-repeat center/cover; } .top { height: 1rem; /* 192px */ display: flex; align-items: center; justify-content: center; } .main { flex: 1; display: flex; } .main-left, .main-right { width: 4.375rem; /* 840px */ height: 100%; padding: 0.15rem; box-sizing: border-box; display: flex; flex-direction: column; } .main-center { flex: 1; margin: 0 0.1rem; }这里有意思的点是：左右栏固定宽度，中间栏flex: 1自适应，这样不管屏幕多宽，地图始终居中且能吃到剩余空间。高度方向用flex: 1填充，避免出现滚动条。默认html, body的width/height: 100%加上overflow: hidden，保证大屏没有滚动条。
常见问题：如果你加入更多模块，右侧区域高度不够，要么把main-right内部改成滚动容器，要么缩短每个卡片高度。不建议直接删掉overflow: hidden，那样大屏会露出底边背景拼接缝。
3. 地图和图表初始化：myMap.js 与 index.js 的分工协作
3.1 china.js 如何注册地图数据
china.js是 ECharts 地图数据文件，它把 GeoJSON 数据挂在echarts.registerMap('china', ...)上。在没有这个文件时，ECharts 不会内置中国地图，必须提前引入。
<!-- index.html 中引入顺序不能乱 --> <script src="js/flexible.js"></script> <script src="js/echarts.min.js"></script> <script src="js/china.js"></script> <script src="js/myMap.js"></script> <script src="js/index.js"></script>引入顺序决定了运行时能否拿到map类型。echarts.min.js如果用 npm 方式引入，还需要显式 import 地图数据。源码里这种方式最简单，但注意china.js和echarts.min.js必须在myMap.js之前加载，否则注册地图时 ECharts 还不存在，控制台会报ECharts is not loaded。
3.2 myMap.js 的地图散点与飞行线配置
地图不是静态图片，它有散点、涟漪效果和航线。看一段精简过的myMap.js配置：
// myMap.js 关键片段 var mapChart = echarts.init(document.getElementById('mapChart')); var geoData = [ { name: '北京', value: [116.40, 39.90, 100] }, { name: '上海', value: [121.47, 31.23, 80] }, { name: '广州', value: [113.26, 23.13, 120] } ]; var lineData = [ { from: '北京', to: '上海' }, { from: '上海', to: '广州' } ]; mapChart.setOption({ geo: { map: 'china', roam: false, itemStyle: { areaColor: '#0f1b3d', borderColor: '#23a9f2' } }, series: [ { name: '散点', type: 'effectScatter', coordinateSystem: 'geo', data: geoData.map(function (d) { return { name: d.name, value: d.value }; }), symbolSize: 8, rippleEffect: { brushType: 'stroke', scale: 4 } }, { name: '航线', type: 'lines', coordinateSystem: 'geo', data: lineData, effect: { show: true, period: 6, trailLength: 0.2, symbol: 'arrow' }, lineStyle: { color: '#35f2d5', width: 1, opacity: 0.6 } } ] });说明几点：
geo配置 аналогична series 里的map系列，但geo更适合做背景底图，多个系列共享同一坐标系。effectScatter的rippleEffect.scale控制涟漪扩散半径，数字越大扩散范围越广，brushType用stroke只显示描边，视觉上更干净。lines路线需要coordinateSystem: 'geo'，并且data里每条线路的起点终点要写成经纬度数组，nginx 布局时腿部容易漏掉最后一项坐标转换。
如果直接复用到自己的数据，只需要把geoData里的经纬度换成你自己的城市坐标，lineData的起止城市与实际一致即可。注意 ECharts 的经纬度顺序是先经度后纬度，别和 GPS 习惯搞反。
3.3 index.js 里定时刷新与 tab 切换
大屏不可能只展示静态数据，index.js中通常有以下模式：
// index.js 片段 var chartInstances = []; function initCharts() { // 初始化 echarts 实例并 push 到 chartInstances chartInstances.push(echarts.init(document.getElementById('chart1'))); chartInstances.push(echarts.init(document.getElementById('chart2'))); } function refreshData() { setInterval(function () { chartInstances.forEach(function (chart) { // 模拟随机数据 var data = [Math.random() * 100, Math.random() * 200]; chart.setOption({ series: [{ data: data }] }); }); }, 5000); } initCharts(); refreshData();这里需要注意两点：定时器里不要反复调用setOption不加notMerge参数，默认第二次setOption会合并配置，如果你只传series.data，其他配置会被保留，这是好事。但如果你改了legend尺寸或者图表结构，最好显式传第三个参数true表示全量替换。另外，大屏长期运行时，用setInterval且不清理会有内存泄漏风险。合理做法是在页面隐藏时clearInterval，或者在visibilitychange里暂停定时器。
方式一：直接改数字 —— 适合临时演示 方式二：写个 JSON 模拟接口 —— 适合联调时后端没就绪 方式三：封装一个 fetchData() 函数 —— 后续替换 WebSocket 时只改这个函数我一般会直接在index.js里留一个fetchData的占位函数，里面暂时用setTimeout模拟异步返回，等后端接口出来再替换成fetch('/api/screen')。这样改动面最小，不容易误伤布局代码。
4. 弹框与交互：从图标到模态面板的完整链路
4.1 按钮体系和全屏切换实现
图标目录里有full.png、exit.png、btn.png、btn_on.png，对应全屏和按钮按下状态。先看全屏逻辑：
// 全屏切换 function toggleFullscreen() { if (!document.fullscreenElement) { document.documentElement.requestFullscreen(); } else { document.exitFullscreen(); } } document.getElementById('fullBtn').addEventListener('click', toggleFullscreen);这里修了两个兼容坑：一是requestFullscreen必须由用户手势触发，不能在onload里直接调；二是不同浏览器前缀，webkitRequestFullscreen在旧版 Chrome 里还能遇到，可以加个能力检测。而exit-fullscreen的图标状态需要监听fullscreenchange事件来切换，否则点了退出但图标不重置。
按钮的btn_on.png呈现按下的高亮效果，实现方式可以是用 CSS 类切换背景图：
.btn { background: url('../img/btn.png') no-repeat; } .btn.active { background: url('../img/btn_on.png') no-repeat; }而当点击地图上的城市时，模板会弹出详细信息面板。这个弹框是手写 DOM 模块，不是alert。打开index.html，找到类似这样的结构：
<div class="popup" id="popup" style="display: none;"> <div class="popup-header"> <span id="popupTitle">城市详情</span> <img src="img/icon_close.png" id="popupClose" alt="close" /> </div> <div class="popup-body"> <div id="popupChart"></div> </div> </div>弹框里还嵌了一个 ECharts 图表，用于展示该城市的细分数据。这种弹框复用同一个图表容器，每次打开时用新数据setOption，比每个城市建一个 DOM 更高效。
4.2 弹框定位与层级问题
弹框默认是绝对定位，居中显示。如果大屏核心区域是地图，弹框应该覆盖在地图上方，这时候要注意三层关系：
z-index要高于所有图表容器，建议z-index: 1000以上。- 父容器如果不是
body，要检查position是否设了relative或absolute，否则相对body定位会偏移。 - 背景遮罩
popbg.png是一张半透明底图，避免用rgba(0,0,0,0.5)直接写死，因为模板给了素材，直接用背景图能统一风格。
举个常见错误：在main-center里写.popup { position: absolute; left: 50%; top: 50% }，但main-center没有position: relative，此时left: 50%是相对于离它最近的定位祖先，可能需要双击元素查看中断位置。正确做法是在弹框父级加position: relative，然后弹框用transform: translate(-50%, -50%)实现精确居中。
弹框居中代码示例： .popup { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1000; width: 6.25rem; /* 1200px */ height: 4.5rem; /* 864px */ background: url('../img/popbg.png') no-repeat center/100% 100%; display: none; } .popup.show { display: block; }background上的center/100% 100%意思是让底图铺满容器，但又避免拉伸变形？实际上会变形，但popbg.png设计时预留了边框空间，拉伸后边框略微变粗还可接受。如果需要在任何尺寸都完美，就改用border-image，素材里border_lefttop.png这类四角图就是为九宫格切图准备的。
5. 从静态大屏到可配置系统：用数据驱动模块显隐
只用这一套模板时，很多模块是写死的。如果你想把它变成产品级的骨架，就得把“模块配置”从 HTML 里抽出来。
我一般会在index.html里为每个业务模块加自定义属性，比如>var moduleConfig = { traffic: { visible: true, title: '实时路况', width: '4rem' }, energy: { visible: true, title: '能耗监测', width: '3rem' }, video: { visible: false, title: '视频监控', width: '2rem' } }; function applyModuleConfig() { var modules = document.querySelectorAll('[data-module]'); modules.forEach(function (el) { var name = el.getAttribute('data-module'); var cfg = moduleConfig[name]; if (!cfg || cfg.visible === false) { el.parentNode.removeChild(el); return; } el.querySelector('.panel-title').textContent = cfg.title; el.style.flex = '0 0 ' + cfg.width; }); } applyModuleConfig();
这样做的好处是：换项目时不用动 HTML 结构，只改moduleConfig就能控制显示哪个面板、宽度多少。大屏项目的复用性一下子就提上来了，后期接客户数据时，只需要在配置里加一个dataUrl字段，让图表去请求对应接口。
另外，标题栏和头部信息也可以配置化，避免每次改标题都要去 HTML 里找文本节点。把document.title和页面头部h1的内容绑定到一个全局对象上，改一处生效。
6. 最后两招：分辨率的快捷键适配和关闭不需要的动画
大屏上线最常遇到的问题是“我这屏幕 1920x1080，客户那边是 2560x1440，打开后地图只占了一小块”。资源描述里提到用Ctrl+鼠标滚轮手动缩放，这适合临时救场，但正式交付时不建议让用户自己调。更好的做法是结合flexible.js的基准宽度和初始缩放：
// 让页面按屏幕宽度等比缩放 var screenWidth = window.screen.width; var scale = screenWidth / 1920; document.documentElement.style.fontSize = (scale * 192) + 'px';以上代码放在flexible.js执行之后。原理是把设计基准从固定的 192 像素调整为实际物理宽度算出的 rem 基准。比如 2560 宽的屏，scale=1.333，font-size=256px。这样布局整体放大，而不是出现右侧留白。
还有一个优化细节：animate.min.css里包含大量入场动画。如果大屏多刷新数据，动画反复触发会抢占 GPU。把不影响视觉的模块的动画类去掉，只保留头部标题的渐变和地图涟漪，能明显降低 CPU 占用。排查方法：打开 Chrome 开发者工具 Performance 面板，点击录制后刷新页面，观察 FPS 和 Main 线程任务。如果发现有连续长时间动画任务，逐个去掉animate_xxx类定位瓶颈。
再补一个定位坑：地图缩放时河流、边界线断裂，多半是china.js的 GeoJSON 精度和 ECharts 版本不匹配。这种模板一般锁定某个echarts.min.js版本，升级时要连china.js一起换，否则地图会渲染成碎片。如果不确定版本，直接在 ECharts 官方示例里下载对应版本的china.js，不要自己压缩。
本文还有配套的精品资源，点击获取
