@hsu-react/ui 2.5.4 → 2.5.5

package/src/components/ChainGraph/_hooks/useChainGraphLayout.ts

@@ -1,5 +1,6 @@
-import { useEffect } from "react";
+import { useCallback, useEffect } from "react";
 import ChainGraphServices from "../ChainGraphServices";
+import { useLatestRef } from "../../../hooks/useLatestRef";
 
 interface UseChainGraphLayoutProps {
   graph: ChainGraphServices | null;
@@ -11,9 +12,21 @@ interface UseChainGraphLayoutProps {
 export function useChainGraphLayout(props: UseChainGraphLayoutProps) {
   const { graph, octopus, rootLevel, getImage } = props;
 
+  // getImage 只是「布局完成后把截图 dataURL 交出去」的出口，不是布局的输入。
+  // 它进依赖数组会让消费方每传一次内联箭头就重新 changeLayout 一次 —— 整张图重排；
+  // 消费方再把截图存进 state，就变成「重排 → 出图 → setState → 新引用 → 再重排」的死循环。
+  // 用引用恒定的转发函数注册，调用时再取最新的 getImage。
+  const getImageRef = useLatestRef(getImage);
+  const emitImage = useCallback(
+    (img: string) => {
+      getImageRef.current?.(img);
+    },
+    [getImageRef],
+  );
+
   useEffect(() => {
     if (graph && octopus !== undefined) {
-      graph.changeLayout(octopus, rootLevel, getImage);
+      graph.changeLayout(octopus, rootLevel, emitImage);
     }
-  }, [graph, octopus, rootLevel, getImage]);
+  }, [graph, octopus, rootLevel, emitImage]);
 }

package/src/components/Chart/Bar/index.tsx

@@ -24,6 +24,7 @@ import {
 } from "../_utils/cartesian";
 import { resolveChartChrome } from "../_utils/chartTheme";
 import useIsDark from "../../../hooks/useIsDark";
