import EChartsReact from "echarts-for-react";
import { useEffect, useRef } from "react";
export default function App() {
const echartsRef = useRef();
useEffect(() => {
const echartsReact = echartsRef.current;
if (!echartsReact) {
return;
}
console.log("effect run", echartsReact.getEchartsInstance());
}, []);
return (
<EChartsReact
ref={(ref) => {
echartsRef.current = ref;
if (!ref) {
return;
}
console.log("ref connected", ref.getEchartsInstance());
}}
option={{}}
onChartReady={(instance) => {
console.log("chart ready", instance);
}}
/>
);
}

在 3.0.2,上述代码三次输出的 ECharts 实例都是同一个有效的实例。而更新到 3.0.4 之后,在 ref 和 effect 里都只能拿到这一行创建的临时 ECharts 实例,而没法拿到之后创建的真实实例,只有 onChartReady 里能拿到有效的实例。这样的修改破坏了之前代码的兼容性。
在 3.0.2,上述代码三次输出的 ECharts 实例都是同一个有效的实例。而更新到 3.0.4 之后,在 ref 和 effect 里都只能拿到这一行创建的临时 ECharts 实例,而没法拿到之后创建的真实实例,只有
onChartReady里能拿到有效的实例。这样的修改破坏了之前代码的兼容性。