flex容器设width:100%无法使图表自适应，因css缩放不触发重绘；必须用resizeobserver监听尺寸变化，同步更新canvas宽高或调用chart.resize()等方法重绘。
直接用 flex + 百分比宽度做图表容器，无法让图表本身（如 Canvas、SVG 或第三方库渲染区域）真正自适应——它只缩放容器，不触发图表重绘。必须配合 JS 监听尺寸变化并主动调用 resize 方法，否则图表会模糊、错位或留白。
为什么 flex 容器设了 width: 100% 图表还是不缩放
Flex 布局控制的是容器的排布和空间分配，但像 <canvas></canvas>、<svg></svg> 或 ECharts / Chart.js 的渲染容器，其内部绘图逻辑依赖明确的像素尺寸（width 和 height 属性值或 canvas 的 width/height DOM 属性）。仅靠 CSS 百分比只会拉伸画布，不重绘内容，结果就是锯齿、文字挤压或坐标错乱。
- Canvas 元素：CSS
width/height只是缩放显示，真实绘图区域由canvas.width和canvas.height决定 - SVG：需同时设置
viewBox和width/height，否则比例失真 - Chart.js：必须显式调用
chart.resize()，且推荐在resize事件节流后执行
flex + 百分比容器的正确写法
容器层可以放心用 Flex 做响应式布局，但要为图表留出「可测量」的上下文，避免 flex: 1 导致高度塌陷或宽高比失控。
- 外层 flex 容器设
min-width: 0，防止子项不收缩（尤其 Safari 下） - 图表容器加
flex-shrink: 0，避免被 flex 压缩到 0 高度 - 用
aspect-ratio（现代浏览器）或 padding-bottom 技巧维持宽高比，比如 16:9：padding-bottom: 56.25% - 不要对
<canvas></canvas>直接设width: 100%；应设display: block; width: 100%并在 JS 中同步更新canvas.width和canvas.height
监听 resize 并触发图表重绘的关键点
原生 resize 事件不冒泡，不能绑定在非 window 元素上；图表容器尺寸变化需靠 ResizeObserver 捕获，比 window.addEventListener('resize') 更精准、低开销。
-
ResizeObserver回调中拿到的是 content-box 尺寸，不是 border-box，注意是否含 padding - Chart.js v4+ 支持自动响应容器尺寸（需开启
responsive: true和maintainAspectRatio: false），但仍建议手动调用chart.update('active')确保动画同步 - ECharts 必须调用
echart.resize()，且最好传入 {silent: true} 避免重复动画 - 避免在每次 resize 回调里直接重绘——加 100ms 节流，或用
requestAnimationFrame延迟到下一帧
一个最小可用的 Canvas 自适应示例
假设你用原生 <canvas></canvas> 绘制折线图：
const canvas = document.querySelector('#myChart');
const ctx = canvas.getContext('2d');
<p>function resizeCanvas() {
const rect = canvas.parentElement.getBoundingClientRect();
canvas.width = rect.width <em> window.devicePixelRatio;
canvas.height = rect.height </em> window.devicePixelRatio;
ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
drawChart(); // 你的绘图逻辑
}</p><p>const ro = new ResizeObserver(resizeCanvas);
ro.observe(canvas.parentElement);</p><p>// 初次渲染
resizeCanvas();</p>
这里关键不是 flex 容器怎么写，而是 canvas.width/canvas.height 是否随父容器实时更新，并考虑了设备像素比。漏掉 devicePixelRatio，高清屏下图表就会发虚。
真正卡住人的从来不是 flex 怎么排，而是图表库是否在尺寸变化后“知道自己该重画”。所有封装好的图表组件，底层都逃不开这个逻辑：容器变 → 尺寸读取 → 渲染参数重置 → 重绘。别跳过中间两步。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
