@hsu-react/ui 2.5.4 → 2.5.6

package/es/components/ChainGraph/_hooks/useChainGraphData.js

@@ -4,8 +4,9 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { Equal } from "hsu-utils";
+import { useLatestRef } from "../../../hooks/useLatestRef";
 export function useChainGraphData(props) {
   var graph = props.graph,
     data = props.data,
@@ -22,6 +23,29 @@ export function useChainGraphData(props) {
     _useState4 = _slicedToArray(_useState3, 2),
     isLayouting = _useState4[0],
     setIsLayouting = _useState4[1];
+
+  // 这三个回调都是「交给图实例、由它在后续事件里回调」的出口，不是数据本身。
+  // 它们进依赖数组是条死依赖：effect 体被 ObjEqual(lastData, data) 挡住，
+  // 引用变了也不会重新 setData —— 图里存的还是首次 setData 时那个闭包，
+  // 换了引用永远调不到（stale closure）。改成引用恒定的转发函数：
+  // 依赖数组只留真正的输入（graph/data/level/rootLevel），调用时总是取到最新的回调。
+  var getImageRef = useLatestRef(getImage);
+  var labelRenderRef = useLatestRef(labelRender);
+  var onLayoutingChangeRef = useLatestRef(onLayoutingChange);
+  var emitImage = useCallback(function (img) {
+    var _getImageRef$current;
+    (_getImageRef$current = getImageRef.current) === null || _getImageRef$current === void 0 || _getImageRef$current.call(getImageRef, img);
+  }, [getImageRef]);
+  // labelRender 在 ChainGraphServices.setData 里是「传了才改写 label」的真值判断，
+  // 所以这里保留「有没有传」的语义：没传就传 undefined，传了才给转发函数。
+  var renderLabel = useCallback(function (label) {
+    return labelRenderRef.current(label);
+  }, [labelRenderRef]);
+  var emitLayouting = useCallback(function (value) {
+    var _onLayoutingChangeRef;
+    setIsLayouting(value);
+    (_onLayoutingChangeRef = onLayoutingChangeRef.current) === null || _onLayoutingChangeRef === void 0 || _onLayoutingChangeRef.call(onLayoutingChangeRef, value);
+  }, [onLayoutingChangeRef]);
   useEffect(function () {
     if (graph && !Equal.ObjEqual(lastData, data)) {
       setLastData(data);
@@ -29,15 +53,12 @@ export function useChainGraphData(props) {
         data: data,
         level: level,
         rootLevel: rootLevel,
-        getImage: getImage,
-        isLayouting: function isLayouting(value) {
-          setIsLayouting(value);
-          onLayoutingChange === null || onLayoutingChange === void 0 || onLayoutingChange(value);
-        },
-        labelRender: labelRender
+        getImage: emitImage,
+        isLayouting: emitLayouting,
+        labelRender: labelRenderRef.current ? renderLabel : undefined
       });
     }
-  }, [graph, data, level, rootLevel, getImage, labelRender, onLayoutingChange, lastData]);
+  }, [graph, data, level, rootLevel, lastData, emitImage, emitLayouting, renderLabel, labelRenderRef]);
   return {
     isLayouting: isLayouting
   };

package/es/components/ChainGraph/_hooks/useChainGraphLayout.js

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

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

@@ -16,6 +16,8 @@ import { autoScrollByItem } from "../_utils/autoSmooth";
 import { buildCartesianSeriesOptions, createDefaultCategoryXAxis, createDefaultValueYAxis, getSliderShow, percentWindowToIndexWindow, resolveScrollConfig } from "../_utils/cartesian";
 import { resolveChartChrome } from "../_utils/chartTheme";
 import useIsDark from "../../../hooks/useIsDark";
