当在 react 应用中渲染多个 echarts 图表时，使用 `window.onresize` 监听窗口大小变化会导致只有最后一个图表能够响应式调整。这是因为 `onresize` 属性会被反复覆盖。本教程将详细解释此问题，并提供使用 `window.addeventlistener` 的正确解决方案，确保所有 echarts 实例都能在窗口调整时正确重绘。
在 React 应用中集成 Echarts 并实现其响应式布局是常见的需求。然而，当页面上存在多个 Echarts 实例时，开发者可能会遇到一个问题：只有其中一个图表能在浏览器窗口大小调整时正确重绘。本文将深入探讨这一问题的原因，并提供一个健壮的解决方案。
问题分析：window.onresize 的局限性
提供的代码示例中，每个 SimpleLine 组件内部都通过 useEffect 钩子注册了一个 window.onresize 事件监听器：
useEffect(() => {
window.onresize = function () {
chartInstance2.resize();
};
return () => {
chartInstance2 && chartInstance2.dispose();
};
}, []);window.onresize 是一个 DOM 属性，它只能存储一个事件处理函数。当多个 SimpleLine 组件被渲染时，每个组件都会尝试设置 window.onresize。由于 JavaScript 的赋值操作会覆盖之前的值，最终只有最后一个被渲染的组件所设置的 onresize 函数会生效。这意味着，当窗口大小改变时，只有最后注册的 chartInstance2.resize() 会被调用，导致其他图表无法响应。
解决方案：使用 window.addEventListener
解决此问题的关键在于使用 window.addEventListener 来注册事件监听器。与 onresize 不同，addEventListener 允许为同一个事件类型注册多个事件处理函数，它们会按照注册的顺序依次执行，而不会相互覆盖。
修改后的 useEffect 钩子应如下所示：
import React, { useRef, useEffect } from "react";
import * as echarts from "echarts";
// ... (其他代码保持不变)
function SimpleLine() {
const chartRef = useRef(null);
let chartInstance2 = null; // 使用 let 声明，以便在事件监听器中更新
// ... (图表配置和数据)
const renderChart = () => {
const renderedChartInstance = echarts.getInstanceByDom(chartRef.current);
if (renderedChartInstance) {
chartInstance2 = renderedChartInstance;
} else {
chartInstance2 = echarts.init(chartRef.current);
}
chartInstance2.setOption(option1, true);
};
useEffect(() => {
renderChart();
}, []); // 首次渲染图表
useEffect(() => {
// 定义事件处理函数
const handleResize = () => {
chartInstance2 && chartInstance2.resize();
};
// 注册事件监听器
window.addEventListener("resize", handleResize);
// 清理函数：在组件卸载时移除事件监听器和销毁图表实例
return () => {
window.removeEventListener("resize", handleResize);
chartInstance2 && chartInstance2.dispose();
};
}, [chartInstance2]); // 依赖 chartInstance2 确保监听器能访问到正确的实例
return (
<div ref={chartRef} style={{ width: "100%", height: "400px" }}></div>
);
}
export default SimpleLine;代码解释：
- chartInstance2 声明为 let: 确保 chartInstance2 在 renderChart 和 handleResize 函数中都能被正确访问和更新。
- handleResize 函数: 定义一个独立的函数来处理 resize 事件，它会调用当前组件的 chartInstance2.resize() 方法。
- window.addEventListener("resize", handleResize): 每个 SimpleLine 组件都会向 window 对象添加一个独立的 resize 事件监听器。当窗口大小改变时，所有注册的 handleResize 函数都会被调用，从而使每个图表实例都能独立地调整大小。
- window.removeEventListener("resize", handleResize): 在 useEffect 的清理函数中，必须使用 removeEventListener 来移除之前添加的监听器。这是 React 组件生命周期管理的最佳实践，可以防止内存泄漏和不必要的行为。
- 依赖数组 [chartInstance2]: 将 chartInstance2 添加到第二个 useEffect 的依赖数组中，确保当 chartInstance2 实例发生变化时（尽管在这个特定场景下它通常不会变，但为了严谨性），事件监听器能够重新注册以使用最新的实例。
注意事项与最佳实践
事件监听器清理: 务必在组件卸载时通过 removeEventListener 移除事件监听器。否则，即使组件已经从 DOM 中移除，其监听器仍然会存在，可能导致内存泄漏或对已销毁组件的引用，从而引发错误。
-
防抖 (Debouncing) 或节流 (Throttling): 窗口 resize 事件在用户拖动窗口时会频繁触发。对于性能敏感的应用，频繁调用 chartInstance.resize() 可能会导致性能问题。建议对 handleResize 函数进行防抖或节流处理，例如：
import { debounce } from 'lodash'; // 或者使用自定义的防抖函数 // ... useEffect(() => { const handleResize = debounce(() => { chartInstance2 && chartInstance2.resize(); }, 300); // 在300毫秒内只执行一次 window.addEventListener("resize", handleResize); return () => { window.removeEventListener("resize", handleResize); handleResize.cancel(); // 如果使用 lodash 的 debounce，需要取消待处理的调用 chartInstance2 && chartInstance2.dispose(); }; }, [chartInstance2]); Echarts 实例管理: echarts.getInstanceByDom(chartRef.current) 方法在 renderChart 中起到了关键作用。它确保如果图表已经初始化，就获取现有实例并更新配置；否则，就创建一个新的实例。这避免了重复初始化图表，保证了效率。
CSS 布局: 确保 Echarts 容器元素（例如 div）具有正确的 CSS 宽度和高度设置，以便 Echarts 能够计算出其渲染尺寸。style={{ width: "100%", height: "400px" }} 是一个好的起点，但可能需要根据实际布局进行调整。
总结
在 React 中处理多个 Echarts 实例的响应式调整时，避免使用 window.onresize，因为它会导致事件处理函数被覆盖。正确的做法是利用 window.addEventListener 为每个图表实例注册独立的 resize 事件监听器，并在组件卸载时进行清理。结合防抖/节流等优化手段，可以构建出高效且健壮的 Echarts 响应式应用。