+import useLatestRef from "../../../hooks/useLatestRef";
 
 export interface ChartBarProps extends ChartCommonProps {
   chartTitle?: string;
@@ -89,6 +90,36 @@ const ChartBar: React.FC<ChartBarProps> = (props) => {
   const isDark = useIsDark();
   const chrome = useMemo(() => resolveChartChrome(isDark), [isDark]);
 
+  // 回调 prop 一律走 useLatestRef，不进依赖数组：消费方传内联箭头（React 里最常见的
+  // 写法）时每次渲染都是新引用，进依赖数组会让「init + setOption(notMerge)」整段重跑，
+  // 还会把当前可视窗口再同步一次给父级 —— 父级据此改 state 就是死循环。
+  // 但「有没有传回调」决定要不要注册监听，所以单独拆成布尔量进依赖数组，
+  // 这样「从无到有传入回调」仍会重新注册，不会漏。
+  const onClickRef = useLatestRef(onClick);
+  const onLegendSelectChangedRef = useLatestRef(onLegendSelectChanged);
+  const onDataZoomWindowChangedRef = useLatestRef(onDataZoomWindowChanged);
+  const hasOnClick = !!onClick;
+  const hasOnLegendSelectChanged = !!onLegendSelectChanged;
+  const hasOnDataZoomWindowChanged = !!onDataZoomWindowChanged;
+  // 已通知过父级的窗口用 ref 记账（不参与渲染）：窗口没变就不再通知，
+  // 掐断「通知 → 父级重算坐标轴 → chartOption 变 → effect 重跑 → 再通知」的自激回路
+  const notifiedZoomWindowRef = useRef<DataZoomIndexWindow | null>(null);
+  const emitZoomWindow = useCallback(
+    (next: DataZoomIndexWindow) => {
+      const prev = notifiedZoomWindowRef.current;
+      if (
+        prev &&
+        prev.startIndex === next.startIndex &&
+        prev.endIndex === next.endIndex
+      ) {
+        return;
+      }
+      notifiedZoomWindowRef.current = next;
+      onDataZoomWindowChangedRef.current?.(next);
+    },
+    [onDataZoomWindowChangedRef],
+  );
+
   // Cache the chart option with useMemo
   const chartOption = useMemo(() => {
     const def_xAxis = createDefaultCategoryXAxis(xAxisData, chrome);
@@ -328,18 +359,18 @@ const ChartBar: React.FC<ChartBarProps> = (props) => {
     }
 
     // Sync the current visible window to the caller (on initial render and after restore), used to recalculate axes based on the displayed portion
-    if (onDataZoomWindowChanged) {
+    if (hasOnDataZoomWindowChanged) {
       const zooms = (chart.getOption() as ChartsOption | undefined)
         ?.dataZoom as Array<{ start?: number; end?: number }> | undefined;
       const zoom = zooms?.[0];
       const totalLen = xAxisData?.length ?? 0;
       if (typeof zoom?.start === "number" && typeof zoom?.end === "number") {
-        onDataZoomWindowChanged(
+        emitZoomWindow(
           percentWindowToIndexWindow(zoom.start, zoom.end, totalLen),
         );
       } else {
         // Without dataZoom (e.g. scrolling not enabled due to insufficient data) the window is the full range; sync once to avoid a stale old window
-        onDataZoomWindowChanged({
+        emitZoomWindow({
           startIndex: 0,
           endIndex: Math.max(0, totalLen - 1),
         });
@@ -355,18 +386,21 @@ const ChartBar: React.FC<ChartBarProps> = (props) => {
       resizeObserverRef.current.observe(chartRef.current);
     }
 
-    // Add click event
-    if (onClick) {
-      chartInstanceRef.current?.on("click", onClick);
+    // Add click event（注册与否看布尔量，实际调用取最新引用）
+    const handleClick = (event: echarts.ECElementEvent) => {
+      onClickRef.current?.(event);
+    };
+    if (hasOnClick) {
+      chartInstanceRef.current?.on("click", handleClick);
     }
 
     // Legend selection event
     const handleLegendSelectChanged = (params: unknown) => {
-      onLegendSelectChanged?.(
+      onLegendSelectChangedRef.current?.(
         (params as { selected: Record<string, boolean> }).selected,
       );
     };
-    if (onLegendSelectChanged) {
+    if (hasOnLegendSelectChanged) {
       chartInstanceRef.current?.on(
         "legendselectchanged",
         handleLegendSelectChanged,
@@ -392,7 +426,7 @@ const ChartBar: React.FC<ChartBarProps> = (props) => {
         typeof info?.startValue === "number" &&
         typeof info?.endValue === "number"
       ) {
-        onDataZoomWindowChanged?.({
+        emitZoomWindow({
           startIndex: Math.max(0, Math.round(info.startValue)),
           endIndex: Math.max(0, Math.round(info.endValue)),
         });
@@ -400,7 +434,7 @@ const ChartBar: React.FC<ChartBarProps> = (props) => {
         typeof info?.start === "number" &&
         typeof info?.end === "number"
       ) {
-        onDataZoomWindowChanged?.(
+        emitZoomWindow(
           percentWindowToIndexWindow(
             info.start,
             info.end,
@@ -409,7 +443,7 @@ const ChartBar: React.FC<ChartBarProps> = (props) => {
         );
       }
     };
-    if (onDataZoomWindowChanged) {
+    if (hasOnDataZoomWindowChanged) {
       chartInstanceRef.current?.on("datazoom", handleDataZoom);
     }
 
@@ -445,18 +479,18 @@ const ChartBar: React.FC<ChartBarProps> = (props) => {
     return () => {
       window.removeEventListener("resize", handleResize);
 
-      if (onClick) {
-        chartInstanceRef.current?.off("click", onClick);
+      if (hasOnClick) {
+        chartInstanceRef.current?.off("click", handleClick);
       }
 
-      if (onLegendSelectChanged) {
+      if (hasOnLegendSelectChanged) {
         chartInstanceRef.current?.off(
           "legendselectchanged",
           handleLegendSelectChanged,
         );
       }
 
-      if (onDataZoomWindowChanged) {
+      if (hasOnDataZoomWindowChanged) {
         chartInstanceRef.current?.off("datazoom", handleDataZoom);
       }
 
@@ -468,9 +502,12 @@ const ChartBar: React.FC<ChartBarProps> = (props) => {
   }, [
     chartOption,
     handleResize,
-    onClick,
-    onLegendSelectChanged,
-    onDataZoomWindowChanged,
+    onClickRef,
+    onLegendSelectChangedRef,
+    hasOnClick,
+    hasOnLegendSelectChanged,
+    hasOnDataZoomWindowChanged,
+    emitZoomWindow,
     xAxisData,
     enableLegendAutoScroll,
     legendVisibleCount,
@@ -507,9 +544,9 @@ const ChartBar: React.FC<ChartBarProps> = (props) => {
       startIndex: normalizedScroll.startIndex,
       autoPlay: normalizedScroll.autoScroll,
       enableWheelScroll,
-      onWindowChange: onDataZoomWindowChanged
+      onWindowChange: hasOnDataZoomWindowChanged
         ? (startPercent, endPercent) =>
-            onDataZoomWindowChanged(
+            emitZoomWindow(
               percentWindowToIndexWindow(
                 startPercent,
                 endPercent,
@@ -525,7 +562,8 @@ const ChartBar: React.FC<ChartBarProps> = (props) => {
     normalizedScroll,
     sliderDataZoom,
     xAxisData,
-    onDataZoomWindowChanged,
+    hasOnDataZoomWindowChanged,
+    emitZoomWindow,
   ]);
 
   // Clean up resources when the component unmounts

package/src/components/Chart/Bubble/index.tsx

@@ -373,6 +373,12 @@ const Bubble: React.FC<ChartBubbleProps> = (props) => {
 
   const onChartRef = useLatestRef(onChart);
 
+  // onClick 不进依赖数组：消费方传内联箭头时每次渲染都是新引用，effect 跟着重跑就会
+  // 再走一遍 setOption(notMerge)，动画重播、悬浮/高亮态被清掉。注册与否看布尔量，
+  // 这样「从无到有传入 onClick」仍会注册；实际调用取 ref 里的最新引用。
+  const onClickRef = useLatestRef(onClick);
+  const hasOnClick = !!onClick;
+
   // 回调 prop 不进依赖数组：消费方传内联箭头时每次渲染都是新引用，effect 会跟着
   // 重跑并再调一次回调 —— 回调里 setState 就是死循环（详见 Input/TextArea 的说明）
   // Initialize the chart
@@ -398,16 +404,19 @@ const Bubble: React.FC<ChartBubbleProps> = (props) => {
     window.addEventListener("resize", handleResize);
 
     // Add click event
-    if (onClick) {
-      chartInstanceRef.current?.on("click", onClick);
+    const handleClick = (event: echarts.ECElementEvent) => {
+      onClickRef.current?.(event);
+    };
+    if (hasOnClick) {
+      chartInstanceRef.current?.on("click", handleClick);
     }
 
     // Cleanup function
     return () => {
       window.removeEventListener("resize", handleResize);
 
-      if (onClick) {
-        chartInstanceRef.current?.off("click", onClick);
+      if (hasOnClick) {
+        chartInstanceRef.current?.off("click", handleClick);
       }
     };
   }, [
@@ -416,7 +425,8 @@ const Bubble: React.FC<ChartBubbleProps> = (props) => {
     containerSize.height,
     handleResize,
     onChartRef,
-    onClick,
+    onClickRef,
+    hasOnClick,
   ]);
 
   // Dispose the chart instance when the component unmounts

package/src/components/Chart/Heatmap/index.tsx

@@ -269,6 +269,12 @@ const Heatmap: React.FC<ChartHeatmapProps> = (props) => {
 
   const onChartRef = useLatestRef(onChart);
 
+  // onClick 不进依赖数组：消费方传内联箭头时每次渲染都是新引用，effect 跟着重跑就会
+  // 再走一遍 setOption(notMerge)，动画重播、悬浮/高亮态被清掉。注册与否看布尔量，
+  // 这样「从无到有传入 onClick」仍会注册；实际调用取 ref 里的最新引用。
+  const onClickRef = useLatestRef(onClick);
+  const hasOnClick = !!onClick;
+
   // 回调 prop 不进依赖数组：消费方传内联箭头时每次渲染都是新引用，effect 会跟着
   // 重跑并再调一次回调 —— 回调里 setState 就是死循环（详见 Input/TextArea 的说明）
   // Initialize the chart
@@ -297,19 +303,27 @@ const Heatmap: React.FC<ChartHeatmapProps> = (props) => {
     }
 
     // Add click event
-    if (onClick) {
-      chartInstanceRef.current?.on("click", onClick);
+    const handleClick = (event: echarts.ECElementEvent) => {
+      onClickRef.current?.(event);
+    };
+    if (hasOnClick) {
+      chartInstanceRef.current?.on("click", handleClick);
     }
 
     // Cleanup function
     return () => {
       window.removeEventListener("resize", handleResize);
 
-      if (onClick) {
-        chartInstanceRef.current?.off("click", onClick);
+      if (hasOnClick) {
+        chartInstanceRef.current?.off("click", handleClick);
       }
     };
-  }, [chartOption, handleResize, onChartRef, onClick,
+  }, [
+    chartOption,
+    handleResize,
+    onChartRef,
+    onClickRef,
+    hasOnClick,
     containerReady,
   ]);
 

package/src/components/Chart/Line/index.tsx

@@ -24,6 +24,7 @@ import {
 } from "../_utils/cartesian";
 import { resolveChartChrome } from "../_utils/chartTheme";
 import useIsDark from "../../../hooks/useIsDark";
+import useLatestRef from "../../../hooks/useLatestRef";
 
 export interface ChartLineProps extends ChartCommonProps {
   chartTitle?: string;
@@ -90,6 +91,36 @@ const ChartLine: React.FC<ChartLineProps> = (props) => {
   const isDark = useIsDark();
   const chrome = useMemo(() => resolveChartChrome(isDark), [isDark]);
 
+  // 回调 prop 一律走 useLatestRef，不进依赖数组：消费方传内联箭头（React 里最常见的
+  // 写法）时每次渲染都是新引用，进依赖数组会让「init + setOption(notMerge)」整段重跑，
+  // 还会把当前可视窗口再同步一次给父级 —— 父级据此改 state 就是死循环。
+  // 但「有没有传回调」决定要不要注册监听，所以单独拆成布尔量进依赖数组，
+  // 这样「从无到有传入回调」仍会重新注册，不会漏。
+  const onClickRef = useLatestRef(onClick);
+  const onLegendSelectChangedRef = useLatestRef(onLegendSelectChanged);
+  const onDataZoomWindowChangedRef = useLatestRef(onDataZoomWindowChanged);
+  const hasOnClick = !!onClick;
+  const hasOnLegendSelectChanged = !!onLegendSelectChanged;
+  const hasOnDataZoomWindowChanged = !!onDataZoomWindowChanged;
+  // 已通知过父级的窗口用 ref 记账（不参与渲染）：窗口没变就不再通知，
+  // 掐断「通知 → 父级重算坐标轴 → chartOption 变 → effect 重跑 → 再通知」的自激回路
+  const notifiedZoomWindowRef = useRef<DataZoomIndexWindow | null>(null);
+  const emitZoomWindow = useCallback(
+    (next: DataZoomIndexWindow) => {
+      const prev = notifiedZoomWindowRef.current;
+      if (
+        prev &&
+        prev.startIndex === next.startIndex &&
+        prev.endIndex === next.endIndex
+      ) {
+        return;
+      }
+      notifiedZoomWindowRef.current = next;
+      onDataZoomWindowChangedRef.current?.(next);
+    },
+    [onDataZoomWindowChangedRef],
+  );
+
   // Cache the chart option with useMemo
   const chartOption = useMemo(() => {
     const def_xAxis = createDefaultCategoryXAxis(xAxisData, chrome);
@@ -326,18 +357,18 @@ const ChartLine: React.FC<ChartLineProps> = (props) => {
     }
 
     // Sync the current visible window to the caller (on initial render and after restore), used to recalculate axes based on the displayed portion
-    if (onDataZoomWindowChanged) {
+    if (hasOnDataZoomWindowChanged) {
       const zooms = (chart.getOption() as ChartsOption | undefined)
         ?.dataZoom as Array<{ start?: number; end?: number }> | undefined;
       const zoom = zooms?.[0];
       const totalLen = xAxisData?.length ?? 0;
       if (typeof zoom?.start === "number" && typeof zoom?.end === "number") {
-        onDataZoomWindowChanged(
+        emitZoomWindow(
           percentWindowToIndexWindow(zoom.start, zoom.end, totalLen),
         );
       } else {
         // Without dataZoom (e.g. scrolling not enabled due to insufficient data) the window is the full range; sync once to avoid a stale old window
-        onDataZoomWindowChanged({
+        emitZoomWindow({
           startIndex: 0,
           endIndex: Math.max(0, totalLen - 1),
         });
@@ -353,18 +384,21 @@ const ChartLine: React.FC<ChartLineProps> = (props) => {
       resizeObserverRef.current.observe(chartRef.current);
     }
 
-    // Add click event
-    if (onClick) {
-      chartInstanceRef.current?.on("click", onClick);
+    // Add click event（注册与否看布尔量，实际调用取最新引用）
+    const handleClick = (event: echarts.ECElementEvent) => {
+      onClickRef.current?.(event);
+    };
+    if (hasOnClick) {
+      chartInstanceRef.current?.on("click", handleClick);
     }
 
     // Legend selection event
     const handleLegendSelectChanged = (params: unknown) => {
-      onLegendSelectChanged?.(
+      onLegendSelectChangedRef.current?.(
         (params as { selected: Record<string, boolean> }).selected,
       );
     };
-    if (onLegendSelectChanged) {
+    if (hasOnLegendSelectChanged) {
       chartInstanceRef.current?.on(
         "legendselectchanged",
         handleLegendSelectChanged,
@@ -390,7 +424,7 @@ const ChartLine: React.FC<ChartLineProps> = (props) => {
         typeof info?.startValue === "number" &&
         typeof info?.endValue === "number"
       ) {
-        onDataZoomWindowChanged?.({
+        emitZoomWindow({
           startIndex: Math.max(0, Math.round(info.startValue)),
           endIndex: Math.max(0, Math.round(info.endValue)),
         });
@@ -398,7 +432,7 @@ const ChartLine: React.FC<ChartLineProps> = (props) => {
         typeof info?.start === "number" &&
         typeof info?.end === "number"
       ) {
-        onDataZoomWindowChanged?.(
+        emitZoomWindow(
           percentWindowToIndexWindow(
             info.start,
             info.end,
@@ -407,7 +441,7 @@ const ChartLine: React.FC<ChartLineProps> = (props) => {
         );
       }
     };
-    if (onDataZoomWindowChanged) {
+    if (hasOnDataZoomWindowChanged) {
       chartInstanceRef.current?.on("datazoom", handleDataZoom);
     }
 
@@ -443,18 +477,18 @@ const ChartLine: React.FC<ChartLineProps> = (props) => {
     return () => {
       window.removeEventListener("resize", handleResize);
 
-      if (onClick) {
-        chartInstanceRef.current?.off("click", onClick);
+      if (hasOnClick) {
+        chartInstanceRef.current?.off("click", handleClick);
       }
 
-      if (onLegendSelectChanged) {
+      if (hasOnLegendSelectChanged) {
         chartInstanceRef.current?.off(
           "legendselectchanged",
           handleLegendSelectChanged,
         );
       }
 
-      if (onDataZoomWindowChanged) {
+      if (hasOnDataZoomWindowChanged) {
         chartInstanceRef.current?.off("datazoom", handleDataZoom);
       }
 
@@ -466,9 +500,12 @@ const ChartLine: React.FC<ChartLineProps> = (props) => {
   }, [
     chartOption,
     handleResize,
-    onClick,
-    onLegendSelectChanged,
-    onDataZoomWindowChanged,
+    onClickRef,
+    onLegendSelectChangedRef,
+    hasOnClick,
+    hasOnLegendSelectChanged,
+    hasOnDataZoomWindowChanged,
+    emitZoomWindow,
     xAxisData,
     enableLegendAutoScroll,
     legendVisibleCount,
@@ -505,9 +542,9 @@ const ChartLine: React.FC<ChartLineProps> = (props) => {
       startIndex: normalizedScroll.startIndex,
       autoPlay: normalizedScroll.autoScroll,
       enableWheelScroll,
-      onWindowChange: onDataZoomWindowChanged
+      onWindowChange: hasOnDataZoomWindowChanged
         ? (startPercent, endPercent) =>
-            onDataZoomWindowChanged(
+            emitZoomWindow(
               percentWindowToIndexWindow(
                 startPercent,
                 endPercent,
@@ -523,7 +560,8 @@ const ChartLine: React.FC<ChartLineProps> = (props) => {
     normalizedScroll,
     sliderDataZoom,
     xAxisData,
-    onDataZoomWindowChanged,
+    hasOnDataZoomWindowChanged,
+    emitZoomWindow,
   ]);
 
   // Clean up resources when the component unmounts

package/src/components/Chart/Pie/Pie3D/index.tsx

@@ -173,6 +173,12 @@ const ChartPie3D: React.FC<ChartPie3DProps> = (props) => {
 
   const onChartRef = useLatestRef(onChart);
 
+  // onClick 不进依赖数组：消费方传内联箭头时每次渲染都是新引用，effect 跟着重跑会重建
+  // 3D 饼的 option 并重播动画。注册与否看布尔量（保证「从无到有传入」仍会注册），
+  // 实际调用取 ref 里的最新引用。
+  const onClickRef = useLatestRef(onClick);
+  const hasOnClick = !!onClick;
+
   // 回调 prop 不进依赖数组：消费方传内联箭头时每次渲染都是新引用，effect 会跟着
   // 重跑并再调一次回调 —— 回调里 setState 就是死循环（详见 Input/TextArea 的说明）
   useEffect(() => {
@@ -197,8 +203,11 @@ const ChartPie3D: React.FC<ChartPie3DProps> = (props) => {
 
     chart.on("mouseover", handleMouseOver);
     chart.on("globalout", handleGlobalOut);
-    if (onClick) {
-      chart.on("click", onClick);
+    const handleClick = (event: echarts.ECElementEvent) => {
+      onClickRef.current?.(event);
+    };
+    if (hasOnClick) {
+      chart.on("click", handleClick);
     }
 
     return () => {
@@ -206,8 +215,8 @@ const ChartPie3D: React.FC<ChartPie3DProps> = (props) => {
       if (chart) {
         chart.off("mouseover", handleMouseOver);
         chart.off("globalout", handleGlobalOut);
-        if (onClick) {
-          chart.off("click", onClick);
+        if (hasOnClick) {
+          chart.off("click", handleClick);
         }
       }
     };
@@ -217,7 +226,8 @@ const ChartPie3D: React.FC<ChartPie3DProps> = (props) => {
     handleMouseOver,
     handleGlobalOut,
     onChartRef,
-    onClick,
+    onClickRef,
+    hasOnClick,
     containerReady,
   ]);
 

package/src/components/Chart/Pie/index.tsx

@@ -255,6 +255,12 @@ const ChartPie: ChartPieFC = (props) => {
 
   const onChartRef = useLatestRef(onChart);
 
+  // onClick 不进依赖数组：消费方传内联箭头时每次渲染都是新引用，effect 跟着重跑就会
+  // 再走一遍 setOption(notMerge)，动画重播、悬浮/高亮态被清掉。注册与否看布尔量，
+  // 这样「从无到有传入 onClick」仍会注册；实际调用取 ref 里的最新引用。
+  const onClickRef = useLatestRef(onClick);
+  const hasOnClick = !!onClick;
+
   // 回调 prop 不进依赖数组：消费方传内联箭头时每次渲染都是新引用，effect 会跟着
   // 重跑并再调一次回调 —— 回调里 setState 就是死循环（详见 Input/TextArea 的说明）
   // Initialize the chart
@@ -283,8 +289,11 @@ const ChartPie: ChartPieFC = (props) => {
     }
 
     // Add click event
-    if (onClick) {
-      chartInstanceRef.current?.on("click", onClick);
+    const handleClick = (event: echarts.ECElementEvent) => {
+      onClickRef.current?.(event);
+    };
+    if (hasOnClick) {
+      chartInstanceRef.current?.on("click", handleClick);
     }
 
     // Legend auto-scroll
@@ -307,8 +316,8 @@ const ChartPie: ChartPieFC = (props) => {
     return () => {
       window.removeEventListener("resize", handleResize);
 
-      if (onClick) {
-        chartInstanceRef.current?.off("click", onClick);
+      if (hasOnClick) {
+        chartInstanceRef.current?.off("click", handleClick);
       }
 
       // Clean up legend scrolling
@@ -321,7 +330,8 @@ const ChartPie: ChartPieFC = (props) => {
     chartOption,
     handleResize,
     onChartRef,
-    onClick,
+    onClickRef,
+    hasOnClick,
     enableLegendAutoScroll,
     seriesData,
     legendVisibleCount,

package/src/components/Chart/Sankey/index.tsx

@@ -3,6 +3,7 @@ import useContainerReady from "../_hooks/useContainerReady";
 import styles from "../index.module.scss";
 import { ChartCommonProps, ChartOptionType, ChartsOption } from "..";
 import * as echarts from "echarts";
+import useLatestRef from "../../../hooks/useLatestRef";
 
 type SankeyNodeItemOption = echarts.SankeySeriesOption["data"];
 type SankeyEdgeItemOption = echarts.SankeySeriesOption["links"];
@@ -101,6 +102,13 @@ const Sankey: React.FC<ChartSankeyProps> = (props) => {
     return option;
   }, [seriesData, seriesLinks, series]);
 
+  // getImage 只是「出图后把 dataURL 交出去」的出口，既不决定图怎么画，
+  // 也不该决定要不要重画。它进依赖数组会让 effect 跟着重跑 → setOption(notMerge)
+  // → 图重绘 → 再触发一次 finished → 再回调；消费方把图存进 state 就是死循环。
+  // 而且 finished 监听只在首次 init 时注册，闭包里锁死的是首帧的 getImage，
+  // 后续换了引用永远调不到 —— 依赖数组写了它也没用，是条死依赖。走 ref 两个问题一起解决。
+  const getImageRef = useLatestRef(getImage);
+
   // Callback handling chart resize
   const handleResize = useCallback(() => {
     // A keep-alive tab losing focus fires the observer with a 0×0 box; resizing to that throws
@@ -123,7 +131,7 @@ const Sankey: React.FC<ChartSankeyProps> = (props) => {
 
       // Attach the finished event listener on first initialization
       chart.on("finished", () => {
-        getImage?.(
+        getImageRef.current?.(
           chart!.getDataURL({
             type: "png",
             pixelRatio: 1,
@@ -149,9 +157,7 @@ const Sankey: React.FC<ChartSankeyProps> = (props) => {
     return () => {
       window.removeEventListener("resize", handleResize);
     };
-  }, [chartOption, handleResize, getImage,
-    containerReady,
-  ]);
+  }, [chartOption, handleResize, getImageRef, containerReady]);
 
   // Clean up resources on unmount
   useEffect(() => {

package/src/components/Chart/Tree/index.tsx

@@ -8,6 +8,7 @@ import {
   SeriesData,
 } from "..";
 import * as echarts from "echarts";
+import useLatestRef from "../../../hooks/useLatestRef";
 import { deepCopy } from "hsu-utils";
 import { handleTreeData } from "../_utils/tree";
 
@@ -41,6 +42,13 @@ const Tree: React.FC<ChartTreeProps> = (props) => {
     return option;
   }, [seriesData, series]);
 
+  // getImage 只是「出图后把 dataURL 交出去」的出口，既不决定图怎么画，
+  // 也不该决定要不要重画。它进依赖数组会让 effect 跟着重跑 → setOption(notMerge)
+  // → 图重绘 → 再触发一次 finished → 再回调；消费方把图存进 state 就是死循环。
+  // 而且 finished 监听只在首次 init 时注册，闭包里锁死的是首帧的 getImage，
+  // 后续换了引用永远调不到 —— 依赖数组写了它也没用，是条死依赖。走 ref 两个问题一起解决。
+  const getImageRef = useLatestRef(getImage);
+
   // Callback handling chart resize
   const handleResize = useCallback(() => {
     // A keep-alive tab losing focus fires the observer with a 0×0 box; resizing to that throws
@@ -63,7 +71,7 @@ const Tree: React.FC<ChartTreeProps> = (props) => {
 
       // Attach the finished event listener on first initialization
       chart.on("finished", () => {
-        getImage?.(
+        getImageRef.current?.(
           chart!.getDataURL({
             type: "png",
             pixelRatio: 1,
@@ -89,9 +97,7 @@ const Tree: React.FC<ChartTreeProps> = (props) => {
     return () => {
       window.removeEventListener("resize", handleResize);
     };
-  }, [chartOption, handleResize, getImage,
-    containerReady,
-  ]);
+  }, [chartOption, handleResize, getImageRef, containerReady]);
 
   // Clean up resources on unmount
   useEffect(() => {