实时监控大屏KPI指标看板与ECharts图表集成 - 第4节
4.1 大屏布局设计原则与Bootstrap 5栅格系统
实时监控大屏的布局核心在于信息层级清晰与响应式适配。Bootstrap 5的栅格系统基于12列弹性容器，通过container、row、col-*类快速搭建自适应骨架。大屏通常分为三个视觉区域：顶部标题栏、中部KPI卡片区、底部图表区。
设计要点：大屏布局应优先考虑横向扩展，利用
col-xl-*、col-lg-*等断点类控制不同屏幕尺寸下的列宽，确保在1920×1080及以上分辨率下展示完整信息。
4.1.1 栅格系统核心断点与列分配
| 断点名称 | 最小宽度 | 容器宽度 | 适用设备 |
|---|---|---|---|
xs |
<576px | 100% | 手机竖屏 |
sm |
≥576px | 540px | 手机横屏 |
md |
≥768px | 720px | 平板竖屏 |
lg |
≥992px | 960px | 平板横屏/小屏笔记本 |
xl |
≥1200px | 1140px | 标准桌面显示器 |
xxl |
≥1400px | 1320px | 大屏/宽屏显示器 |
实战建议：大屏项目通常以
xl和xxl断点为主，KPI卡片区使用col-xl-3 col-xxl-2实现一行4~6个卡片，图表区使用col-xl-6 col-xxl-4实现双列或三列图表布局。
4.1.2 大屏骨架栅格分配SVG结构图
4.2 顶部标题栏实现
标题栏使用container-fluid全宽容器，内部嵌套row和col-12，配合bg-dark、text-white等工具类快速完成深色背景标题区。标题栏通常包含系统名称、时间显示、状态指示灯等元素。
<!-- 顶部标题栏 -->
<div class="container-fluid bg-dark text-white py-3">
<div class="row align-items-center">
<div class="col-12 col-md-6 text-center text-md-start">
<h1 class="h3 mb-0">实时监控大屏 KPI 指标看板</h1>
</div>
<div class="col-12 col-md-6 text-center text-md-end">
<span id="current-time" class="badge bg-light text-dark fs-6">--:--:--</span>
<span class="badge bg-success ms-2">系统运行中</span>
</div>
</div>
</div>
注意：标题栏的
py-3垂直内边距在移动端可能过大，建议使用py-2 py-md-3实现响应式内边距，避免小屏设备标题栏占用过多高度。
4.3 中部KPI卡片区布局
KPI卡片区使用row包裹多个col-xl-3 col-lg-4 col-md-6列，每个列内放置一个卡片组件。卡片内部包含指标名称、数值、趋势图标和环比变化。利用Bootstrap的card组件和shadow-sm类快速构建视觉层次。
4.3.1 KPI卡片HTML结构
<!-- KPI卡片区 -->
<div class="container-fluid py-4">
<div class="row g-3">
<!-- 卡片1：CPU使用率 -->
<div class="col-xl-3 col-lg-4 col-md-6">
<div class="card shadow-sm h-100">
<div class="card-body text-center">
<h6 class="card-subtitle text-muted mb-2">CPU 使用率</h6>
<h2 class="card-text text-primary mb-0">67.5%</h2>
<small class="text-success">↑ 2.3%</small>
</div>
</div>
</div>
<!-- 卡片2：内存使用率 -->
<div class="col-xl-3 col-lg-4 col-md-6">
<div class="card shadow-sm h-100">
<div class="card-body text-center">
<h6 class="card-subtitle text-muted mb-2">内存使用率</h6>
<h2 class="card-text text-success mb-0">45.2%</h2>
<small class="text-danger">↓ 1.8%</small>
</div>
</div>
</div>
<!-- 卡片3：磁盘IO -->
<div class="col-xl-3 col-lg-4 col-md-6">
<div class="card shadow-sm h-100">
<div class="card-body text-center">
<h6 class="card-subtitle text-muted mb-2">磁盘 IO</h6>
<h2 class="card-text text-warning mb-0">234 MB/s</h2>
<small class="text-success">↑ 5.6%</small>
</div>
</div>
</div>
<!-- 卡片4：网络流量 -->
<div class="col-xl-3 col-lg-4 col-md-6">
<div class="card shadow-sm h-100">
<div class="card-body text-center">
<h6 class="card-subtitle text-muted mb-2">网络流量</h6>
<h2 class="card-text text-info mb-0">1.2 Gbps</h2>
<small class="text-danger">↓ 0.4%</small>
</div>
</div>
</div>
</div>
</div>4.3.2 KPI卡片响应式行为SVG示意图
4.4 底部图表区布局
图表区通常放置ECharts实例，每个图表容器需要固定高度（推荐height: 350px）和col-xl-6 col-xxl-4等列宽。使用card包裹图表容器，保持与KPI卡片一致的视觉风格。
4.4.1 图表区HTML结构
<!-- 底部图表区 -->
<div class="container-fluid py-4">
<div class="row g-3">
<!-- 图表1：折线图 -->
<div class="col-xl-6 col-xxl-4">
<div class="card shadow-sm">
<div class="card-header bg-transparent">
<h6 class="mb-0">CPU 使用率趋势</h6>
</div>
<div class="card-body">
<div id="chart-cpu" style="height: 350px;"></div>
</div>
</div>
</div>
<!-- 图表2：柱状图 -->
<div class="col-xl-6 col-xxl-4">
<div class="card shadow-sm">
<div class="card-header bg-transparent">
<h6 class="mb-0">内存分区使用</h6>
</div>
<div class="card-body">
<div id="chart-memory" style="height: 350px;"></div>
</div>
</div>
</div>
<!-- 图表3：饼图 -->
<div class="col-xl-6 col-xxl-4">
<div class="card shadow-sm">
<div class="card-header bg-transparent">
<h6 class="mb-0">服务状态分布</h6>
</div>
<div class="card-body">
<div id="chart-service" style="height: 350px;"></div>
</div>
</div>
</div>
</div>
</div>
性能提示：图表容器必须设置明确高度（如
height: 350px），否则ECharts无法正确渲染。建议使用min-height配合百分比高度，确保在容器未完全加载时图表不会塌缩。
4.5 完整响应式布局整合
将标题栏、KPI卡片区、图表区放入一个container-fluid中，利用Bootstrap的g-3（gap）控制间距，py-4控制垂直内边距。整个大屏骨架无需手写媒体查询，完全依赖Bootstrap 5的栅格断点实现响应式。
4.5.1 布局整合代码
<!-- 完整大屏骨架 -->
<div class="container-fluid p-0">
<!-- 顶部标题栏 -->
<div class="bg-dark text-white py-3 px-4">
<div class="row align-items-center">
<div class="col-12 col-md-6 text-center text-md-start">
<h1 class="h4 mb-0">实时监控大屏 KPI 指标看板</h1>
</div>
<div class="col-12 col-md-6 text-center text-md-end">
<span id="clock" class="badge bg-light text-dark fs-6 px-3">--:--:--</span>
</div>
</div>
</div>
<!-- KPI卡片区 -->
<div class="px-4 py-3">
<div class="row g-3">
<div class="col-xl-3 col-lg-4 col-md-6">
<div class="card shadow-sm h-100 border-0">
<div class="card-body text-center">
<h6 class="text-muted mb-2">CPU 使用率</h6>
<h2 class="text-primary mb-0">67.5%</h2>
<small class="text-success">↑ 2.3%</small>
</div>
</div>
</div>
<!-- 其余KPI卡片同上 -->
</div>
</div>
<!-- 图表区 -->
<div class="px-4 pb-4">
<div class="row g-3">
<div class="col-xl-6 col-xxl-4">
<div class="card shadow-sm border-0">
<div class="card-header bg-white border-bottom">
<h6 class="mb-0">CPU 趋势</h6>
</div>
<div class="card-body p-2">
<div id="chart1" style="height: 350px;"></div>
</div>
</div>
</div>
<!-- 其余图表同上 -->
</div>
</div>
</div>4.5.2 响应式布局断点行为SVG流程图
4.6 常见布局问题与避坑指南
| 问题 | 原因 | 解决方案 |
|---|---|---|
| 图表容器高度为0 | 未设置固定高度或父容器未加载完成 | 使用style="height: 350px; min-height: 300px;" |
| KPI卡片高度不对齐 | 卡片内容高度不一致 | 添加h-100类使卡片填满列高 |
| 移动端标题栏换行错位 | 未使用响应式文本对齐类 | 使用text-center text-md-start控制对齐 |
| 图表区列间距过大 | 未使用g-3或g-2控制gap |
使用row g-2或row g-3统一间距 |
| 大屏下KPI卡片仍堆叠 | 未使用col-xl-*断点类 |
添加col-xl-3 col-xxl-2等大屏列类 |
最佳实践：开发时先使用浏览器开发者工具模拟不同设备宽度，验证栅格断点行为。建议从
xl断点开始设计，再向下适配lg、md，确保大屏体验优先。