简介基于Bootstrap与jQuery构建的医院大数据可视化管理前端面向医疗信息化开发者、前端工程师及数据展示学习者提供可复用的运营数据看板与交互查询方案。压缩包共79个文件以40个png界面素材、12个js逻辑脚本、5个html页面、5个css样式为主配合woff/ttf/svg等字体图标资源整体仅1.4MB轻量易部署。页面覆盖NCD慢性病、配额、趋势、综合指标等看板场景借助Ajax异步加载、动态筛选排序、模态框及Bootstrap栅格布局实现多终端自适应展示源码目录清晰划分styles、scripts、views、fonts模块便于定位和二次开发。已有149人学习使用适合需要快速搭建医院运营数据展示原型或希望研读BootstrapjQuery数据交互、响应式布局与图表联动实现的开发者。1. 医院大数据展示项目的真实起点bootstrapjquery 的快速表达拿到一个bootstrapjquery医院大数据展示源码.rar大概率不是来看架构的而是要在明天上班前把一块医院运营大屏立起来。这类源码通常是一个纯静态页面集合bootstrap 负责栅格和组件jquery 负责 DOM 操作和数据请求再配一个 ECharts 撑起图表主体。它不需要 node 环境解压后放进 Web 容器就能跑对信息科、HIS 服务商或者做医疗信息相关毕设的工程师来说这套组合仍然是最低成本的交付路径。我一般会先按“布局到组件、图表到刷新、数据到联动”的顺序把它拆开确认哪些能直接用哪些要改参数才能对接自己的数据源。本文不介绍某个具体项目的细节只讲这一类源码背后的通用解法。2. 用 bootstrap 栅格拆解医院大屏的页面面板2.1 先画格子12 列栅格怎么分配给医院大屏医院大数据展示页面最常见的结构是顶部一排指标卡中部左右各一块图表面板中间留一块面积最大的趋势图底部偶尔放排队时长或床位周转率。这张版图直接用 bootstrap 的栅格系统铺出来比手写 flex 在响应式上更稳尤其当展示终端可能是 1920 宽的竖屏一体机或 16:9 的液晶拼接屏时。我习惯以row为横向容器把指标卡和图表面板都拆成col-xl-*的列。注意 bootstrap 默认只有 12 列如果源码里出现col-lg-3 col-xl-6这样的组合意思是小于 1200px 时占四分之一宽大于 1200px 时占二分之一宽。大屏分辨率通常在 1920 以上所以真正起作用的是col-xl这一档div classcontainer-fluid div classrow idmetricRow div classcol-xl-3 col-lg-6今日门急诊量/div div classcol-xl-3 col-lg-6在院人数/div div classcol-xl-3 col-lg-6手术台次/div div classcol-xl-3 col-lg-6床位使用率/div /div div classrow div classcol-xl-4科室挂号占比/div div classcol-xl-8近 30 日门急诊趋势/div /div /div这段布局里container-fluid去掉了固定宽度限制让页面铺满整个大屏col-xl-4和col-xl-8用来控制左右面板的宽窄比。若想中间主图再突出一些可以把比率改成col-xl-3与col-xl-9。栅格只解决横向分配纵向高度必须由内部图表容器决定这里不要试图用row等分高度后面会专门讲容器高度的问题。2.2 指标卡和下拉筛选的 bootstrap 基础组件选择大屏顶部指标卡不是一个单独的 bootstrap 组件常规做法是用jumbotron、card或纯自定义div组合。考虑到 rar 里的源码往往兼容老版本我建议优先使用.card因为它自带边框、内边距和阴影在深色大屏风格下只需覆写背景色即可。下拉筛选则几乎是所有医院大屏页面都会遇到的功能。科室筛选、时间粒度切换、传染病分类过滤这些交互用 bootstrap 的dropdown组件加 jquery 驱动。关键在于老版本 bootstrap 的下拉菜单是依赖 jquery 的这也是标题里把 jquery 和 bootstrap 并列的原因。bootstrap 3 和 bootstrap 4 使用>div classbtn-group button classbtn btn-primary dropdown-toggle typebutton>html, body { height: 100%; margin: 0; overflow: hidden; } .metric-panel { height: 120px; } .chart-wrapper { height: calc(100vh - 220px); } .chart-box { width: 100%; height: 100%; }这里100vh是视口高度减去顶部指标卡和标题栏的高度后剩余空间全部交给图表区。如果不加这一层ECharts 会经常出现“容器高度为 0图形画不出来”的问题。遇到这种问题不要先去调 ECharts先检查父级是否有确定高度。医院大屏切换分辨率后图表不居中多半也是这个原因这属于布局层的缓存失效而不是图表库本身的 bug。作者在源码头文件里常会给body设min-width: 1280px或更大防止在小屏上被挤压。这种做法在固定终端上没问题但如果你要临时用笔记本演示最好改成基于calc的等比缩放方案否则横向滚动条会逼着你在演示现场手动改分辨率。3. 用 ECharts 和 jquery 完成图表渲染与定时刷新3.1 页面初始化时 ECharts 实例的正确写法这类大屏源码的核心图表层几乎都交给 ECharts。用 jquery 初始化 ECharts 有一个常见误区直接把 DOM 对象传给echarts.init()但 jquery 对象不能直接用必须先取原生元素。正确写法是$(function () { var chartDom document.getElementById(mainTrend); var myChart echarts.init(chartDom); var option { tooltip: { trigger: axis }, xAxis: { type: category, data: [周一, 周二, 周三] }, yAxis: { type: value, name: 人次 }, series: [{ name: 门急诊量, type: line, smooth: true, data: [1200, 1320, 1410] }] }; myChart.setOption(option); });echarts.init第二个参数还能传主题深色大屏通常使用dark主题或者自定义注册主题。如果要动态加载主题文件记得在脚本引入顺序上把它放在 echarts 主文件之后否则会报找不到注册主题。图表一旦初始化完成后续更新数据不需要重新init只需再次setOption否则每次刷新都会重建整个图表消耗内存且画面闪烁。3.2 定时刷新与页面可见性大屏不是无脑 setInterval医院大屏的数据需要不断更新但更新频率不能一刀切。十个并发病房数据可以一分钟刷一次门急诊量和床位状态这类指标五分钟刷一次也合理。直接对所有图表统一setInterval会造成请求风暴尤其是后端接口未经缓存时容易把 HIS 的数据库连接池打满。我的做法是把所有图表的刷新函数收集到一个refresher容器里由统一控制器调度var refresher { timers: [], add: function (fn, interval) { fn(); this.timers.push(setInterval(fn, interval)); }, stopAll: function () { this.timers.forEach(clearInterval); this.timers []; } }; refresher.add(function () { $.getJSON(/api/outpatient/trend, function (data) { trendChart.setOption({ series: [{ data: data.series }] }); }); }, 60000);refresher.add里先执行一次fn()是为了避免页面打开后要等一个刷新周期才有数据。停止所有定时器的方法在单页应用切换路由或页面隐藏时非常有用。还有一个容易漏的细节浏览器后台标签页的定时器会降频当从后台切回大屏页面时图表可能有一大段时间没更新。结合visibilitychange事件做一次立即刷新是比较稳妥的做法document.addEventListener(visibilitychange, function () { if (!document.hidden) { trendChart.resize(); refreshOutpatientData(); } });3.3 大屏自带 resize 机制的实现拼接屏或窗口模式切换时ECharts 不会自动适应容器大小必须调用resize()。多数源码只在window.resize里做一次这在普通网页里足够但大屏页面如果包含侧边栏折叠操作图表容器宽度变化而 window 尺寸没变resize就不会触发。更可靠的做法是用封装好的自适应函数统一挂到window.onresize上同时给每个图表实例做好防抖。var resizeTimer; window.addEventListener(resize, function () { clearTimeout(resizeTimer); resizeTimer setTimeout(function () { trendChart.resize(); pieChart.resize(); deptChart.resize(); }, 200); });200 毫秒的防抖延迟是为了避免拼接屏切换分辨率时连续触发几十次resize导致主线程阻塞。如果图表数量多到上百个逐个resize仍然会卡此时应只针对可视区域内的图表容器调用resize。不过医院大屏一般三到六张图上面的写法已经够用。js 报错集中出现在这里时多半是某个图表实例在隐藏的 tab 页里初始化失败echarts.getInstanceByDom()返回了空对象调用前最好做一个非空判断。4. 医院大屏的数据接入ajax、mock 数据与下拉联动4.1 没有后端接口时先用 mock 数据把页面撑起来一份能直接交付的医院大数据展示源码一般不会把真实接口写在页面里而是用 mock 数据文件代替方便没有后端时先看效果。常见做法是在项目根目录放一个data/目录里面是若干个 json 文件页面通过$.getJSON读本地文件。这里要特别注意直接双击 html 用file://协议打开时浏览器会拦截 ajax 请求医院环境里最常见的报错就是Cross origin requests are only supported for protocol schemes。源码虽然能解压但不代表直接双击就能看必须用 nginx、python -m http.server或任意静态服务容器挂在 http 协议下访问。mock 数据文件的结构要贴近真实接口。下面是一份门急诊趋势数据的示例{ dateRange: [2025-05-01, 2025-05-30], unit: 人次, series: [1800, 1930, 2015, 2210, 2080, 2330], deptRank: [ { dept: 呼吸科, count: 3421 }, { dept: 心内科, count: 2891 } ] }字段命名建议与后端约定保持完全一致因为后续接真实接口时前端大概率只替换接口地址而不改解析逻辑。deptRank这类排行榜数据尤其要保证数组顺序按数值倒序因为图表侧不一定负责排序。字段名、类型和含义需要一份内部核对表每次对接接口时按表排查比逐行读代码快得多。下面列的是医院大屏里最常见的三类字段字段名类型含义常见误区deptstring科室名称前后端命名不一致如 dept vs departmentcountnumber数量被当作字符串返回图表会显示 NaNtimestampstring统计时间未做时区处理跨院区时偏差 1 小时4.2 下拉筛选与数据刷新联动change 事件绑定的典型误区下拉菜单选中某个科室后图表和指标卡要同步更新这是医院大屏最核心的交互逻辑。bootstrap 的dropdown-menu里的每一项点击后需要自己把选中的科室名记录下来再重新请求接口。一种常见做法是给每个li a挂单独click事件但页面里如果动态追加下拉项这种写法就失效了必须换成事件委托$(document).on(click, #deptMenu a[data-value], function (e) { e.preventDefault(); var dept $(this).data(value); $(#deptLabel).text(dept); $.getJSON(/api/outpatient/month, { dept: dept }, function (data) { trendChart.setOption({ xAxis: { data: data.dateRange }, series: [{ data: data.series }] }); }); });这里用$(document).on(...)把事件绑定在document上即使#deptMenu里的列表项被整体替换也能捕获到点击。取所选值时用$(this).data(value)而不是attr(data-value)前者会自动做类型转换数字字符串会变成数字这对后续接口参数拼接更友好。点击下拉项后记得调用e.preventDefault()否则a标签的默认跳转会刷新页面刚拉到的数据瞬间丢失。还有一个经常被忽略的问题下拉筛选触发多次请求时上一次未完成的请求可能先回来把新一次的结果覆盖掉。解决方式是给 jquery 的ajaxSetup配置一个递增序列号或者在$.getJSON回调里判断发起时的时间戳是否为最新。简单场景下可以这样处理var reqSeq 0; function fetchByDept(dept) { var currentSeq reqSeq; $.getJSON(/api/outpatient/month, { dept: dept }, function (data) { if (currentSeq ! reqSeq) return; trendChart.setOption({ series: [{ data: data.series }] }); }); }4.3 表格、列表的动态渲染与 jquery 选择器性能大屏左下角通常有“科室挂号量排行”或“药占比列表”。这类列表用 jquery 渲染最直接但不建议用字符串拼接后一次性append更不要在每个tr里写onclick。我会先用数组map出 HTML再一次性插入到 tbody这样减少 DOM 操作次数var rowsHtml data.deptRank.map(function (item) { return trtd item.dept /tdtd item.count /td/tr; }).join(); $(#rankBody).html(rowsHtml);这些th里的顺序和接口返回字段顺序要保持一致一旦后端字段名变化表格列头和数据对不上是必然事件排查时先看浏览器 Network 面板返回的实际 json再对照表头检查。在数据量大、需要刷新频繁的页面上$(#rankBody).html(...)比逐行.append()更划算因为前者只触发一次回流后者每 append 一行都会触发一次。5. 解压后立即能跑的验证顺序起服务、看图表、压内存5.1 在本地起一个静态服务代替直接打开 html拿到 rar 解压后的目录先不要急着进index.html用一条命令起一个静态服务。最简单的方案是用 python 自带的 http 模块路径切到项目目录下即可cd hospital-dashboard python -m http.server 8080然后访问http://localhost:8080。如果机器上没装 python可以用 nginx 在conf/nginx.conf里把root指向解压目录或者用 npxhttp-server。这一步只为了解决两个问题一是绕开file://禁止跨域读取 json 的限制二是确保页面里的 HTTP 请求走相对路径正常解析。我见过不少源码压缩包在写接口时用的是绝对路径/api/...直接双击打开时路径解析到磁盘根目录页面一片空白但 Network 面板里什么都没有起服务后立刻恢复正常。5.2 用 Performance 面板验证主线程占用和定时器膨胀大屏页面一般会长时间挂在电视或拼接墙上内存泄漏最典型的表现是运行两三天后页面变得卡顿。打开 Chrome DevTools 的 Performance 面板点录制操作一遍科室下拉切换、时间粒度切换、页面切后台再切回观察 Main 线程的红色长任务是否出现在每个setInterval触发的瞬间附近。如果红色任务多且长优先检查每个图表是否在setOption时传入了完整的新 option而不是只传变化的字段。完整重建 option 会让 ECharts 内部保留大量旧数据内存占用随刷新次数线性增长。医院大屏的图表数据最多几万个点远没有到需要 WebGL 渲染的地步但这个泄漏点非常普遍。5.3 压缩交付前的三项核对图表容器高度、下拉事件、接口地址源码准备重新打包成 rar 交付时我通常按下面的顺序做最后一轮检查。先输入一段脚本确认所有图表容器都有非零高度document.querySelectorAll(.chart-box).forEach(function (el) { if (el.clientHeight 0) { console.warn(height 0:, el); } });再检查下拉菜单的style="width:16px;margin-left:4px;vertical-align:text-bottom;cursor:text;" />