根因是flex子项默认min-width: auto阻止收缩，需设min-width: 0（ie11用1px）；同时必须配合resize()节流调用及resizeobserver监听容器变化。
flex子项里多个ECharts图表缩放失效的根因
根本不是ECharts没响应，而是flex默认不压缩子项宽度——当父容器变窄时，flex-item 会优先保持内容最小宽度（即图表渲染所需最小尺寸），导致无法缩小。单个图表能缩，是因为它独占整个 flex-item，而多个并列时，flex会按内容撑开，彼此“抢空间”，最终卡死。
必须加 min-width: 0 才能触发收缩
Flex子项默认 min-width: auto，会阻止内部内容（比如canvas）被压缩。只要给每个装图表的 flex-item 加上：
.chart-wrapper {
min-width: 0;
}
就能让浏览器允许它随父容器一起收缩。注意不是给图表容器（#chart）加，而是给它的直接父级 flex 子项加。
- 如果用的是
display: flex的el-row或div，就给那个el-col或div加min-width: 0 - 别只写
width: 100%，它对 flex 子项无效；flex: 1也不够，必须配min-width: 0 - IE11 不支持
min-width: 0，需降级用min-width: 1px替代
resize() 调用时机和参数不能省
即使CSS让容器能缩了，ECharts 还得主动重算画布尺寸。直接在 window.onresize 里调 myChart.resize() 很危险——高频触发会导致重绘抖动、CPU飙升。
ECharts Master
下载
ECharts 图表大师。根据用户数据和业务上下文，自动设计并生成专业的 ECharts 可视化图表。使用场景：(1) 用户提供表格/JSON/CSV 数据需要可视化，(2) 用户说"帮我做个图"、"画个图表"，(3) 需要将查询结果可视化展示。
- 必须节流：用
debounce包一层，延迟 100ms 再执行 - 传参推荐
{silent: true}，避免每次 resize 都触发动画重播 - 如果父容器是卡片可拖拽拉伸的，仅监听
window.onresize不够，得配合ResizeObserver监听具体容器
Vue中 ref + ResizeObserver 是更稳的选择
在 Vue2/3 中，用 ref 拿到图表 DOM 后，直接用 ResizeObserver 监听其尺寸变化，比全局监听 window 更精准，也避免侧边栏展开等非窗口 resize 场景漏掉。
关键点：
-
ResizeObserver实例必须在mounted创建，beforeUnmount销毁，否则内存泄漏 - observe 的目标是图表容器 DOM 元素，不是
echarts.init返回的实例 - 回调里调
myChart.resize({silent: true})，别忘了加silent
flex 布局下自适应真正的难点不在 ECharts 本身，而在于你是否意识到：flex 子项的收缩能力是被 CSS 默认行为锁住的，且这个锁必须手动打开。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
