当在 react 应用中渲染多个 echarts 图表时，使用 `window.onresize` 监听窗口大小变化会导致只有最后一个图表能够响应式调整。这是因为 `onresize` 属性会被反复覆盖。本教程将详细解释此问题，并提供使用 `window.addeventlistener` 的正确解决方案，确保所有 echarts 实例都能在窗口调整时正确重绘。
在 React 应用中集成 Echarts 并实现其响应式布局是常见的需求。然而，当页面上存在多个 Echarts 实例时，开发者可能会遇到一个问题：只有其中一个图表能在浏览器窗口大小调整时正确重绘。本文将深入探讨这一问题的原因，并提供一个健壮的解决方案。
提供的代码示例中，每个 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 来注册事件监听器。与 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;代码解释：
事件监听器清理: 务必在组件卸载时通过 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 响应式应用。
以上就是React 多 Echarts 实例窗口调整大小失效问题的解决方案的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
872
收藏
