响应式图表需图表库自身控制重绘：chart.js须设responsive:true且容器有明确width；echarts需手动resize()；google charts需重draw()；高dpr下图标和导出须适配像素比。
复杂数据图表在响应式布局中不能靠 CSS 强拉缩放，必须由图表库自身控制尺寸和重绘逻辑；否则会出现模糊、错位、交互失效或内存泄漏。
Chart.js 的 responsive 配置必须设为 true 且容器有明确 width
Chart.js 默认不自动响应容器变化，responsive: true 是开关，但仅此不够——父容器（比如 <div>）必须有可计算的 <code>width（不能是 max-content 或未设宽的 flex 项），否则 canvas 渲染尺寸为 0。
-
maintainAspectRatio: false建议关闭，否则小屏下高度被强制压缩导致图表压扁 - 避免给 canvas 元素直接写
width/height属性，会覆盖 Chart.js 的动态计算 - 若用 Grid/Flex 布局嵌套图表，确保外层容器设置了
min-width: 0（防止 flex item 不收缩）
ECharts 的 resize() 要绑定到窗口和容器尺寸变化
ECharts 不像 Chart.js 那样监听容器 resize，默认只响应 window.resize。当图表放在 tab 切换页、折叠面板或 Grid 子项里时，容易出现“空白”或“尺寸错乱”。
- 手动调用
myChart.resize()，推荐在IntersectionObserver回调或ResizeObserver中触发 - 不要依赖
window.addEventListener('resize', ...)单一监听，它无法捕获非窗口级尺寸变化 - 初始化时传入
renderer: 'canvas'（默认值），svg模式在复杂交互下性能更差且缩放支持弱
Google Charts 在响应式容器中需主动 redraw 而非 reflow
Google Charts 的 draw() 方法不会自动适配容器尺寸变更，且没有内置 resize 监听。常见错误是只改了 div 宽度，却没重新 draw()，导致图表内容溢出或留白。
- 每次容器尺寸变化后，必须调用
chart.draw(data, options)，不能只调chart.redraw() - data 和 options 必须是新引用（哪怕内容相同），否则内部 diff 可能跳过重绘
- 避免在
DOMContentLoaded之前调用google.charts.load，否则异步加载完成时容器可能尚未渲染
所有图表库共用的坑：图片/图标资源在 DPR > 1 下模糊
图表里的自定义图标、导出 PNG、tooltip 中的 img 标签，如果没按设备像素比提供高分图，Retina 屏上会明显发虚——这不是图表库的问题，而是资源适配缺失。
- 用
window.devicePixelRatio动态加载 @2x 图标，或统一用 SVG 替代 raster 图片 - 导出功能（如 Chart.js 的
toBase64Image()）需传入scale: window.devicePixelRatio参数 - tooltip 中插入
时，务必用
srcset+sizes，不能只写src
真正难的不是让图表“看起来缩放了”，而是让它在不同断点下保持语义清晰、交互精准、资源清晰——这要求你既懂布局系统，也得深入图表库的生命周期和渲染机制。容器尺寸变化只是表象，重绘时机和资源上下文才是关键。
