本文探讨了在React应用中集成多个ECharts图表时，因`window.onresize`事件处理方式不当导致只有一个图表响应窗口缩放的问题。通过分析其覆盖机制，提出并演示了使用`window.addEventListener`注册事件监听器的解决方案，确保所有ECharts实例都能正确响应页面尺寸变化，并强调了事件清理的重要性，以优化性能和避免内存泄漏。
在React中集成ECharts图表
在现代前端应用中，数据可视化是不可或缺的一部分。ECharts作为一款功能强大的图表库，常与React等框架结合使用。通常，我们会在React组件中使用useRef来获取DOM元素引用，并通过useEffect钩子来初始化和渲染ECharts实例。
以下是一个典型的React ECharts组件结构：
import React, { useRef, useEffect } from "react";
import * as echarts from "echarts";
function SimpleLine() {
const chartRef = useRef(null);
let chartInstance = null; // 用于存储ECharts实例
// ECharts配置项
const option = {
// ... 具体的图表配置
xAxis: {
type: "category",
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
},
yAxis: {
type: "value"
},
series: [{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line'
}]
};
// 渲染或更新图表
const renderChart = () => {
const renderedChartInstance = echarts.getInstanceByDom(chartRef.current);
if (renderedChartInstance) {
chartInstance = renderedChartInstance;
} else {
chartInstance = echarts.init(chartRef.current);
}
chartInstance.setOption(option, true);
};
// 组件挂载时渲染图表
useEffect(() => {
renderChart();
}, []);
// ... 省略窗口缩放处理部分
// ...
return (
<div ref={chartRef} style={{ width: "100%", height: "400px" }}></div>
);
}
export default SimpleLine;多ECharts实例的窗口缩放困境
当我们在一个页面中渲染多个SimpleLine组件时，例如：
import { CContainer, CRow } from "@coreui/react";
import SimpleLine from "./chart1"; // 假设chart1.js就是上面的SimpleLine组件
export default function App2() {
return (
<div className="App">
<CContainer fluid>
<CRow>
<SimpleLine /> {/* 第一个图表 */}
</CRow>
<CRow>
<SimpleLine /> {/* 第二个图表 */}
</CRow>
</CContainer>
</div>
);
}我们期望当浏览器窗口大小改变时，所有ECharts图表都能自动调整大小以适应新的布局。为了实现这一功能，一个常见的做法是在组件内部监听window的resize事件，并在事件触发时调用ECharts实例的resize()方法。
然而，如果按照以下方式处理窗口缩放，你可能会发现只有一个图表能够正确响应：
// 在SimpleLine组件内部的useEffect中
useEffect(() => {
window.onresize = function () {
chartInstance.resize(); // 问题所在：直接赋值给onresize
};
return () => {
chartInstance && chartInstance.dispose();
};
}, []);根源分析：window.onresize的覆盖机制
出现上述问题的原因在于window.onresize属性的特性。window.onresize是一个DOM事件属性，它只能绑定一个事件处理函数。当多个组件都尝试通过window.onresize = function() { ... }来设置其事件处理函数时，后一个组件的赋值会覆盖前一个组件的赋值。
例如，如果有两个SimpleLine组件：
- 第一个SimpleLine组件挂载时，执行window.onresize = function() { chartInstance1.resize(); }。
- 第二个SimpleLine组件挂载时，执行window.onresize = function() { chartInstance2.resize(); }。
此时，window.onresize最终只会保存第二个组件的事件处理函数。因此，当窗口大小改变时，只有第二个组件的chartInstance2.resize()会被调用，导致第一个图表无法正确缩放。
解决方案：利用window.addEventListener实现多实例响应式缩放
解决这个问题的关键是使用window.addEventListener方法。与onresize属性不同，addEventListener允许为同一个事件类型注册多个事件处理函数，它们会按照注册的顺序依次执行，而不会相互覆盖。
实现步骤与代码示例
-
修改ECharts组件的useEffect钩子： 将window.onresize替换为window.addEventListener('resize', ...)。同时，为了避免内存泄漏和确保组件卸载时清理资源，必须在useEffect的返回函数中调用window.removeEventListener来移除对应的事件监听器。
import React, { useRef, useEffect } from "react"; import * => as echarts from "echarts"; // ... (xAxisDatas, data, option1 等配置保持不变) ... function SimpleLine() { const chartRef = useRef(null); let chartInstance = null; // 确保chartInstance在组件渲染周期内是可访问的 // ECharts配置项 const option1 = { // ... 完整的ECharts配置 ... textStyle: { color: "#545454", fontFamily: "Source Han Sans", fontWeight: "lighter", fontSize: '15', }, tooltip: { trigger: "axis", axisPointer: { type: "shadow", crossStyle: { color: "#999" } } }, legend: { data: ['A'], left: "50%", top: "2%", itemWidth: 10, itemHeight: 5 }, xAxis: { type: "category", data: [ "Jan 01", "Jan 02", "Jan 03", "Jan 04", "Jan 05", "Jan 06", "Jan 07", "Jan 08", "Jan 09", "Jan 10", "Jan 11", "Jan 12", "Jan 13", "Jan 14", "Jan 15", "Jan 16", "Jan 17", "Jan 18", "Jan 19", "Jan 20", "Jan 21", "Jan 22", "Jan 23", "Jan 24", "Jan 25", "Jan 26", "Jan 27", "Jan 28", "Jan 29", "Jan 30", "Jan 31", "Jan 01", "Jan 02", "Jan 03", "Jan 04", "Jan 05", "Jan 06", "Jan 07", "Jan 08", "Jan 09", "Jan 10", "Jan 11", "Jan 12", "Jan 13", "Jan 14", "Jan 15", "Jan 16", "Jan 17", "Jan 18", "Jan 19", "Jan 20", "Jan 21", "Jan 22", "Jan 23", "Jan 24", "Jan 25", "Jan 26", "Jan 27", "Jan 28", "Jan 29", "Jan 30", "Jan 31", "Jan 01", "Jan 02", "Jan 03", "Jan 04", "Jan 05", "Jan 06", "Jan 07", "Jan 08", "Jan 09", "Jan 10", "Jan 11", "Jan 12", "Jan 13", "Jan 14", "Jan 15", "Jan 16", "Jan 17", "Jan 18", "Jan 19", "Jan 20", "Jan 21", "Jan 22", "Jan 23", "Jan 24", "Jan 25", "Jan 26", "Jan 27", "Jan 28", "Jan 29", "Jan 30", "Jan 31", ], axisLabel: { margin: "10" }, name: "xAxisName", nameLocation: "center", nameGap: 30, nameTextStyle: { padding: [5,0,0,0] }, axisTick: { alignWithLabel: true, inside: true } }, yAxis: { name: "", type: "value", splitLine: { show: false } }, dataZoom: [ { show: false, realtime: true, start: 50, end: 100 }, { type: "inside", realtime: true, start: 50, end: 100 } ], grid: { left: '2%', top: '10%', right: '2%', bottom: '12%' }, series: [{ name: 'A', type: "line", smooth: false, showSymbol: true , symbolSize:0.1, itemStyle: {color: '#0F4C5C'}, lineStyle: { width: 5 }, areaStyle: { color: 'transparent', opacity: 0.5, }, label: { show: true, position: 'top', color: "#0F4C5C", fontSize: 15, fontWeight: 'Bold', }, data: [ 31, 49, 36, 36, 30, 36, 36, 34, 38, 40, 34, 36, 32, 35, 34, 35, 32, 30, 37, 32, 40, 40, 33, 39, 31, 37, 34, 35, 38, 37, 33, 32, 38, 33, 35, 37, 37, 39, 33, 39, 45, 50, 51, 38, 39, 34, 32, 39, 31, 34, 31, 35, 34, 33, 30, 38, 38, 33, 68, 33, 35, 37, 32, 38, 30, 31, 30, 30, 31, 38, 39, 22, 32, 30, 35, 35, 37, 40, 31, 38, 34, 30, 36, 30, 34, 61, 31, 40, 40, 32, 35, 33, 39, 30, 34, 33, ], markLine: { silent: true, lineStyle: { color: '#5d6664' }, data: [ { yAxis: 38 }, ] } }], }; const renderChart = () => { const renderedChartInstance = echarts.getInstanceByDom(chartRef.current); if (renderedChartInstance) { chartInstance = renderedChartInstance; } else { chartInstance = echarts.init(chartRef.current); } chartInstance.setOption(option1, true); }; // 首次渲染图表 useEffect(() => { renderChart(); // 返回清理函数，在组件卸载时销毁ECharts实例 return () => { if (chartInstance) { chartInstance.dispose(); } }; }, []); // 空依赖数组确保只在组件挂载和卸载时执行 // 监听窗口大小变化并处理ECharts缩放 useEffect(() => { const handleResize = () => { if (chartInstance) { chartInstance.resize(); } }; window.addEventListener("resize", handleResize); // 返回清理函数，在组件卸载时移除事件监听器 return () => { window.removeEventListener("resize", handleResize); }; }, [chartInstance]); // 依赖chartInstance，确保每次更新后都能访问到正确的实例 return ( <div ref={chartRef} style={{ width: "100%", height: "400px" }}></div> ); } export default SimpleLine; -
关键改动点说明：
- window.addEventListener("resize", handleResize);: 每个SimpleLine组件都会独立地向window对象添加一个resize事件监听器。当窗口大小改变时，所有已注册的handleResize函数都会被调用，从而确保每个ECharts实例都能执行resize()方法。
- window.removeEventListener("resize", handleResize);: 这是至关重要的一步。在useEffect的清理函数中移除事件监听器，可以防止内存泄漏。当组件卸载时，对应的监听器也会被移除，避免对已不存在的ECharts实例进行操作。
- chartInstance的生命周期管理: 确保chartInstance在整个组件生命周期内是可用的。在示例中，chartInstance被声明为let变量，并在renderChart中赋值，并在useEffect的依赖项中加入chartInstance，确保handleResize能访问到最新的图表实例。
最佳实践与注意事项
-
事件去抖 (Debounce) 或节流 (Throttle)：resize事件在窗口大小调整过程中会频繁触发，这可能导致chartInstance.resize()被过度调用，影响性能。为了优化，可以对handleResize函数进行去抖或节流处理。例如，使用lodash.debounce：
import { debounce } from 'lodash'; // ... useEffect(() => { // 200ms内只执行一次resize const debouncedResize = debounce(() => { if (chartInstance) { chartInstance.resize(); } }, 200); window.addEventListener("resize", debouncedResize); return () => { window.removeEventListener("resize", debouncedResize); // 清理debounce的定时器，防止组件卸载后依然触发 debouncedResize.cancel(); }; }, [chartInstance]); ECharts实例的销毁：在组件卸载时，除了移除事件监听器，还应该调用ECharts实例的dispose()方法，彻底销毁图表实例及其内部资源，防止内存泄漏。这通常在初始化ECharts的useEffect的清理函数中完成。
总结
在React应用中处理多个ECharts实例的窗口缩放问题时，理解window.onresize和window.addEventListener之间的区别至关重要。通过采用window.addEventListener并配合useEffect的清理机制，我们可以确保所有图表都能独立且正确地响应页面尺寸变化，同时维护良好的应用性能和资源管理。结合事件去抖或节流，可以进一步优化用户体验和系统效率。
