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。
