Bootstrap 5+ 与 ECharts 集成需确保容器已挂载且尺寸可读，避免 jQuery 依赖冲突；须显式设置宽高、监听尺寸变化、适配主题、规范销毁实例，否则图表易空白或泄漏。
确认 Bootstrap 版本与 ECharts 加载顺序
Bootstrap 5+ 已移除 jQuery 依赖，而早期 ECharts 示例常默认用 jQuery 初始化容器，这会导致 echarts.init() 找不到 DOM 节点或报 Cannot read property 'getBoundingClientRect' of null。必须确保 ECharts 实例化时容器已挂载且尺寸可读。
- 在
document.addEventListener('DOMContentLoaded', ...)或 Vue/React 的mounted/useEffect中初始化图表，避开 Bootstrap 的 modal、tab 切换等延迟渲染区域 - 若图表放在
tab-pane fade或collapse内，需监听shown.bs.tab或shown.bs.collapse事件再调用myChart.resize() - 避免在
$(document).ready()里直接 init —— Bootstrap 5 不兼容 jQuery 绑定，且 DOM 可能尚未完成 layout
解决容器宽度为 0 导致图表空白
ECharts 依赖容器的 width/height 计算画布，而 Bootstrap 的 col- 类、card-body 或 flex 布局下，若容器未设显式宽高或未触发重排，echarts.init() 会渲染出空白 canvas（控制台无报错，但 myChart.getDom().offsetWidth 返回 0）。
- 给图表容器加
style="width: 100%; height: 400px;"，不要只靠col-12或flex-fill - 使用
resizeObserver监听容器变化（尤其在响应式折叠栏展开后），比定时器更可靠：const ro = new ResizeObserver(() => myChart.resize()); ro.observe(document.getElementById('chart-container')); - 在 Bootstrap Modal 中显示图表？先
show模态框，再setTimeout(() => myChart.resize(), 100)，因为 modal 的show是 CSS transition 触发的，DOM 尺寸滞后
适配 Bootstrap 主题色与字体
ECharts 默认配色和字体与 Bootstrap 的 $primary、$body-font-family 不一致，硬套主题易造成视觉割裂。不建议全局覆盖 CSS，应通过配置项对齐。
- 颜色统一：用 Bootstrap 的 CSS 变量注入 options，例如
color: [getComputedStyle(document.documentElement).getPropertyValue('--bs-primary')] - 字体继承：设置
textStyle: { fontFamily: 'var(--bs-body-font-family)' }，避免中文字体 fallback 失败 - 图例/坐标轴文字大小建议设为
14px（匹配 Bootstrap.small），避免用rem导致缩放异常 - 禁用 ECharts 自带阴影（
shadowBlur: 0），否则在 Bootstrap 卡片浅灰背景上显得突兀
处理动态数据更新与销毁泄漏
后台页面常需轮询或 WebSocket 推送数据，反复调用 setOption() 不清理旧实例，会导致内存泄漏和图表错位（尤其多个 tab 切换时）。
- 每次创建前检查是否存在旧实例：
if (window.myChart) window.myChart.dispose(); window.myChart = echarts.init(dom);
- 在 Bootstrap Tab 切换时销毁非活跃 tab 的图表：
$('#myTab a[data-bs-toggle="tab"]').on('hide.bs.tab', e => { if (e.target.hash === '#chart-tab') chartInstance?.dispose(); }) - 用
setOption(option, { notMerge: true, replaceMerge: ['series'] })替代全量重绘，减少重计算开销 - 避免在
setInterval回调里频繁调用myChart.setOption()—— 先做防抖或节流，尤其 series 数据量大时
ECharts 和 Bootstrap 都不主动管理对方生命周期，集成的关键不是“怎么加”，而是“什么时候加、加完怎么守”。最常被忽略的是容器尺寸状态和实例销毁时机——这两个点卡住，图表就永远停留在“看起来该有，但实际为空”的状态。
