图表自适应核心是监听窗口或容器尺寸变化并重绘：需设容器width:100%、动态控高、移除canvas/svg内联宽高；用节流resize事件+调用chart.resize()等方法；初始化后须立即resize；推荐resizeobserver监听容器尺寸。
图表随窗口大小自适应，核心是监听窗口尺寸变化，并及时重绘或调整图表容器及配置。不同图表库实现方式略有差异，但底层逻辑一致：响应 resize 事件 + 正确设置容器尺寸 + 调用图表的重绘/缩放方法。
确保图表容器宽度100%且高度可控
图表不能依赖固定像素宽高，否则无法随窗口伸缩。推荐用 CSS 设置容器为流式布局：
- 容器设 width: 100%，避免写死 width: 600px 这类值
- 高度建议用 min-height 或 JS 动态计算（如 window.innerHeight * 0.6），避免 height: 100% 在父元素无高度时失效
- 移除 canvas/svg 元素上的 width/height 内联属性（ECharts、Chart.js 等会自动设置，手动写反而干扰缩放）
监听 window.resize 并节流处理
直接绑定 resize 会导致高频触发，影响性能。需加简单节流：
JavaStoryDevelop
下载
你接手一个需求时，是不是经常这样："改一个小字段 → 结果把不相关的代码也改了"、"需求说得很模糊 → 做着做着发现跑偏了"、"数据库加个字段 → 上线才发现漏了数据兼容"、"做了个新功能 → 一个月后自己都忘了当时怎么设计的"、"写到一半被中断 → 再回来不知道从哪继续"；这个 Skill 就是专门解决这些问题的。 它会自动探测你的项目环境（JDK、Spring Boot、ORM、数据库、前端框架），记在
- 用 setTimeout + clearTimeout 实现基础节流（延迟 200ms 执行一次）
- 调用图表实例的 resize() 方法（ECharts）、update()（Chart.js）或 render()（ApexCharts）
- 示例（ECharts）：window.addEventListener('resize', () => { chart.resize(); });
初始化时也调用一次 resize
页面加载完成时图表可能已渲染，但此时容器尺寸未必是最终值（比如有懒加载内容、字体加载延迟）。务必在初始化后立即调用一次 resize：
- ECharts：chart.setOption(option); chart.resize();
- Chart.js：chart.update('active'); // 或 chart.resize()
- 确保 DOM 已挂载（如 Vue 中用 nextTick，React 中用 useEffect 的 cleanup 避免内存泄漏）
进阶：监听容器尺寸变化（可选）
当图表容器不是全屏、而是嵌套在 flex/grid 布局中时，window.resize 可能不够灵敏。可用 ResizeObserver 监听容器本身：
- 比 window.resize 更精准，只在目标元素尺寸变化时触发
- 兼容性良好（现代浏览器均支持，IE 不支持需 polyfill）
- 示例：new ResizeObserver(() => chart.resize()).observe(containerEl);
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
