如何将Bootstrap与ECharts图表库结合使用？-Bootstrap教程-PHP中文网

bootstrap 栅格与 echarts 集成需手动处理容器尺寸、响应式重绘和 dom 就绪时机：初始化前须设明确宽高（如 style="width:100%;height:400px;"），折叠/标签页切换后调 resize()，window.resize 需节流，动态加载内容要确保 dom 插入完成后再 init。

如何将bootstrap与echarts图表库结合使用？

Bootstrap 的栅格和组件能直接套在 ECharts 容器上，但必须手动处理容器尺寸、响应式重绘和 DOM 就绪时机——否则图表不显示、拉伸变形或窗口缩放后空白。

确保 `echarts.init()` 时容器已有明确宽高

ECharts 不会自动读取 Bootstrap 的 col-* 类计算尺寸，初始化前容器若无 CSS 宽高（比如仅靠 col-12），echarts.init() 会返回空实例或渲染失败。

给图表容器加内联样式或独立 class，显式设 width: 100%; height: 400px;（不能只写 height: 100%，父级需有固定高度）
避免把 <div id="chart"></div> 直接放在 <div class="row"> 下却不设高——<code>.row 默认是 content-fit 高度

推荐写法：

<div class="col-12">
  <div id="chart" style="width: 100%; height: 400px;"></div>
</div>

监听 Bootstrap 折叠/标签页切换后的 `resize` 重绘

用 collapse 或 tab 切换内容时，被隐藏再展开的图表容器可能仍保持 0×0 尺寸，ECharts 不会自动感知，导致空白。

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

在 shown.bs.collapse 或 shown.bs.tab 事件回调里调用 myChart.resize()

如果多个图表共存，建议统一绑定到 document 并过滤目标容器：

$(document).on('shown.bs.tab', '[data-bs-toggle="tab"]', function() {
  if (window.myChart) myChart.resize();
});

别依赖 window.onresize 全局监听——折叠/标签页切换不触发它

用 `throttle` 节流 `window.resize` 避免高频重绘卡顿

Bootstrap 响应式布局下，浏览器缩放或横竖屏切换会高频触发 resize，直接在监听里调 myChart.resize() 可能造成渲染阻塞甚至报错 ResizeObserver loop limit exceeded。

用简单节流（如 16ms 间隔）包装重绘：

let resizeTimer;
$(window).on('resize', () => {
  clearTimeout(resizeTimer);
  resizeTimer = setTimeout(() => myChart?.resize(), 16);
});

注意：ECharts v5+ 内置了 resize({ silent: true })，可传 silent: true 减少动画开销
移动端双指缩放也可能触发 resize，节流同样必要

最常被跳过的其实是容器 DOM 就绪时机——用 $(document).ready() 或 DOMContentLoaded 初始化图表，但若图表区域由 Ajax 动态插入（比如通过 Bootstrap Modal 的 show.bs.modal 加载），就得等那个 DOM 真正 append 完再 init，否则 document.getElementById('chart') 是 null。