@hsu-react/ui 2.5.4 → 2.5.6

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

@@ -24,6 +24,8 @@ import {
 } from "../_utils/cartesian";
 import { resolveChartChrome } from "../_utils/chartTheme";
 import useIsDark from "../../../hooks/useIsDark";
+import useLatestRef from "../../../hooks/useLatestRef";
+import useShallowStable from "../../../hooks/useShallowStable";
 
 export interface ChartBarProps extends ChartCommonProps {
   chartTitle?: string;
@@ -69,8 +71,12 @@ const ChartBar: React.FC<ChartBarProps> = (props) => {
     enableLegendAutoScroll = false,
     legendVisibleCount = 8,
     legendScrollInterval = 1500,
-    ...coreOption
+    ...restOption
   } = props;
+  // rest 解构出来的对象每次渲染都是新引用，直接进依赖数组会让 chartOption 的 memo
+  // 恒不命中 —— 父组件每渲染一次就重跑一次 setOption(notMerge)，动画重播、悬浮态被清掉。
+  // useShallowStable 让它回到值语义：内容浅相等就复用同一引用，真变了立刻透出新引用。
+  const coreOption = useShallowStable(restOption);
   const chartRef = useRef<HTMLDivElement>(null);
   const chartInstanceRef = useRef<echarts.ECharts | null>(null);
   // Defers `echarts.init` until the container has a box — see the hook for why
@@ -89,6 +95,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 +364,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 +391,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 +431,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 +439,7 @@ const ChartBar: React.FC<ChartBarProps> = (props) => {
         typeof info?.start === "number" &&
         typeof info?.end === "number"
       ) {
-        onDataZoomWindowChanged?.(
+        emitZoomWindow(
           percentWindowToIndexWindow(
             info.start,
             info.end,
@@ -409,7 +448,7 @@ const ChartBar: React.FC<ChartBarProps> = (props) => {
         );
       }
     };
-    if (onDataZoomWindowChanged) {
+    if (hasOnDataZoomWindowChanged) {
       chartInstanceRef.current?.on("datazoom", handleDataZoom);
     }
 
@@ -445,18 +484,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 +507,12 @@ const ChartBar: React.FC<ChartBarProps> = (props) => {
   }, [
     chartOption,
     handleResize,
-    onClick,
-    onLegendSelectChanged,
-    onDataZoomWindowChanged,
+    onClickRef,
+    onLegendSelectChangedRef,
+    hasOnClick,
+    hasOnLegendSelectChanged,
+    hasOnDataZoomWindowChanged,
+    emitZoomWindow,
     xAxisData,
     enableLegendAutoScroll,
     legendVisibleCount,
@@ -507,9 +549,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 +567,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

@@ -13,6 +13,7 @@ import {
   drawCircles,
 } from "../_utils/bubble";
 import { useLatestRef } from "../../../hooks/useLatestRef";
+import useShallowStable from "../../../hooks/useShallowStable";
 
 export interface BubbleDataItem {
   name: string;
@@ -71,8 +72,12 @@ const Bubble: React.FC<ChartBubbleProps> = (props) => {
     title,
     onChart,
     onClick,
-    ...coreOption
+    ...restOption
   } = props;
+  // rest 解构出来的对象每次渲染都是新引用，直接进依赖数组会让 chartOption 的 memo
+  // 恒不命中 —— 父组件每渲染一次就重跑一次 setOption(notMerge)，动画重播、悬浮态被清掉。
+  // useShallowStable 让它回到值语义：内容浅相等就复用同一引用，真变了立刻透出新引用。
+  const coreOption = useShallowStable(restOption);
   const chartRef = useRef<HTMLDivElement>(null);
   const chartInstanceRef = useRef<echarts.ECharts | null>(null);
   const resizeObserverRef = useRef<ResizeObserver | null>(null);
@@ -373,6 +378,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 +409,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 +430,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/Common/index.tsx

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

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

@@ -10,6 +10,7 @@ import {
 import React, { useCallback, useEffect, useMemo, useRef } from "react";
 
 import styles from "../index.module.scss";
+import useShallowStable from "../../../hooks/useShallowStable";
 
 export interface ChartGaugeProps extends ChartCommonProps {
   color?: string[] | string;
@@ -28,8 +29,12 @@ const Gauge: React.FC<ChartGaugeProps> = (props) => {
     axisLabel,
     title,
     color = "#1675FB",
-    ...coreSeries
+    ...restSeries
   } = series as echarts.GaugeSeriesOption;
+  // rest 解构出来的对象每次渲染都是新引用，直接进依赖数组会让 chartOption 的 memo
+  // 恒不命中 —— 父组件每渲染一次就重跑一次 setOption(notMerge)，动画重播、悬浮态被清掉。
+  // useShallowStable 让它回到值语义：内容浅相等就复用同一引用，真变了立刻透出新引用。
+  const coreSeries = useShallowStable(restSeries);
   const chartRef = useRef<HTMLDivElement>(null);
   const chartInstanceRef = useRef<echarts.ECharts | null>(null);
   // Defers `echarts.init` until the container has a box — see the hook for why

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

@@ -10,6 +10,7 @@ import {
 import { resolveChartChrome } from "../_utils/chartTheme";
 import useIsDark from "../../../hooks/useIsDark";
 import { useLatestRef } from "../../../hooks/useLatestRef";
+import useShallowStable from "../../../hooks/useShallowStable";
 
 export interface HeatmapDataItem {
   /** X-axis index or name */
@@ -43,6 +44,19 @@ export interface ChartHeatmapProps extends ChartCommonProps {
   inRangeColor?: string[];
 }
 
+// 解构默认值写成字面量会每次渲染新建一个数组，进依赖数组就让 memo 恒不命中；提到模块级常量
+const DEFAULT_IN_RANGE_COLOR = [
+  "#8BCCFB",
+  "#75C3FB",
+  "#5AB5F6",
+  "#42AEFA",
+  "#2DA1F5",
+  "#0F89E1",
+  "#056FBB",
+  "#025794",
+  "#0A4089",
+];
+
 const Heatmap: React.FC<ChartHeatmapProps> = (props) => {
   const {
     className,
@@ -61,19 +75,13 @@ const Heatmap: React.FC<ChartHeatmapProps> = (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 = useShallowStable(restOption);
   const chartRef = useRef<HTMLDivElement>(null);
   const chartInstanceRef = useRef<echarts.ECharts | null>(null);
   // Defers `echarts.init` until the container has a box — see the hook for why
@@ -269,6 +277,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 +311,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,8 @@ import {
 } from "../_utils/cartesian";
 import { resolveChartChrome } from "../_utils/chartTheme";
 import useIsDark from "../../../hooks/useIsDark";
+import useLatestRef from "../../../hooks/useLatestRef";
+import useShallowStable from "../../../hooks/useShallowStable";
 
 export interface ChartLineProps extends ChartCommonProps {
   chartTitle?: string;
@@ -70,8 +72,12 @@ const ChartLine: React.FC<ChartLineProps> = (props) => {
     enableLegendAutoScroll = false,
     legendVisibleCount = 8,
     legendScrollInterval = 1500,
-    ...coreOption
+    ...restOption
   } = props;
+  // rest 解构出来的对象每次渲染都是新引用，直接进依赖数组会让 chartOption 的 memo
+  // 恒不命中 —— 父组件每渲染一次就重跑一次 setOption(notMerge)，动画重播、悬浮态被清掉。
+  // useShallowStable 让它回到值语义：内容浅相等就复用同一引用，真变了立刻透出新引用。
+  const coreOption = useShallowStable(restOption);
   const chartRef = useRef<HTMLDivElement>(null);
   const chartInstanceRef = useRef<echarts.ECharts | null>(null);
   // Defers `echarts.init` until the container has a box — see the hook for why
@@ -90,6 +96,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 +362,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 +389,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 +429,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 +437,7 @@ const ChartLine: React.FC<ChartLineProps> = (props) => {
         typeof info?.start === "number" &&
         typeof info?.end === "number"
       ) {
-        onDataZoomWindowChanged?.(
+        emitZoomWindow(
           percentWindowToIndexWindow(
             info.start,
             info.end,
@@ -407,7 +446,7 @@ const ChartLine: React.FC<ChartLineProps> = (props) => {
         );
       }
     };
-    if (onDataZoomWindowChanged) {
+    if (hasOnDataZoomWindowChanged) {
       chartInstanceRef.current?.on("datazoom", handleDataZoom);
     }
 
@@ -443,18 +482,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 +505,12 @@ const ChartLine: React.FC<ChartLineProps> = (props) => {
   }, [
     chartOption,
     handleResize,
-    onClick,
-    onLegendSelectChanged,
-    onDataZoomWindowChanged,
+    onClickRef,
+    onLegendSelectChangedRef,
+    hasOnClick,
+    hasOnLegendSelectChanged,
+    hasOnDataZoomWindowChanged,
+    emitZoomWindow,
     xAxisData,
     enableLegendAutoScroll,
     legendVisibleCount,
@@ -505,9 +547,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 +565,8 @@ const ChartLine: React.FC<ChartLineProps> = (props) => {
     normalizedScroll,
     sliderDataZoom,
     xAxisData,
-    onDataZoomWindowChanged,
+    hasOnDataZoomWindowChanged,
+    emitZoomWindow,
   ]);
 
   // Clean up resources when the component unmounts