如何将Bootstrap和ECharts图表库结合使用

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

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"> 下却不设高——.row 默认是 content-fit 高度
• 推荐写法：

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

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

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

• 在 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。