源码系统概览
文章正文
这份「大数据可视化大屏电子沙盘合集」源码是一套纯前端可视化模板合集，作者凯文同学最早放在 Gitee 开源（仓库 kevin_chou/dataVIS）。
下载下来直接双击 index.html 就能跑，不用搭后端也不用装数据库，整套就是把 HTML、CSS、JavaScript 摆好，图表交给百度 ECharts 去画，数据先用本地 JSON 文件模拟着。
合集里塞了十二个行业仪表盘页面，外加 login 与 login2 两套大屏登录页，改改数据接口就能接到自己业务里。
这次重新打包主要是把目录结构和入口页面梳理清楚，方便下载后直接对照查看。
源码简介
源码基于 HTML、CSS、JavaScript 加百度 ECharts 实现，模板以单页 HTML 组织，图表统一走 echarts.min.js 渲染，几个涉及地理位置的行业页（智慧物流、大数据医疗）另外引了百度地图 bmap.min.js 做底图。
整套是纯静态的，没有后端语言也没有数据库，数据走本地 JSON 模拟接口（api-config.js 配 data/ 下的 *.json），想换真实接口时把 window.serverPath 从 ‘data/’ 改成你的 API 前缀就行。
合集覆盖十二个行业主题：智慧政务、智慧社区、金融行业、智慧交通、智慧门店、智慧大厅、智慧物流、智慧医疗、通用模板、大数据分析平台、运营商服务器监控、综合分析平台。
每个主题一个独立目录，自带 index.html 入口、js/ 配置脚本、css/ 样式和 images/ 静态资源。
另含 login 与 login2 两套大屏登录页模板，login2 自带客户数、工单、燃气消耗等十余个 JSON 模拟接口，可以作为带登录态的大屏入口参考。
适用场景
需要快速出大屏、又不想从零写图表代码的团队都能用：会议现场的大屏投影、运营指挥中心的实时监控页、风险预警告警页改造起来工作量都不大，数据汇报和年度展示页改改配色就能交差，政企接待演示和投标原型更是现成的。
顺带一提，前端想学 ECharts、jQuery 和百度地图 API 怎么组合用的话，这套源码也是一份能拆开看的实战材料，翻牌效果、CSS 动画、WebSocket 实时接入、iframe 嵌套这几招都摆在里面。
功能亮点
合集覆盖了交通、物流、医疗、金融、社区、政务等十二个常见行业，每个行业目录下都是独立的 index.html，单开就能全屏演示。
多数主题不止一个页面，比如大数据医疗就在 views/ 下准备了采集概况、指标分析、趋势分析、慢病列表和慢病展示五个子页，靠顶部导航切换。
图表侧除了常见的折线、柱状、饼图，还塞了实时 K 线、水球、地图飞线和热力图几种相对花哨的组合，配色走深蓝科技风。
视觉上 fonts 目录打包了多套 .ttf/.woff/.eot 自定义字体，全屏投影不会出现默认宋体的尴尬。
技术架构与部署指南
| 维度 | 本套源码 | 同类通用方案 |
|---|---|---|
| 技术栈 | 前端：HTML5 + CSS3 + 原生 JavaScript，图表基于百度 ECharts（echarts.min.j | 依具体方案选型，需自行搭建与维护 |
| 部署方式 | 下载解压后把「大数据可视化大屏电子沙盘合集」目录扔到 Web 服务器的站点根目录里就行，IIS 站点、Nginx 的 r | 多托管于第三方平台或订阅云服务 |
| 功能侧重 | 合集覆盖了交通、物流、医疗、金融、社区、政务等十二个常见行业，每个行业目录下都是独立的 index.html，单开就能全 | 功能通用，定制深度有限 |
| 数据归属 | 数据自持，部署在自有服务器，不出站 | 数据通常留存于服务商侧 |
| 成本模式 | 获取后自主部署，无持续授权费用 | 通常按订阅或调用量计费 |
技术栈与运行环境
前端：HTML5 + CSS3 + 原生 JavaScript，图表基于百度 ECharts（echarts.min.js），辅以 jQuery 3.3.1、bmap.min.js，部分医疗主题引入了 bootstrap-table 与分页插件
后端：无（纯静态前端模板，数据走本地 JSON 模拟接入，不需要任何服务端语言）
数据库：无
运行环境：随便一个能托管静态文件的 Web 服务器都行，IIS、Nginx、Apache、Node 静态服务都可以；嫌麻烦直接双击 index.html 在 Chrome、Edge 或 Firefox 全屏查看也能跑
其他依赖：百度地图 JavaScript API（涉及地图的行业主题需要有效 ak，源码里嵌的是原作者公开的 demo ak，二次部署建议换成自己申请的 ak）
安装与部署提示
下载解压后把「大数据可视化大屏电子沙盘合集」目录扔到 Web 服务器的站点根目录里就行，IIS 站点、Nginx 的 root、Apache 的 DocumentRoot 都接得住。
浏览器打开对应行业目录的 index.html 就能看，比如 /智慧物流/index.html 或者 /大数据医疗/views/index.html。
本地预览直接用 Chrome 双击 index.html 也能跑，但 file:// 协议下 ajax 和字体加载经常抽风，图表空白或者字体没显示的时候，起一个本地静态服务（npx http-server、python -m http.server 8000 都行）用 http://localhost:8000 访问就齐了。
替换数据有两种做法。
一是直接改 data/ 下的 *.json 文件，login2 默认就指向 data/，里面摆了 customer-count.json、work-order-count.json 等十余个接口；
二是改 api-config.js，把 window.serverPath 从 ‘data/’ 换成你自己的接口前缀，再把返回结构对齐到 ECharts 想要的 series/data 字段。
另外几个医疗页面的 HTML 里引用了 http://api.map.baidu.com/api?v=2.0&ak=xxx，外网离线部署建议改成本地引用或者换成自备的 ak。
截图与演示说明
合集是纯前端静态模板，一共 1174 个源文件（501 张 png 背景图标、217 个 js、136 个 css、61 个 json 模拟数据、21 个 html 入口页），没有可对外公开的运营截图。
下载后按下面这些目录对照着看就行：
- 大屏登录页：login2/index.html 是 nb-lot 数据大脑风格的登录模板，自带模拟 JSON 的工单和燃气接口；login/login.html 是更简洁的一版。
- 智慧物流：智慧物流/index.html，能看到翻牌量的寄件总数、全国网络珠海词云、广东寄件地图和公司业务收入面板。
- 大数据医疗：views/index.html（采集概况）、views/quota.html（指标分析）、views/trend.html（趋势分析）、views/chronic.html（慢病列表）、views/NCDindex.html（慢病展示），顶部导航切换。
- 智慧交通、交通数据分析平台、智慧小区、智慧门店、智慧大厅、运营商服务器监控、综合分析平台、金融行业、通用模板：每个目录都有自己的 index.html，建议逐个全屏看一遍。
常见问题
问：整套是纯前端吗？要装 PHP、Java 或者 Node 这些后端吗？
不用。
整套是纯静态的 HTML/CSS/JS，图表都在浏览器里画，数据先用本地 JSON 模拟。
想接真实接口的话，把 api-config.js 里 window.serverPath 换成你的 API 前缀，返回结构对齐到 ECharts 的 series/data 就能跑。
问：百度地图那几个页面打开后地图一片空白，怎么处理？
源码里嵌的是原作者公开的 demo ak，这种 key 经常失效或者被百度官方限流。
去百度地图开放平台申请一个自己的 ak，把 HTML 里 http://api.map.baidu.com/api?v=2.0&ak=xxx 这一段后面的 ak 值替换掉，地图就回来了。
问：双击 index.html 能直接看吗？为什么字体没显示出来？
可以双击预览，但 file:// 协议下 ajax 和自定义字体加载经常被浏览器拦掉。
起一个本地静态服务（npx http-server 或者 python -m http.server 8000 都行），用 http://localhost:8000/xxx/index.html 打开，图表和字体就都正常了。
安全风险提示
特别提示：本源码未检测安全风险文件，下载后请务必进行安全审计，删除恶意代码后再部署使用！
下载说明
本源码仅供学习研究与二次开发参考，请在遵守国家相关法律法规和开源协议的前提下使用。
下载即视为同意把源码用在合法的非商业或商业二次开发场景里，因不当使用本源码产生的后果由使用者自己承担。