@hsu-react/ui 2.5.4 → 2.5.6

package/lib/components/Chart/Bar/index.js

@@ -13,6 +13,8 @@ var _autoSmooth = require("../_utils/autoSmooth");
 var _cartesian = require("../_utils/cartesian");
 var _chartTheme = require("../_utils/chartTheme");
 var _useIsDark = _interopRequireDefault(require("../../../hooks/useIsDark"));
+var _useLatestRef = _interopRequireDefault(require("../../../hooks/useLatestRef"));
+var _useShallowStable = _interopRequireDefault(require("../../../hooks/useShallowStable"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
@@ -42,8 +44,12 @@ const ChartBar = props => {
     enableLegendAutoScroll = false,
     legendVisibleCount = 8,
     legendScrollInterval = 1500,
-    ...coreOption
+    ...restOption
   } = props;
+  // rest 解构出来的对象每次渲染都是新引用，直接进依赖数组会让 chartOption 的 memo
+  // 恒不命中 —— 父组件每渲染一次就重跑一次 setOption(notMerge)，动画重播、悬浮态被清掉。
+  // useShallowStable 让它回到值语义：内容浅相等就复用同一引用，真变了立刻透出新引用。
+  const coreOption = (0, _useShallowStable.default)(restOption);
   const chartRef = (0, _react.useRef)(null);
   const chartInstanceRef = (0, _react.useRef)(null);
   // Defers `echarts.init` until the container has a box — see the hook for why
@@ -57,6 +63,29 @@ const ChartBar = props => {
   const isDark = (0, _useIsDark.default)();
   const chrome = (0, _react.useMemo)(() => (0, _chartTheme.resolveChartChrome)(isDark), [isDark]);
 
+  // 回调 prop 一律走 useLatestRef，不进依赖数组：消费方传内联箭头（React 里最常见的
+  // 写法）时每次渲染都是新引用，进依赖数组会让「init + setOption(notMerge)」整段重跑，
+  // 还会把当前可视窗口再同步一次给父级 —— 父级据此改 state 就是死循环。
+  // 但「有没有传回调」决定要不要注册监听，所以单独拆成布尔量进依赖数组，
+  // 这样「从无到有传入回调」仍会重新注册，不会漏。
+  const onClickRef = (0, _useLatestRef.default)(onClick);
+  const onLegendSelectChangedRef = (0, _useLatestRef.default)(onLegendSelectChanged);
+  const onDataZoomWindowChangedRef = (0, _useLatestRef.default)(onDataZoomWindowChanged);
+  const hasOnClick = !!onClick;
+  const hasOnLegendSelectChanged = !!onLegendSelectChanged;
+  const hasOnDataZoomWindowChanged = !!onDataZoomWindowChanged;
+  // 已通知过父级的窗口用 ref 记账（不参与渲染）：窗口没变就不再通知，
+  // 掐断「通知 → 父级重算坐标轴 → chartOption 变 → effect 重跑 → 再通知」的自激回路
+  const notifiedZoomWindowRef = (0, _react.useRef)(null);
+  const emitZoomWindow = (0, _react.useCallback)(next => {
+    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 = (0, _react.useMemo)(() => {
     const def_xAxis = (0, _cartesian.createDefaultCategoryXAxis)(xAxisData, chrome);
@@ -241,15 +270,15 @@ const ChartBar = 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()?.dataZoom;
       const zoom = zooms?.[0];
       const totalLen = xAxisData?.length ?? 0;
       if (typeof zoom?.start === "number" && typeof zoom?.end === "number") {
-        onDataZoomWindowChanged((0, _cartesian.percentWindowToIndexWindow)(zoom.start, zoom.end, totalLen));
+        emitZoomWindow((0, _cartesian.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)
         });
@@ -265,16 +294,19 @@ const ChartBar = props => {
       resizeObserverRef.current.observe(chartRef.current);
     }
 
-    // Add click event
-    if (onClick) {
-      chartInstanceRef.current?.on("click", onClick);
+    // Add click event（注册与否看布尔量，实际调用取最新引用）
+    const handleClick = event => {
+      onClickRef.current?.(event);
+    };
+    if (hasOnClick) {
+      chartInstanceRef.current?.on("click", handleClick);
     }
 
     // Legend selection event
     const handleLegendSelectChanged = params => {
-      onLegendSelectChanged?.(params.selected);
+      onLegendSelectChangedRef.current?.(params.selected);
     };
-    if (onLegendSelectChanged) {
+    if (hasOnLegendSelectChanged) {
       chartInstanceRef.current?.on("legendselectchanged", handleLegendSelectChanged);
     }
 
@@ -283,15 +315,15 @@ const ChartBar = props => {
       const raw = params;
       const info = raw?.batch?.[0] ?? raw;
       if (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))
         });
       } else if (typeof info?.start === "number" && typeof info?.end === "number") {
-        onDataZoomWindowChanged?.((0, _cartesian.percentWindowToIndexWindow)(info.start, info.end, xAxisData?.length ?? 0));
+        emitZoomWindow((0, _cartesian.percentWindowToIndexWindow)(info.start, info.end, xAxisData?.length ?? 0));
       }
     };
-    if (onDataZoomWindowChanged) {
+    if (hasOnDataZoomWindowChanged) {
       chartInstanceRef.current?.on("datazoom", handleDataZoom);
     }
 
@@ -318,13 +350,13 @@ const ChartBar = props => {
     // Cleanup function
     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);
       }
       if (legendScrollRef.current) {
@@ -332,7 +364,7 @@ const ChartBar = props => {
         legendScrollRef.current = null;
       }
     };
-  }, [chartOption, handleResize, onClick, onLegendSelectChanged, onDataZoomWindowChanged, xAxisData, enableLegendAutoScroll, legendVisibleCount, legendScrollInterval,
+  }, [chartOption, handleResize, onClickRef, onLegendSelectChangedRef, hasOnClick, hasOnLegendSelectChanged, hasOnDataZoomWindowChanged, emitZoomWindow, xAxisData, enableLegendAutoScroll, legendVisibleCount, legendScrollInterval,
   // 图例是否接管滚轮由它推导，漏了会拿到过期的滚动配置
   normalizedScroll, containerReady]);
 
@@ -351,10 +383,10 @@ const ChartBar = props => {
       startIndex: normalizedScroll.startIndex,
       autoPlay: normalizedScroll.autoScroll,
       enableWheelScroll,
-      onWindowChange: onDataZoomWindowChanged ? (startPercent, endPercent) => onDataZoomWindowChanged((0, _cartesian.percentWindowToIndexWindow)(startPercent, endPercent, xAxisData.length)) : undefined
+      onWindowChange: hasOnDataZoomWindowChanged ? (startPercent, endPercent) => emitZoomWindow((0, _cartesian.percentWindowToIndexWindow)(startPercent, endPercent, xAxisData.length)) : undefined
     });
     return dispose;
-  }, [dataZoom, normalizedScroll, sliderDataZoom, xAxisData, onDataZoomWindowChanged]);
+  }, [dataZoom, normalizedScroll, sliderDataZoom, xAxisData, hasOnDataZoomWindowChanged, emitZoomWindow]);
 
   // Clean up resources when the component unmounts
   (0, _react.useEffect)(() => {

package/lib/components/Chart/Bubble/index.js

@@ -9,6 +9,7 @@ var _indexModule = _interopRequireDefault(require("../index.module.scss"));
 var echarts = _interopRequireWildcard(require("echarts"));
 var _bubble = require("../_utils/bubble");
 var _useLatestRef = require("../../../hooks/useLatestRef");
+var _useShallowStable = _interopRequireDefault(require("../../../hooks/useShallowStable"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
@@ -28,8 +29,12 @@ const Bubble = props => {
     title,
     onChart,
     onClick,
-    ...coreOption
+    ...restOption
   } = props;
+  // rest 解构出来的对象每次渲染都是新引用，直接进依赖数组会让 chartOption 的 memo
+  // 恒不命中 —— 父组件每渲染一次就重跑一次 setOption(notMerge)，动画重播、悬浮态被清掉。
+  // useShallowStable 让它回到值语义：内容浅相等就复用同一引用，真变了立刻透出新引用。
+  const coreOption = (0, _useShallowStable.default)(restOption);
   const chartRef = (0, _react.useRef)(null);
   const chartInstanceRef = (0, _react.useRef)(null);
   const resizeObserverRef = (0, _react.useRef)(null);
@@ -257,6 +262,12 @@ const Bubble = props => {
   }, [chartOption, data]);
   const onChartRef = (0, _useLatestRef.useLatestRef)(onChart);
 
+  // onClick 不进依赖数组：消费方传内联箭头时每次渲染都是新引用，effect 跟着重跑就会
+  // 再走一遍 setOption(notMerge)，动画重播、悬浮/高亮态被清掉。注册与否看布尔量，
+  // 这样「从无到有传入 onClick」仍会注册；实际调用取 ref 里的最新引用。
+  const onClickRef = (0, _useLatestRef.useLatestRef)(onClick);
+  const hasOnClick = !!onClick;
+
   // 回调 prop 不进依赖数组：消费方传内联箭头时每次渲染都是新引用，effect 会跟着
   // 重跑并再调一次回调 —— 回调里 setState 就是死循环（详见 Input/TextArea 的说明）
   // Initialize the chart
@@ -282,18 +293,21 @@ const Bubble = props => {
     window.addEventListener("resize", handleResize);
 
     // Add click event
-    if (onClick) {
-      chartInstanceRef.current?.on("click", onClick);
+    const handleClick = event => {
+      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, containerSize.width, containerSize.height, handleResize, onChartRef, onClick]);
+  }, [chartOption, containerSize.width, containerSize.height, handleResize, onChartRef, onClickRef, hasOnClick]);
 
   // Dispose the chart instance when the component unmounts
   (0, _react.useEffect)(() => {

package/lib/components/Chart/Common/index.js

@@ -9,6 +9,7 @@ var _useContainerReady = _interopRequireDefault(require("../_hooks/useContainerR
 var _indexModule = _interopRequireDefault(require("../index.module.scss"));
 var echarts = _interopRequireWildcard(require("echarts"));
 var _useLatestRef = require("../../../hooks/useLatestRef");
+var _useShallowStable = _interopRequireDefault(require("../../../hooks/useShallowStable"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
@@ -18,8 +19,12 @@ const Common = props => {
     className,
     style,
     onChart,
-    ...coreOption
+    ...restOption
   } = props;
+  // rest 解构出来的对象每次渲染都是新引用，直接进依赖数组会让 chartOption 的 memo
+  // 恒不命中 —— 父组件每渲染一次就重跑一次 setOption(notMerge)，动画重播、悬浮态被清掉。
+  // useShallowStable 让它回到值语义：内容浅相等就复用同一引用，真变了立刻透出新引用。
+  const coreOption = (0, _useShallowStable.default)(restOption);
   const chartRef = (0, _react.useRef)(null);
   const chartInstanceRef = (0, _react.useRef)(null);
   // Defers `echarts.init` until the container has a box — see the hook for why

package/lib/components/Chart/Gauge/index.js

@@ -8,6 +8,7 @@ var echarts = _interopRequireWildcard(require("echarts"));
 var _useContainerReady = _interopRequireDefault(require("../_hooks/useContainerReady"));
 var _react = _interopRequireWildcard(require("react"));
 var _indexModule = _interopRequireDefault(require("../index.module.scss"));
+var _useShallowStable = _interopRequireDefault(require("../../../hooks/useShallowStable"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
@@ -29,8 +30,12 @@ const Gauge = props => {
     axisLabel,
     title,
     color = "#1675FB",
-    ...coreSeries
+    ...restSeries
   } = series;
+  // rest 解构出来的对象每次渲染都是新引用，直接进依赖数组会让 chartOption 的 memo
+  // 恒不命中 —— 父组件每渲染一次就重跑一次 setOption(notMerge)，动画重播、悬浮态被清掉。
+  // useShallowStable 让它回到值语义：内容浅相等就复用同一引用，真变了立刻透出新引用。
+  const coreSeries = (0, _useShallowStable.default)(restSeries);
   const chartRef = (0, _react.useRef)(null);
   const chartInstanceRef = (0, _react.useRef)(null);
   // Defers `echarts.init` until the container has a box — see the hook for why

package/lib/components/Chart/Heatmap/index.js

@@ -12,10 +12,13 @@ var _heatmap = require("../_utils/heatmap");
 var _chartTheme = require("../_utils/chartTheme");
 var _useIsDark = _interopRequireDefault(require("../../../hooks/useIsDark"));
 var _useLatestRef = require("../../../hooks/useLatestRef");
+var _useShallowStable = _interopRequireDefault(require("../../../hooks/useShallowStable"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+// 解构默认值写成字面量会每次渲染新建一个数组，进依赖数组就让 memo 恒不命中；提到模块级常量
+const DEFAULT_IN_RANGE_COLOR = ["#8BCCFB", "#75C3FB", "#5AB5F6", "#42AEFA", "#2DA1F5", "#0F89E1", "#056FBB", "#025794", "#0A4089"];
 const Heatmap = props => {
   const {
     className,
@@ -34,9 +37,13 @@ const Heatmap = props => {
     onChart,
     onClick,
     zeroColor,
-    inRangeColor = ["#8BCCFB", "#75C3FB", "#5AB5F6", "#42AEFA", "#2DA1F5", "#0F89E1", "#056FBB", "#025794", "#0A4089"],
-    ...coreOption
+    inRangeColor = DEFAULT_IN_RANGE_COLOR,
+    ...restOption
   } = props;
+  // rest 解构出来的对象每次渲染都是新引用，直接进依赖数组会让 chartOption 的 memo
+  // 恒不命中 —— 父组件每渲染一次就重跑一次 setOption(notMerge)，动画重播、悬浮态被清掉。
+  // useShallowStable 让它回到值语义：内容浅相等就复用同一引用，真变了立刻透出新引用。
+  const coreOption = (0, _useShallowStable.default)(restOption);
   const chartRef = (0, _react.useRef)(null);
   const chartInstanceRef = (0, _react.useRef)(null);
   // Defers `echarts.init` until the container has a box — see the hook for why
@@ -194,6 +201,12 @@ const Heatmap = props => {
   }, []);
   const onChartRef = (0, _useLatestRef.useLatestRef)(onChart);
 
+  // onClick 不进依赖数组：消费方传内联箭头时每次渲染都是新引用，effect 跟着重跑就会
+  // 再走一遍 setOption(notMerge)，动画重播、悬浮/高亮态被清掉。注册与否看布尔量，
+  // 这样「从无到有传入 onClick」仍会注册；实际调用取 ref 里的最新引用。
+  const onClickRef = (0, _useLatestRef.useLatestRef)(onClick);
+  const hasOnClick = !!onClick;
+
   // 回调 prop 不进依赖数组：消费方传内联箭头时每次渲染都是新引用，effect 会跟着
   // 重跑并再调一次回调 —— 回调里 setState 就是死循环（详见 Input/TextArea 的说明）
   // Initialize the chart
@@ -222,18 +235,21 @@ const Heatmap = props => {
     }
 
     // Add click event
-    if (onClick) {
-      chartInstanceRef.current?.on("click", onClick);
+    const handleClick = event => {
+      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, containerReady]);
+  }, [chartOption, handleResize, onChartRef, onClickRef, hasOnClick, containerReady]);
 
   // Clean up resources when the component unmounts
   (0, _react.useEffect)(() => {

package/lib/components/Chart/Line/index.js

@@ -13,6 +13,8 @@ var _autoSmooth = require("../_utils/autoSmooth");
 var _cartesian = require("../_utils/cartesian");
 var _chartTheme = require("../_utils/chartTheme");
 var _useIsDark = _interopRequireDefault(require("../../../hooks/useIsDark"));
+var _useLatestRef = _interopRequireDefault(require("../../../hooks/useLatestRef"));
+var _useShallowStable = _interopRequireDefault(require("../../../hooks/useShallowStable"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
@@ -42,8 +44,12 @@ const ChartLine = props => {
     enableLegendAutoScroll = false,
     legendVisibleCount = 8,
     legendScrollInterval = 1500,
-    ...coreOption
+    ...restOption
   } = props;
+  // rest 解构出来的对象每次渲染都是新引用，直接进依赖数组会让 chartOption 的 memo
+  // 恒不命中 —— 父组件每渲染一次就重跑一次 setOption(notMerge)，动画重播、悬浮态被清掉。
+  // useShallowStable 让它回到值语义：内容浅相等就复用同一引用，真变了立刻透出新引用。
+  const coreOption = (0, _useShallowStable.default)(restOption);
   const chartRef = (0, _react.useRef)(null);
   const chartInstanceRef = (0, _react.useRef)(null);
   // Defers `echarts.init` until the container has a box — see the hook for why
@@ -57,6 +63,29 @@ const ChartLine = props => {
   const isDark = (0, _useIsDark.default)();
   const chrome = (0, _react.useMemo)(() => (0, _chartTheme.resolveChartChrome)(isDark), [isDark]);
 
+  // 回调 prop 一律走 useLatestRef，不进依赖数组：消费方传内联箭头（React 里最常见的
+  // 写法）时每次渲染都是新引用，进依赖数组会让「init + setOption(notMerge)」整段重跑，
+  // 还会把当前可视窗口再同步一次给父级 —— 父级据此改 state 就是死循环。
+  // 但「有没有传回调」决定要不要注册监听，所以单独拆成布尔量进依赖数组，
+  // 这样「从无到有传入回调」仍会重新注册，不会漏。
+  const onClickRef = (0, _useLatestRef.default)(onClick);
+  const onLegendSelectChangedRef = (0, _useLatestRef.default)(onLegendSelectChanged);
+  const onDataZoomWindowChangedRef = (0, _useLatestRef.default)(onDataZoomWindowChanged);
+  const hasOnClick = !!onClick;
+  const hasOnLegendSelectChanged = !!onLegendSelectChanged;
+  const hasOnDataZoomWindowChanged = !!onDataZoomWindowChanged;
+  // 已通知过父级的窗口用 ref 记账（不参与渲染）：窗口没变就不再通知，
+  // 掐断「通知 → 父级重算坐标轴 → chartOption 变 → effect 重跑 → 再通知」的自激回路
+  const notifiedZoomWindowRef = (0, _react.useRef)(null);
+  const emitZoomWindow = (0, _react.useCallback)(next => {
+    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 = (0, _react.useMemo)(() => {
     const def_xAxis = (0, _cartesian.createDefaultCategoryXAxis)(xAxisData, chrome);
@@ -238,15 +267,15 @@ const ChartLine = 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()?.dataZoom;
       const zoom = zooms?.[0];
       const totalLen = xAxisData?.length ?? 0;
       if (typeof zoom?.start === "number" && typeof zoom?.end === "number") {
-        onDataZoomWindowChanged((0, _cartesian.percentWindowToIndexWindow)(zoom.start, zoom.end, totalLen));
+        emitZoomWindow((0, _cartesian.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)
         });
@@ -262,16 +291,19 @@ const ChartLine = props => {
       resizeObserverRef.current.observe(chartRef.current);
     }
 
-    // Add click event
-    if (onClick) {
-      chartInstanceRef.current?.on("click", onClick);
+    // Add click event（注册与否看布尔量，实际调用取最新引用）
+    const handleClick = event => {
+      onClickRef.current?.(event);
+    };
+    if (hasOnClick) {
+      chartInstanceRef.current?.on("click", handleClick);
     }
 
     // Legend selection event
     const handleLegendSelectChanged = params => {
-      onLegendSelectChanged?.(params.selected);
+      onLegendSelectChangedRef.current?.(params.selected);
     };
-    if (onLegendSelectChanged) {
+    if (hasOnLegendSelectChanged) {
       chartInstanceRef.current?.on("legendselectchanged", handleLegendSelectChanged);
     }
 
@@ -280,15 +312,15 @@ const ChartLine = props => {
       const raw = params;
       const info = raw?.batch?.[0] ?? raw;
       if (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))
         });
       } else if (typeof info?.start === "number" && typeof info?.end === "number") {
-        onDataZoomWindowChanged?.((0, _cartesian.percentWindowToIndexWindow)(info.start, info.end, xAxisData?.length ?? 0));
+        emitZoomWindow((0, _cartesian.percentWindowToIndexWindow)(info.start, info.end, xAxisData?.length ?? 0));
       }
     };
-    if (onDataZoomWindowChanged) {
+    if (hasOnDataZoomWindowChanged) {
       chartInstanceRef.current?.on("datazoom", handleDataZoom);
     }
 
@@ -315,13 +347,13 @@ const ChartLine = props => {
     // Cleanup function
     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);
       }
       if (legendScrollRef.current) {
@@ -329,7 +361,7 @@ const ChartLine = props => {
         legendScrollRef.current = null;
       }
     };
-  }, [chartOption, handleResize, onClick, onLegendSelectChanged, onDataZoomWindowChanged, xAxisData, enableLegendAutoScroll, legendVisibleCount, legendScrollInterval,
+  }, [chartOption, handleResize, onClickRef, onLegendSelectChangedRef, hasOnClick, hasOnLegendSelectChanged, hasOnDataZoomWindowChanged, emitZoomWindow, xAxisData, enableLegendAutoScroll, legendVisibleCount, legendScrollInterval,
   // 图例是否接管滚轮由它推导，漏了会拿到过期的滚动配置
   normalizedScroll, containerReady]);
 
@@ -348,10 +380,10 @@ const ChartLine = props => {
       startIndex: normalizedScroll.startIndex,
       autoPlay: normalizedScroll.autoScroll,
       enableWheelScroll,
-      onWindowChange: onDataZoomWindowChanged ? (startPercent, endPercent) => onDataZoomWindowChanged((0, _cartesian.percentWindowToIndexWindow)(startPercent, endPercent, xAxisData.length)) : undefined
+      onWindowChange: hasOnDataZoomWindowChanged ? (startPercent, endPercent) => emitZoomWindow((0, _cartesian.percentWindowToIndexWindow)(startPercent, endPercent, xAxisData.length)) : undefined
     });
     return dispose;
-  }, [dataZoom, normalizedScroll, sliderDataZoom, xAxisData, onDataZoomWindowChanged]);
+  }, [dataZoom, normalizedScroll, sliderDataZoom, xAxisData, hasOnDataZoomWindowChanged, emitZoomWindow]);
 
   // Clean up resources when the component unmounts
   (0, _react.useEffect)(() => {

package/lib/components/Chart/Pie/Pie3D/index.js

@@ -12,10 +12,18 @@ var _hooks = require("./_hooks");
 var _option = require("./_utils/option");
 var _indexModule = _interopRequireDefault(require("../../index.module.scss"));
 var _useLatestRef = require("../../../../hooks/useLatestRef");
+var _useShallowStable = _interopRequireDefault(require("../../../../hooks/useShallowStable"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+// 解构默认值写成字面量会每次渲染新建一个对象，进依赖数组就让 memo 恒不命中；提到模块级常量
+const DEFAULT_TOOLTIP = {
+  show: false
+};
+const DEFAULT_LABEL = {
+  show: true
+};
 const ChartPie3D = props => {
   const {
     className,
@@ -30,17 +38,17 @@ const ChartPie3D = props => {
     minHeight = 1,
     maxHeight = 10,
     yOffset = -0.2,
-    tooltip = {
-      show: false
-    },
-    label = {
-      show: true
-    },
+    tooltip = DEFAULT_TOOLTIP,
+    label = DEFAULT_LABEL,
     enableMouseControl = false,
     onChart,
     onClick,
-    ...coreOption
+    ...restOption
   } = props;
+  // rest 解构出来的对象每次渲染都是新引用，直接进依赖数组会让 chartOption 的 memo
+  // 恒不命中 —— 父组件每渲染一次就重跑一次 setOption(notMerge)，动画重播、悬浮态被清掉。
+  // useShallowStable 让它回到值语义：内容浅相等就复用同一引用，真变了立刻透出新引用。
+  const coreOption = (0, _useShallowStable.default)(restOption);
   const chartRef = (0, _react.useRef)(null);
   const chartInstanceRef = (0, _react.useRef)(null);
   // Defers `echarts.init` until the container has a box — see the hook for why
@@ -87,6 +95,12 @@ const ChartPie3D = props => {
   });
   const onChartRef = (0, _useLatestRef.useLatestRef)(onChart);
 
+  // onClick 不进依赖数组：消费方传内联箭头时每次渲染都是新引用，effect 跟着重跑会重建
+  // 3D 饼的 option 并重播动画。注册与否看布尔量（保证「从无到有传入」仍会注册），
+  // 实际调用取 ref 里的最新引用。
+  const onClickRef = (0, _useLatestRef.useLatestRef)(onClick);
+  const hasOnClick = !!onClick;
+
   // 回调 prop 不进依赖数组：消费方传内联箭头时每次渲染都是新引用，effect 会跟着
   // 重跑并再调一次回调 —— 回调里 setState 就是死循环（详见 Input/TextArea 的说明）
   (0, _react.useEffect)(() => {
@@ -106,20 +120,23 @@ const ChartPie3D = props => {
     }
     chart.on("mouseover", handleMouseOver);
     chart.on("globalout", handleGlobalOut);
-    if (onClick) {
-      chart.on("click", onClick);
+    const handleClick = event => {
+      onClickRef.current?.(event);
+    };
+    if (hasOnClick) {
+      chart.on("click", handleClick);
     }
     return () => {
       window.removeEventListener("resize", handleResize);
       if (chart) {
         chart.off("mouseover", handleMouseOver);
         chart.off("globalout", handleGlobalOut);
-        if (onClick) {
-          chart.off("click", onClick);
+        if (hasOnClick) {
+          chart.off("click", handleClick);
         }
       }
     };
-  }, [chartOption, handleResize, handleMouseOver, handleGlobalOut, onChartRef, onClick, containerReady]);
+  }, [chartOption, handleResize, handleMouseOver, handleGlobalOut, onChartRef, onClickRef, hasOnClick, containerReady]);
   (0, _react.useEffect)(() => {
     return () => {
       if (resizeObserverRef.current) {