+import useLatestRef from "../../../hooks/useLatestRef";
+import useShallowStable from "../../../hooks/useShallowStable";
 import { jsx as _jsx } from "react/jsx-runtime";
 var ChartBar = function ChartBar(props) {
   var className = props.className,
@@ -44,7 +46,11 @@ var ChartBar = function ChartBar(props) {
     legendVisibleCount = _props$legendVisibleC === void 0 ? 8 : _props$legendVisibleC,
     _props$legendScrollIn = props.legendScrollInterval,
     legendScrollInterval = _props$legendScrollIn === void 0 ? 1500 : _props$legendScrollIn,
-    coreOption = _objectWithoutProperties(props, _excluded);
+    restOption = _objectWithoutProperties(props, _excluded);
+  // rest 解构出来的对象每次渲染都是新引用，直接进依赖数组会让 chartOption 的 memo
+  // 恒不命中 —— 父组件每渲染一次就重跑一次 setOption(notMerge)，动画重播、悬浮态被清掉。
+  // useShallowStable 让它回到值语义：内容浅相等就复用同一引用，真变了立刻透出新引用。
+  var coreOption = useShallowStable(restOption);
   var chartRef = useRef(null);
   var chartInstanceRef = useRef(null);
   // Defers `echarts.init` until the container has a box — see the hook for why
@@ -62,6 +68,30 @@ var ChartBar = function ChartBar(props) {
     return resolveChartChrome(isDark);
   }, [isDark]);
 
+  // 回调 prop 一律走 useLatestRef，不进依赖数组：消费方传内联箭头（React 里最常见的
+  // 写法）时每次渲染都是新引用，进依赖数组会让「init + setOption(notMerge)」整段重跑，
+  // 还会把当前可视窗口再同步一次给父级 —— 父级据此改 state 就是死循环。
+  // 但「有没有传回调」决定要不要注册监听，所以单独拆成布尔量进依赖数组，
+  // 这样「从无到有传入回调」仍会重新注册，不会漏。
+  var onClickRef = useLatestRef(onClick);
+  var onLegendSelectChangedRef = useLatestRef(onLegendSelectChanged);
+  var onDataZoomWindowChangedRef = useLatestRef(onDataZoomWindowChanged);
+  var hasOnClick = !!onClick;
+  var hasOnLegendSelectChanged = !!onLegendSelectChanged;
+  var hasOnDataZoomWindowChanged = !!onDataZoomWindowChanged;
+  // 已通知过父级的窗口用 ref 记账（不参与渲染）：窗口没变就不再通知，
+  // 掐断「通知 → 父级重算坐标轴 → chartOption 变 → effect 重跑 → 再通知」的自激回路
+  var notifiedZoomWindowRef = useRef(null);
+  var emitZoomWindow = useCallback(function (next) {
+    var _onDataZoomWindowChan;
+    var prev = notifiedZoomWindowRef.current;
+    if (prev && prev.startIndex === next.startIndex && prev.endIndex === next.endIndex) {
+      return;
+    }
+    notifiedZoomWindowRef.current = next;
+    (_onDataZoomWindowChan = onDataZoomWindowChangedRef.current) === null || _onDataZoomWindowChan === void 0 || _onDataZoomWindowChan.call(onDataZoomWindowChangedRef, next);
+  }, [onDataZoomWindowChangedRef]);
+
   // Cache the chart option with useMemo
   var chartOption = useMemo(function () {
     var _xAxisData$length, _ref, _ref2;
@@ -239,16 +269,16 @@ var ChartBar = function 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) {
       var _chart$getOption3, _xAxisData$length2;
       var zooms = (_chart$getOption3 = chart.getOption()) === null || _chart$getOption3 === void 0 ? void 0 : _chart$getOption3.dataZoom;
       var zoom = zooms === null || zooms === void 0 ? void 0 : zooms[0];
       var totalLen = (_xAxisData$length2 = xAxisData === null || xAxisData === void 0 ? void 0 : xAxisData.length) !== null && _xAxisData$length2 !== void 0 ? _xAxisData$length2 : 0;
       if (typeof (zoom === null || zoom === void 0 ? void 0 : zoom.start) === "number" && typeof (zoom === null || zoom === void 0 ? void 0 : zoom.end) === "number") {
-        onDataZoomWindowChanged(percentWindowToIndexWindow(zoom.start, zoom.end, totalLen));
+        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)
         });
@@ -264,17 +294,22 @@ var ChartBar = function ChartBar(props) {
       resizeObserverRef.current.observe(chartRef.current);
     }
 
-    // Add click event
-    if (onClick) {
+    // Add click event（注册与否看布尔量，实际调用取最新引用）
+    var handleClick = function handleClick(event) {
+      var _onClickRef$current;
+      (_onClickRef$current = onClickRef.current) === null || _onClickRef$current === void 0 || _onClickRef$current.call(onClickRef, event);
+    };
+    if (hasOnClick) {
       var _chartInstanceRef$cur2;
-      (_chartInstanceRef$cur2 = chartInstanceRef.current) === null || _chartInstanceRef$cur2 === void 0 || _chartInstanceRef$cur2.on("click", onClick);
+      (_chartInstanceRef$cur2 = chartInstanceRef.current) === null || _chartInstanceRef$cur2 === void 0 || _chartInstanceRef$cur2.on("click", handleClick);
     }
 
     // Legend selection event
     var handleLegendSelectChanged = function handleLegendSelectChanged(params) {
-      onLegendSelectChanged === null || onLegendSelectChanged === void 0 || onLegendSelectChanged(params.selected);
+      var _onLegendSelectChange;
+      (_onLegendSelectChange = onLegendSelectChangedRef.current) === null || _onLegendSelectChange === void 0 || _onLegendSelectChange.call(onLegendSelectChangedRef, params.selected);
     };
-    if (onLegendSelectChanged) {
+    if (hasOnLegendSelectChanged) {
       var _chartInstanceRef$cur3;
       (_chartInstanceRef$cur3 = chartInstanceRef.current) === null || _chartInstanceRef$cur3 === void 0 || _chartInstanceRef$cur3.on("legendselectchanged", handleLegendSelectChanged);
     }
@@ -285,16 +320,16 @@ var ChartBar = function ChartBar(props) {
       var raw = params;
       var info = (_raw$batch$ = raw === null || raw === void 0 || (_raw$batch = raw.batch) === null || _raw$batch === void 0 ? void 0 : _raw$batch[0]) !== null && _raw$batch$ !== void 0 ? _raw$batch$ : raw;
       if (typeof (info === null || info === void 0 ? void 0 : info.startValue) === "number" && typeof (info === null || info === void 0 ? void 0 : info.endValue) === "number") {
-        onDataZoomWindowChanged === null || onDataZoomWindowChanged === void 0 || onDataZoomWindowChanged({
+        emitZoomWindow({
           startIndex: Math.max(0, Math.round(info.startValue)),
           endIndex: Math.max(0, Math.round(info.endValue))
         });
       } else if (typeof (info === null || info === void 0 ? void 0 : info.start) === "number" && typeof (info === null || info === void 0 ? void 0 : info.end) === "number") {
         var _xAxisData$length3;
-        onDataZoomWindowChanged === null || onDataZoomWindowChanged === void 0 || onDataZoomWindowChanged(percentWindowToIndexWindow(info.start, info.end, (_xAxisData$length3 = xAxisData === null || xAxisData === void 0 ? void 0 : xAxisData.length) !== null && _xAxisData$length3 !== void 0 ? _xAxisData$length3 : 0));
+        emitZoomWindow(percentWindowToIndexWindow(info.start, info.end, (_xAxisData$length3 = xAxisData === null || xAxisData === void 0 ? void 0 : xAxisData.length) !== null && _xAxisData$length3 !== void 0 ? _xAxisData$length3 : 0));
       }
     };
-    if (onDataZoomWindowChanged) {
+    if (hasOnDataZoomWindowChanged) {
       var _chartInstanceRef$cur4;
       (_chartInstanceRef$cur4 = chartInstanceRef.current) === null || _chartInstanceRef$cur4 === void 0 || _chartInstanceRef$cur4.on("datazoom", handleDataZoom);
     }
@@ -322,15 +357,15 @@ var ChartBar = function ChartBar(props) {
     // Cleanup function
     return function () {
       window.removeEventListener("resize", handleResize);
-      if (onClick) {
+      if (hasOnClick) {
         var _chartInstanceRef$cur5;
-        (_chartInstanceRef$cur5 = chartInstanceRef.current) === null || _chartInstanceRef$cur5 === void 0 || _chartInstanceRef$cur5.off("click", onClick);
+        (_chartInstanceRef$cur5 = chartInstanceRef.current) === null || _chartInstanceRef$cur5 === void 0 || _chartInstanceRef$cur5.off("click", handleClick);
       }
-      if (onLegendSelectChanged) {
+      if (hasOnLegendSelectChanged) {
         var _chartInstanceRef$cur6;
         (_chartInstanceRef$cur6 = chartInstanceRef.current) === null || _chartInstanceRef$cur6 === void 0 || _chartInstanceRef$cur6.off("legendselectchanged", handleLegendSelectChanged);
       }
-      if (onDataZoomWindowChanged) {
+      if (hasOnDataZoomWindowChanged) {
         var _chartInstanceRef$cur7;
         (_chartInstanceRef$cur7 = chartInstanceRef.current) === null || _chartInstanceRef$cur7 === void 0 || _chartInstanceRef$cur7.off("datazoom", handleDataZoom);
       }
@@ -339,7 +374,7 @@ var ChartBar = function 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]);
 
@@ -359,13 +394,13 @@ var ChartBar = function ChartBar(props) {
         startIndex: normalizedScroll.startIndex,
         autoPlay: normalizedScroll.autoScroll,
         enableWheelScroll: enableWheelScroll,
-        onWindowChange: onDataZoomWindowChanged ? function (startPercent, endPercent) {
-          return onDataZoomWindowChanged(percentWindowToIndexWindow(startPercent, endPercent, xAxisData.length));
+        onWindowChange: hasOnDataZoomWindowChanged ? function (startPercent, endPercent) {
+          return emitZoomWindow(percentWindowToIndexWindow(startPercent, endPercent, xAxisData.length));
         } : undefined
       }),
       dispose = _autoScrollByItem.dispose;
     return dispose;
-  }, [dataZoom, normalizedScroll, sliderDataZoom, xAxisData, onDataZoomWindowChanged]);
+  }, [dataZoom, normalizedScroll, sliderDataZoom, xAxisData, hasOnDataZoomWindowChanged, emitZoomWindow]);
 
   // Clean up resources when the component unmounts
   useEffect(function () {

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

@@ -22,6 +22,7 @@ import styles from "../index.module.scss";
 import * as echarts from "echarts";
 import { defaultBubbleColorList, drawCircles } from "../_utils/bubble";
 import { useLatestRef } from "../../../hooks/useLatestRef";
+import useShallowStable from "../../../hooks/useShallowStable";
 
 // Extended data item type containing all properties the chart needs
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -38,7 +39,11 @@ var Bubble = function Bubble(props) {
     title = props.title,
     onChart = props.onChart,
     onClick = props.onClick,
-    coreOption = _objectWithoutProperties(props, _excluded);
+    restOption = _objectWithoutProperties(props, _excluded);
+  // rest 解构出来的对象每次渲染都是新引用，直接进依赖数组会让 chartOption 的 memo
+  // 恒不命中 —— 父组件每渲染一次就重跑一次 setOption(notMerge)，动画重播、悬浮态被清掉。
+  // useShallowStable 让它回到值语义：内容浅相等就复用同一引用，真变了立刻透出新引用。
+  var coreOption = useShallowStable(restOption);
   var chartRef = useRef(null);
   var chartInstanceRef = useRef(null);
   var resizeObserverRef = useRef(null);
@@ -279,6 +284,12 @@ var Bubble = function Bubble(props) {
   }, [chartOption, data]);
   var onChartRef = useLatestRef(onChart);
 
+  // onClick 不进依赖数组：消费方传内联箭头时每次渲染都是新引用，effect 跟着重跑就会
+  // 再走一遍 setOption(notMerge)，动画重播、悬浮/高亮态被清掉。注册与否看布尔量，
+  // 这样「从无到有传入 onClick」仍会注册；实际调用取 ref 里的最新引用。
+  var onClickRef = useLatestRef(onClick);
+  var hasOnClick = !!onClick;
+
   // 回调 prop 不进依赖数组：消费方传内联箭头时每次渲染都是新引用，effect 会跟着
   // 重跑并再调一次回调 —— 回调里 setState 就是死循环（详见 Input/TextArea 的说明）
   // Initialize the chart
@@ -305,20 +316,24 @@ var Bubble = function Bubble(props) {
     window.addEventListener("resize", handleResize);
 
     // Add click event
-    if (onClick) {
+    var handleClick = function handleClick(event) {
+      var _onClickRef$current;
+      (_onClickRef$current = onClickRef.current) === null || _onClickRef$current === void 0 || _onClickRef$current.call(onClickRef, event);
+    };
+    if (hasOnClick) {
       var _chartInstanceRef$cur2;
-      (_chartInstanceRef$cur2 = chartInstanceRef.current) === null || _chartInstanceRef$cur2 === void 0 || _chartInstanceRef$cur2.on("click", onClick);
+      (_chartInstanceRef$cur2 = chartInstanceRef.current) === null || _chartInstanceRef$cur2 === void 0 || _chartInstanceRef$cur2.on("click", handleClick);
     }
 
     // Cleanup function
     return function () {
       window.removeEventListener("resize", handleResize);
-      if (onClick) {
+      if (hasOnClick) {
         var _chartInstanceRef$cur3;
-        (_chartInstanceRef$cur3 = chartInstanceRef.current) === null || _chartInstanceRef$cur3 === void 0 || _chartInstanceRef$cur3.off("click", onClick);
+        (_chartInstanceRef$cur3 = chartInstanceRef.current) === null || _chartInstanceRef$cur3 === void 0 || _chartInstanceRef$cur3.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
   useEffect(function () {

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

@@ -12,12 +12,17 @@ import useContainerReady from "../_hooks/useContainerReady";
 import styles from "../index.module.scss";
 import * as echarts from "echarts";
 import { useLatestRef } from "../../../hooks/useLatestRef";
+import useShallowStable from "../../../hooks/useShallowStable";
 import { jsx as _jsx } from "react/jsx-runtime";
 var Common = function Common(props) {
   var className = props.className,
     style = props.style,
     onChart = props.onChart,
-    coreOption = _objectWithoutProperties(props, _excluded);
+    restOption = _objectWithoutProperties(props, _excluded);
+  // rest 解构出来的对象每次渲染都是新引用，直接进依赖数组会让 chartOption 的 memo
+  // 恒不命中 —— 父组件每渲染一次就重跑一次 setOption(notMerge)，动画重播、悬浮态被清掉。
+  // useShallowStable 让它回到值语义：内容浅相等就复用同一引用，真变了立刻透出新引用。
+  var coreOption = useShallowStable(restOption);
   var chartRef = useRef(null);
   var chartInstanceRef = useRef(null);
   // Defers `echarts.init` until the container has a box — see the hook for why

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

@@ -11,6 +11,7 @@ import * as echarts from "echarts";
 import useContainerReady from "../_hooks/useContainerReady";
 import React, { useCallback, useEffect, useMemo, useRef } from "react";
 import styles from "../index.module.scss";
+import useShallowStable from "../../../hooks/useShallowStable";
 import { jsx as _jsx } from "react/jsx-runtime";
 var Gauge = function Gauge(props) {
   var className = props.className,
@@ -29,7 +30,11 @@ var Gauge = function Gauge(props) {
     title = _ref.title,
     _ref$color = _ref.color,
     color = _ref$color === void 0 ? "#1675FB" : _ref$color,
-    coreSeries = _objectWithoutProperties(_ref, _excluded);
+    restSeries = _objectWithoutProperties(_ref, _excluded);
+  // rest 解构出来的对象每次渲染都是新引用，直接进依赖数组会让 chartOption 的 memo
+  // 恒不命中 —— 父组件每渲染一次就重跑一次 setOption(notMerge)，动画重播、悬浮态被清掉。
+  // useShallowStable 让它回到值语义：内容浅相等就复用同一引用，真变了立刻透出新引用。
+  var coreSeries = useShallowStable(restSeries);
   var chartRef = useRef(null);
   var chartInstanceRef = useRef(null);
   // Defers `echarts.init` until the container has a box — see the hook for why

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

@@ -21,7 +21,10 @@ import { createDefaultHeatmapXAxis, createDefaultHeatmapYAxis } from "../_utils/
 import { resolveChartChrome } from "../_utils/chartTheme";
 import useIsDark from "../../../hooks/useIsDark";
 import { useLatestRef } from "../../../hooks/useLatestRef";
+import useShallowStable from "../../../hooks/useShallowStable";
 import { jsx as _jsx } from "react/jsx-runtime";
+// 解构默认值写成字面量会每次渲染新建一个数组，进依赖数组就让 memo 恒不命中；提到模块级常量
+var DEFAULT_IN_RANGE_COLOR = ["#8BCCFB", "#75C3FB", "#5AB5F6", "#42AEFA", "#2DA1F5", "#0F89E1", "#056FBB", "#025794", "#0A4089"];
 var Heatmap = function Heatmap(props) {
   var className = props.className,
     style = props.style,
@@ -40,8 +43,12 @@ var Heatmap = function Heatmap(props) {
     onClick = props.onClick,
     zeroColor = props.zeroColor,
     _props$inRangeColor = props.inRangeColor,
-    inRangeColor = _props$inRangeColor === void 0 ? ["#8BCCFB", "#75C3FB", "#5AB5F6", "#42AEFA", "#2DA1F5", "#0F89E1", "#056FBB", "#025794", "#0A4089"] : _props$inRangeColor,
-    coreOption = _objectWithoutProperties(props, _excluded);
+    inRangeColor = _props$inRangeColor === void 0 ? DEFAULT_IN_RANGE_COLOR : _props$inRangeColor,
+    restOption = _objectWithoutProperties(props, _excluded);
+  // rest 解构出来的对象每次渲染都是新引用，直接进依赖数组会让 chartOption 的 memo
+  // 恒不命中 —— 父组件每渲染一次就重跑一次 setOption(notMerge)，动画重播、悬浮态被清掉。
+  // useShallowStable 让它回到值语义：内容浅相等就复用同一引用，真变了立刻透出新引用。
+  var coreOption = useShallowStable(restOption);
   var chartRef = useRef(null);
   var chartInstanceRef = useRef(null);
   // Defers `echarts.init` until the container has a box — see the hook for why
@@ -195,6 +202,12 @@ var Heatmap = function Heatmap(props) {
   }, []);
   var onChartRef = useLatestRef(onChart);
 
+  // onClick 不进依赖数组：消费方传内联箭头时每次渲染都是新引用，effect 跟着重跑就会
+  // 再走一遍 setOption(notMerge)，动画重播、悬浮/高亮态被清掉。注册与否看布尔量，
+  // 这样「从无到有传入 onClick」仍会注册；实际调用取 ref 里的最新引用。
+  var onClickRef = useLatestRef(onClick);
+  var hasOnClick = !!onClick;
+
   // 回调 prop 不进依赖数组：消费方传内联箭头时每次渲染都是新引用，effect 会跟着
   // 重跑并再调一次回调 —— 回调里 setState 就是死循环（详见 Input/TextArea 的说明）
   // Initialize the chart
@@ -224,20 +237,24 @@ var Heatmap = function Heatmap(props) {
     }
 
     // Add click event
-    if (onClick) {
+    var handleClick = function handleClick(event) {
+      var _onClickRef$current;
+      (_onClickRef$current = onClickRef.current) === null || _onClickRef$current === void 0 || _onClickRef$current.call(onClickRef, event);
+    };
+    if (hasOnClick) {
       var _chartInstanceRef$cur2;
-      (_chartInstanceRef$cur2 = chartInstanceRef.current) === null || _chartInstanceRef$cur2 === void 0 || _chartInstanceRef$cur2.on("click", onClick);
+      (_chartInstanceRef$cur2 = chartInstanceRef.current) === null || _chartInstanceRef$cur2 === void 0 || _chartInstanceRef$cur2.on("click", handleClick);
     }
 
     // Cleanup function
     return function () {
       window.removeEventListener("resize", handleResize);
-      if (onClick) {
+      if (hasOnClick) {
         var _chartInstanceRef$cur3;
-        (_chartInstanceRef$cur3 = chartInstanceRef.current) === null || _chartInstanceRef$cur3 === void 0 || _chartInstanceRef$cur3.off("click", onClick);
+        (_chartInstanceRef$cur3 = chartInstanceRef.current) === null || _chartInstanceRef$cur3 === void 0 || _chartInstanceRef$cur3.off("click", handleClick);
       }
     };
-  }, [chartOption, handleResize, onChartRef, onClick, containerReady]);
+  }, [chartOption, handleResize, onChartRef, onClickRef, hasOnClick, containerReady]);
 
   // Clean up resources when the component unmounts
   useEffect(function () {

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

@@ -16,6 +16,8 @@ import { autoScrollByItem } from "../_utils/autoSmooth";
 import { buildCartesianSeriesOptions, createDefaultCategoryXAxis, createDefaultValueYAxis, getSliderShow, percentWindowToIndexWindow, resolveScrollConfig } from "../_utils/cartesian";
 import { resolveChartChrome } from "../_utils/chartTheme";
 import useIsDark from "../../../hooks/useIsDark";
+import useLatestRef from "../../../hooks/useLatestRef";
+import useShallowStable from "../../../hooks/useShallowStable";
 import { jsx as _jsx } from "react/jsx-runtime";
 var ChartLine = function ChartLine(props) {
   var className = props.className,
@@ -44,7 +46,11 @@ var ChartLine = function ChartLine(props) {
     legendVisibleCount = _props$legendVisibleC === void 0 ? 8 : _props$legendVisibleC,
     _props$legendScrollIn = props.legendScrollInterval,
     legendScrollInterval = _props$legendScrollIn === void 0 ? 1500 : _props$legendScrollIn,
-    coreOption = _objectWithoutProperties(props, _excluded);
+    restOption = _objectWithoutProperties(props, _excluded);
+  // rest 解构出来的对象每次渲染都是新引用，直接进依赖数组会让 chartOption 的 memo
+  // 恒不命中 —— 父组件每渲染一次就重跑一次 setOption(notMerge)，动画重播、悬浮态被清掉。
+  // useShallowStable 让它回到值语义：内容浅相等就复用同一引用，真变了立刻透出新引用。
+  var coreOption = useShallowStable(restOption);
   var chartRef = useRef(null);
   var chartInstanceRef = useRef(null);
   // Defers `echarts.init` until the container has a box — see the hook for why
@@ -62,6 +68,30 @@ var ChartLine = function ChartLine(props) {
     return resolveChartChrome(isDark);
   }, [isDark]);
 
+  // 回调 prop 一律走 useLatestRef，不进依赖数组：消费方传内联箭头（React 里最常见的
+  // 写法）时每次渲染都是新引用，进依赖数组会让「init + setOption(notMerge)」整段重跑，
+  // 还会把当前可视窗口再同步一次给父级 —— 父级据此改 state 就是死循环。
+  // 但「有没有传回调」决定要不要注册监听，所以单独拆成布尔量进依赖数组，
+  // 这样「从无到有传入回调」仍会重新注册，不会漏。
+  var onClickRef = useLatestRef(onClick);
+  var onLegendSelectChangedRef = useLatestRef(onLegendSelectChanged);
+  var onDataZoomWindowChangedRef = useLatestRef(onDataZoomWindowChanged);
+  var hasOnClick = !!onClick;
+  var hasOnLegendSelectChanged = !!onLegendSelectChanged;
+  var hasOnDataZoomWindowChanged = !!onDataZoomWindowChanged;
+  // 已通知过父级的窗口用 ref 记账（不参与渲染）：窗口没变就不再通知，
+  // 掐断「通知 → 父级重算坐标轴 → chartOption 变 → effect 重跑 → 再通知」的自激回路
+  var notifiedZoomWindowRef = useRef(null);
+  var emitZoomWindow = useCallback(function (next) {
+    var _onDataZoomWindowChan;
+    var prev = notifiedZoomWindowRef.current;
+    if (prev && prev.startIndex === next.startIndex && prev.endIndex === next.endIndex) {
+      return;
+    }
+    notifiedZoomWindowRef.current = next;
+    (_onDataZoomWindowChan = onDataZoomWindowChangedRef.current) === null || _onDataZoomWindowChan === void 0 || _onDataZoomWindowChan.call(onDataZoomWindowChangedRef, next);
+  }, [onDataZoomWindowChangedRef]);
+
   // Cache the chart option with useMemo
   var chartOption = useMemo(function () {
     var _xAxisData$length, _ref, _ref2;
@@ -236,16 +266,16 @@ var ChartLine = function 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) {
       var _chart$getOption3, _xAxisData$length2;
       var zooms = (_chart$getOption3 = chart.getOption()) === null || _chart$getOption3 === void 0 ? void 0 : _chart$getOption3.dataZoom;
       var zoom = zooms === null || zooms === void 0 ? void 0 : zooms[0];
       var totalLen = (_xAxisData$length2 = xAxisData === null || xAxisData === void 0 ? void 0 : xAxisData.length) !== null && _xAxisData$length2 !== void 0 ? _xAxisData$length2 : 0;
       if (typeof (zoom === null || zoom === void 0 ? void 0 : zoom.start) === "number" && typeof (zoom === null || zoom === void 0 ? void 0 : zoom.end) === "number") {
-        onDataZoomWindowChanged(percentWindowToIndexWindow(zoom.start, zoom.end, totalLen));
+        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)
         });
@@ -261,17 +291,22 @@ var ChartLine = function ChartLine(props) {
       resizeObserverRef.current.observe(chartRef.current);
     }
 
-    // Add click event
-    if (onClick) {
+    // Add click event（注册与否看布尔量，实际调用取最新引用）
+    var handleClick = function handleClick(event) {
+      var _onClickRef$current;
+      (_onClickRef$current = onClickRef.current) === null || _onClickRef$current === void 0 || _onClickRef$current.call(onClickRef, event);
+    };
+    if (hasOnClick) {
       var _chartInstanceRef$cur2;
-      (_chartInstanceRef$cur2 = chartInstanceRef.current) === null || _chartInstanceRef$cur2 === void 0 || _chartInstanceRef$cur2.on("click", onClick);
+      (_chartInstanceRef$cur2 = chartInstanceRef.current) === null || _chartInstanceRef$cur2 === void 0 || _chartInstanceRef$cur2.on("click", handleClick);
     }
 
     // Legend selection event
     var handleLegendSelectChanged = function handleLegendSelectChanged(params) {
-      onLegendSelectChanged === null || onLegendSelectChanged === void 0 || onLegendSelectChanged(params.selected);
+      var _onLegendSelectChange;
+      (_onLegendSelectChange = onLegendSelectChangedRef.current) === null || _onLegendSelectChange === void 0 || _onLegendSelectChange.call(onLegendSelectChangedRef, params.selected);
     };
-    if (onLegendSelectChanged) {
+    if (hasOnLegendSelectChanged) {
       var _chartInstanceRef$cur3;
       (_chartInstanceRef$cur3 = chartInstanceRef.current) === null || _chartInstanceRef$cur3 === void 0 || _chartInstanceRef$cur3.on("legendselectchanged", handleLegendSelectChanged);
     }
@@ -282,16 +317,16 @@ var ChartLine = function ChartLine(props) {
       var raw = params;
       var info = (_raw$batch$ = raw === null || raw === void 0 || (_raw$batch = raw.batch) === null || _raw$batch === void 0 ? void 0 : _raw$batch[0]) !== null && _raw$batch$ !== void 0 ? _raw$batch$ : raw;
       if (typeof (info === null || info === void 0 ? void 0 : info.startValue) === "number" && typeof (info === null || info === void 0 ? void 0 : info.endValue) === "number") {
-        onDataZoomWindowChanged === null || onDataZoomWindowChanged === void 0 || onDataZoomWindowChanged({
+        emitZoomWindow({
           startIndex: Math.max(0, Math.round(info.startValue)),
           endIndex: Math.max(0, Math.round(info.endValue))
         });
       } else if (typeof (info === null || info === void 0 ? void 0 : info.start) === "number" && typeof (info === null || info === void 0 ? void 0 : info.end) === "number") {
         var _xAxisData$length3;
-        onDataZoomWindowChanged === null || onDataZoomWindowChanged === void 0 || onDataZoomWindowChanged(percentWindowToIndexWindow(info.start, info.end, (_xAxisData$length3 = xAxisData === null || xAxisData === void 0 ? void 0 : xAxisData.length) !== null && _xAxisData$length3 !== void 0 ? _xAxisData$length3 : 0));
+        emitZoomWindow(percentWindowToIndexWindow(info.start, info.end, (_xAxisData$length3 = xAxisData === null || xAxisData === void 0 ? void 0 : xAxisData.length) !== null && _xAxisData$length3 !== void 0 ? _xAxisData$length3 : 0));
       }
     };
-    if (onDataZoomWindowChanged) {
+    if (hasOnDataZoomWindowChanged) {
       var _chartInstanceRef$cur4;
       (_chartInstanceRef$cur4 = chartInstanceRef.current) === null || _chartInstanceRef$cur4 === void 0 || _chartInstanceRef$cur4.on("datazoom", handleDataZoom);
     }
@@ -319,15 +354,15 @@ var ChartLine = function ChartLine(props) {
     // Cleanup function
     return function () {
       window.removeEventListener("resize", handleResize);
-      if (onClick) {
+      if (hasOnClick) {
         var _chartInstanceRef$cur5;
-        (_chartInstanceRef$cur5 = chartInstanceRef.current) === null || _chartInstanceRef$cur5 === void 0 || _chartInstanceRef$cur5.off("click", onClick);
+        (_chartInstanceRef$cur5 = chartInstanceRef.current) === null || _chartInstanceRef$cur5 === void 0 || _chartInstanceRef$cur5.off("click", handleClick);
       }
-      if (onLegendSelectChanged) {
+      if (hasOnLegendSelectChanged) {
         var _chartInstanceRef$cur6;
         (_chartInstanceRef$cur6 = chartInstanceRef.current) === null || _chartInstanceRef$cur6 === void 0 || _chartInstanceRef$cur6.off("legendselectchanged", handleLegendSelectChanged);
       }
-      if (onDataZoomWindowChanged) {
+      if (hasOnDataZoomWindowChanged) {
         var _chartInstanceRef$cur7;
         (_chartInstanceRef$cur7 = chartInstanceRef.current) === null || _chartInstanceRef$cur7 === void 0 || _chartInstanceRef$cur7.off("datazoom", handleDataZoom);
       }
@@ -336,7 +371,7 @@ var ChartLine = function 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]);
 
@@ -356,13 +391,13 @@ var ChartLine = function ChartLine(props) {
         startIndex: normalizedScroll.startIndex,
         autoPlay: normalizedScroll.autoScroll,
         enableWheelScroll: enableWheelScroll,
-        onWindowChange: onDataZoomWindowChanged ? function (startPercent, endPercent) {
-          return onDataZoomWindowChanged(percentWindowToIndexWindow(startPercent, endPercent, xAxisData.length));
+        onWindowChange: hasOnDataZoomWindowChanged ? function (startPercent, endPercent) {
+          return emitZoomWindow(percentWindowToIndexWindow(startPercent, endPercent, xAxisData.length));
         } : undefined
       }),
       dispose = _autoScrollByItem.dispose;
     return dispose;
-  }, [dataZoom, normalizedScroll, sliderDataZoom, xAxisData, onDataZoomWindowChanged]);
+  }, [dataZoom, normalizedScroll, sliderDataZoom, xAxisData, hasOnDataZoomWindowChanged, emitZoomWindow]);
 
   // Clean up resources when the component unmounts
   useEffect(function () {