ECharts 在 Bootstrap 栅格中不显示或变形，主因是容器缺乏显式宽高导致初始化失败；需设固定 height（如 500px 或 70vh）、延迟初始化、监听 resize 并调用 resize()，Tab/Collapse 中须监听 shown 事件重绘。
为什么直接用 div 容器放 ECharts 会“不显示”或“变形”
Bootstrap 的栅格系统（如 .col-lg-6）默认设了 min-height: 1px 和 box-sizing: border-box，但 ECharts 图表依赖容器有明确的宽高才能初始化。如果父容器是响应式列且没设固定高度，echarts.init() 会拿到 0px 高度，渲染空白。
常见错误现象：Canvas is empty 控制台警告、图表只显示坐标轴无数据、缩放后内容错位。
- 确保 ECharts 容器元素有显式
height（不能只靠 Bootstrap 行高撑开） - 避免把
echarts.init()放在 DOM 加载前，尤其不要在$(document).ready()外调用 - 响应式场景下，必须监听
resize并手动调用myChart.resize()
如何让 ECharts 容器适配 Bootstrap 栅格宽度
Bootstrap 列（.col-*）本身是宽度自适应的，但 ECharts 不会自动监听其宽度变化。你需要把容器宽高控制权交还给 CSS，并用 JS 拦截尺寸变更。
推荐做法：给容器加固定类名 + CSS 高度，再用 JS 初始化时读取实际像素值。
<div class="row">
<div class="col-lg-8">
<div id="main-chart" class="echart-container"></div>
</div>
</div>
CSS 中定义：
.echart-container {
width: 100%;
height: 500px; /* 必须写死或用 vh */
min-height: 400px;
}
- 别用
height: 100%—— 父级若没显式高度，它会塌陷 - 大屏常用
height: 70vh配合min-height，兼顾不同屏幕 - 如果用 Flex 布局（如
.d-flex），需额外加flex: 1让容器占满剩余空间
初始化和响应式重绘的关键代码位置
ECharts 实例必须等容器真实挂载且尺寸稳定后再初始化；而窗口或父容器尺寸变化时，仅靠 CSS 无法触发重绘。
典型错误：在 $(document).ready() 里直接 echarts.init()，但此时 Bootstrap 的 JS 可能还没完成栅格计算（尤其用了 display: none 切换 tab 的情况）。
- 初始化前加一层检测：
if (document.getElementById('main-chart').offsetWidth === 0) return; - 绑定
window.addEventListener('resize', () => myChart.resize())是必须的 - 如果图表在 TabPane 或 Collapse 里，要在
shown.bs.tab/shown.bs.collapse事件后调用resize() - 避免高频 resize 触发重绘：加
throttle（例如 Lodash 的_.throttle(myChart.resize, 200)）
使用 Vue/React 时和 Bootstrap 的冲突点
Vue 的 v-if 或 React 的 conditional rendering 会让容器 DOM 被销毁重建，但 ECharts 实例不会自动销毁，容易导致内存泄漏或 init on null dom 错误。
关键处理逻辑不是“怎么嵌”，而是“什么时候清、什么时候建”：
- Vue 中：在
beforeUnmount钩子调用myChart.dispose()；onMounted中延迟 1 帧再 init（nextTick(() => initChart())） - React 中：
useEffect的清理函数必须返回myChart.dispose()；首次渲染用useEffect(() => { init(); return () => myChart?.dispose(); }, []) - Bootstrap 的
data-bs-toggle="tab"切换时，ECharts 容器可能被隐藏又显示，这时要监听shown.bs.tab并主动resize()
真正难的不是画图，是让图表活在 Bootstrap 的生命周期里 —— 它不关心你用什么框架，只认 DOM 是否真实存在、尺寸是否可读。
