Bootstrap负责布局与响应式，ECharts专注图表渲染；需用container-fluid替代container，确保图表容器有明确宽高并监听resize事件，避免缩放错位与重绘失效。
直接用 Bootstrap 搭大数据可视化看板，核心不是“能不能”，而是“别让 Bootstrap 干它不擅长的事”——它负责布局、响应式、组件结构和基础交互；ECharts（或 Chart.js）负责图表渲染；而数据加载、状态管理、主题联动这些得你手动串起来。硬套 Bootstrap 的 .card 或 .container 去塞全屏 ECharts 容器，90% 的人会遇到缩放错位、resize 失效、移动端图表挤压变形。
为什么不能直接用 container 包 ECharts 容器
Bootstrap 的 container 有固定最大宽度（如 1200px），而大数据看板往往需要全屏动态适配：横轴要拉满，纵轴要自适应高度，图表还得响应窗口 resize。用 container 会导致右侧留白、图例被截、tooltip 显示异常。
- 必须用
container-fluid作为最外层容器，再加h-100和overflow-hidden控制高度边界 - ECharts 实例的
setOption前，务必调用chart.resize()，且绑定window.addEventListener('resize', () => chart.resize()) - 如果用了
offcanvas或折叠侧边栏，ECharts 容器的父级需监听 sidebar 切换事件并手动触发resize()，否则图表不会重绘
echarts.init 时 DOM 容器必须有明确宽高
常见错误是把 <div id="chart"></div> 放在 .row > .col 里就完事，结果初始化时报 Cannot initialize ECharts: container is null or width/height is 0。因为 Bootstrap 栅格本身不给子元素设尺寸，纯靠 flex 或 float 流式计算。
- 给图表容器加内联样式：
style="width: 100%; height: 400px;"（高度不能是auto） - 或者用 CSS 类：
<div id="chart" class="w-100 h-100"></div>，但前提是其所有父级（包括.card-body）都设了h-100，且没有overflow: hidden意外截断 - 推荐做法：用
<div class="position-relative" style="height: 50vh;"><div id="chart" class="position-absolute w-100 h-100"></div></div>，避免栅格流式干扰
侧边栏折叠后图表区域不自动重绘怎么办
AdminLTE、CoreUI 这类模板的折叠逻辑只改 .col-md-3 → .col-md-2，但 ECharts 不知道 DOM 结构变了——它只认自己初始化时拿到的容器尺寸。
- 监听 Bootstrap 5 的
shown.bs.offcanvas或自定义折叠事件（如sidebar:toggled） - 在回调里执行：
if (chart && chart.resize) chart.resize() - 更稳妥的做法是用
MutationObserver监听图表容器的offsetWidth变化，变化超 10px 就触发resize() - 别依赖
setTimeout延迟 resize——折叠动画完成时间不确定，transitionend才是准确时机
移动端图表文字太小、点击区域难触发
ECharts 默认配置在手机上文字缩成一团、图例点不中、tooltip 移动卡顿，这不是 Bootstrap 的锅，但和它共存时容易忽略适配点。
- 初始化时传入
renderer: 'svg'（比canvas更适合小屏缩放和无障碍） - 在
title、legend、axisLabel等配置里显式设fontSize，别信默认值；例如：axisLabel: { fontSize: window.innerWidth - 移动端禁用
dataZoom的滑动手势，改用按钮控制，避免和页面滚动冲突 - 用
echarts.connect([chart1, chart2])同步 tooltip，但注意连接后所有图表都会响应 hover，小屏慎用
真正麻烦的从来不是“怎么画出一个柱状图”，而是当用户缩放浏览器、切后台再切回来、横竖屏切换、侧边栏收放、甚至系统字体缩放设置为 125% 时，图表是否还能稳住位置、文字是否可读、交互是否跟手。这些细节没被封装进任何 class 里，得你一条条补全。
