防抖函数用于避免resize事件频繁触发导致图表重绘卡顿或异常。因拖拽窗口时resize每秒触发数十次，直接调用chart.resize会重复耗时操作、引发闪烁或尺寸跳变。
防抖函数在图表自适应调整中，主要用于避免窗口频繁缩放（resize）触发过多的重绘，从而提升性能、防止卡顿或渲染异常。
为什么 resize 需要防抖
浏览器在拖拽窗口边框时，resize 事件可能每秒触发数十次。若每次都在回调里调用 chart.resize() 或重新计算布局，会导致：
- 重复执行耗时操作（如 DOM 计算、Canvas 重绘）
- 图表闪烁、尺寸跳变或未及时响应最终尺寸
- 在低性能设备上明显卡顿
基础防抖函数实现（无依赖）
一个轻量、可复用的防抖函数示例：
function debounce(fn, delay) {
let timer = null;
return function (...args) {
clearTimeout(timer);
timer = setTimeout(() => fn.apply(this, args), delay);
};
}
使用它包装图表重绘逻辑：
立即学习“Java免费学习笔记（深入）”；
const resizeChart = debounce(() => {
if (myChart) {
myChart.resize(); // ECharts 示例
// 或：myChart.width = container.clientWidth; myChart.render();
}
}, 200); // 延迟 200ms，等用户停止拖拽后再执行
window.addEventListener('resize', resizeChart);
结合图表库的实际适配要点
不同图表库略有差异，需注意：
-
ECharts：优先用
chart.resize()，它会自动读取容器宽高；确保容器有明确宽高（如width: 100%+ 父容器有高度） -
Chart.js：启用
responsive: true和maintainAspectRatio: false后，通常无需手动 resize；但若动态修改容器尺寸，仍建议防抖调用chart.update('active')或chart.resize() -
自定义 Canvas/SVG 图表：防抖后需主动读取容器
getBoundingClientRect()，再重设画布尺寸和坐标系
进阶：监听容器尺寸而非 window（推荐）
仅监听 window.resize 不够健壮——比如容器被其他 JS 改变尺寸、或页面内 Tabs 切换导致图表区域显隐。更可靠的方式是监听目标容器本身的变化：
- 用 ResizeObserver（现代浏览器支持良好）
- 配合防抖，避免连续回调
const chartContainer = document.getElementById('chart');
const resizeObserver = new ResizeObserver(
debounce(() => myChart?.resize(), 150)
);
resizeObserver.observe(chartContainer);
