@hsu-react/ui 0.0.8 → 0.0.9

package/lib/components/Chart/chartUtils/useDataZoomWindow.d.ts

@@ -0,0 +1,19 @@
+import { DataZoomIndexWindow } from "../_utils/cartesian";
+export interface DataZoomWindowOptions {
+    /** 开关：是否按 dataZoom 当前可见窗口重算坐标轴，默认开启 */
+    enabled?: boolean;
+}
+export interface DataZoomWindowResult {
+    /** 当前可见窗口；开关关闭或尚未收到回调时为 null（表示全量） */
+    zoomWindow: DataZoomIndexWindow | null;
+    /** 传给 Chart.Bar / Chart.Line 的 onDataZoomWindowChanged；开关关闭时为 undefined（不绑定事件） */
+    onDataZoomWindowChanged?: (window: DataZoomIndexWindow) => void;
+    /** 按当前可见窗口裁剪系列数据，配合 calculateAxisConfig 只对展示部分重算坐标轴 */
+    sliceByZoomWindow: <T>(values?: T[] | null) => T[];
+}
+/**
+ * dataZoom 可见窗口管理：配合 Chart.Bar / Chart.Line 的 onDataZoomWindowChanged，
+ * 在调用方按"当前可见窗口"裁剪数据后重算 Y 轴 min/max/interval（calculateAxisConfig），
+ * 实现滑块拖动/滚轮/自动滚动时坐标轴跟随展示部分动态重算；可与 useLegendSelection 叠加。
+ */
+export declare function useDataZoomWindow(options?: DataZoomWindowOptions): DataZoomWindowResult;

package/lib/components/Chart/chartUtils/useDataZoomWindow.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useDataZoomWindow = useDataZoomWindow;
+var _react = require("react");
+/**
+ * dataZoom 可见窗口管理：配合 Chart.Bar / Chart.Line 的 onDataZoomWindowChanged，
+ * 在调用方按"当前可见窗口"裁剪数据后重算 Y 轴 min/max/interval（calculateAxisConfig），
+ * 实现滑块拖动/滚轮/自动滚动时坐标轴跟随展示部分动态重算；可与 useLegendSelection 叠加。
+ */
+function useDataZoomWindow(options) {
+  const enabled = options?.enabled ?? true;
+  const [zoomWindow, setZoomWindow] = (0, _react.useState)(null);
+  const onDataZoomWindowChanged = (0, _react.useCallback)(next => {
+    // 窗口未变化时保持原引用，避免重渲染 → 同步回调 → 再重渲染的循环
+    setZoomWindow(prev => prev && prev.startIndex === next.startIndex && prev.endIndex === next.endIndex ? prev : next);
+  }, []);
+  const effectiveWindow = enabled ? zoomWindow : null;
+  const sliceByZoomWindow = (0, _react.useCallback)(values => {
+    if (!values) return [];
+    if (!effectiveWindow) return values;
+    return values.slice(effectiveWindow.startIndex, effectiveWindow.endIndex + 1);
+  }, [effectiveWindow]);
+  return {
+    zoomWindow: effectiveWindow,
+    onDataZoomWindowChanged: enabled ? onDataZoomWindowChanged : undefined,
+    sliceByZoomWindow
+  };
+}

package/lib/components/Chart/chartUtils/useLegendSelection.d.ts

@@ -0,0 +1,14 @@
+export interface LegendSelectionResult {
+    /** 传给图表 legend.selected，保证重渲染(setOption notMerge)后隐藏状态不丢 */
+    legendSelected: Record<string, boolean>;
+    /** 传给图表 onLegendSelectChanged */
+    onLegendSelectChanged: (selected: Record<string, boolean>) => void;
+    /** 判断某系列当前是否可见（未点过的系列默认可见） */
+    isSeriesVisible: (name?: string | null) => boolean;
+}
+/**
+ * 图例选中状态管理：配合 Chart.Bar / Chart.Line 的 onLegendSelectChanged，
+ * 在调用方按"当前可见系列"重算 Y 轴 min/max/interval（calculateAxisConfig），
+ * 实现图例隐藏某一项后坐标轴自动重算。
+ */
+export declare function useLegendSelection(): LegendSelectionResult;

package/lib/components/Chart/chartUtils/useLegendSelection.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useLegendSelection = useLegendSelection;
+var _react = require("react");
+/**
+ * 图例选中状态管理：配合 Chart.Bar / Chart.Line 的 onLegendSelectChanged，
+ * 在调用方按"当前可见系列"重算 Y 轴 min/max/interval（calculateAxisConfig），
+ * 实现图例隐藏某一项后坐标轴自动重算。
+ */
+function useLegendSelection() {
+  const [legendSelected, setLegendSelected] = (0, _react.useState)({});
+  const onLegendSelectChanged = (0, _react.useCallback)(selected => {
+    setLegendSelected({
+      ...selected
+    });
+  }, []);
+  const isSeriesVisible = (0, _react.useCallback)(name => name == null || legendSelected[name] !== false, [legendSelected]);
+  return {
+    legendSelected,
+    onLegendSelectChanged,
+    isSeriesVisible
+  };
+}

package/lib/components/Modal/index.module.scss

@@ -62,6 +62,7 @@
         align-items: center;
         justify-content: flex-end;
         column-gap: 10px;
+        margin-left: auto; // title 为空时仍保持靠右
       }
     }
   }

package/lib/components/Panel/ListPanel/ListModalPanel/index.js

@@ -7,6 +7,7 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _Search = _interopRequireDefault(require("../../../Search"));
 var _Table = _interopRequireDefault(require("../../../Table"));
+var _icons = require("@ant-design/icons");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _lodash = require("lodash");
 var _indexModule = _interopRequireDefault(require("./index.module.scss"));
@@ -49,6 +50,12 @@ const ListModalPanel = props => {
   } = (0, _usePermissions.default)(hasPermi);
   const [_columns, setColumns] = (0, _react.useState)(columns);
   const [showColumnMgt, setShowColumnMgt] = (0, _react.useState)(false);
+  const [isFullscreen, setIsFullscreen] = (0, _react.useState)(false);
+  (0, _react.useEffect)(() => {
+    if (modalConfig.open) {
+      setIsFullscreen(false);
+    }
+  }, [modalConfig.open]);
   (0, _react.useEffect)(() => {
     if (columnMgt && columns?.length) {
       const _columns = columns?.map(col => {
@@ -109,9 +116,20 @@ const ListModalPanel = props => {
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Modal.default, {
-      width: 1400,
-      className: (0, _classnames.default)(modalClassName),
       ...modalConfig,
+      width: isFullscreen ? "100vw" : modalConfig.width ?? 1400,
+      ...(isFullscreen ? {
+        full: true
+      } : {}),
+      className: (0, _classnames.default)(_indexModule.default.modal, modalClassName, {
+        [_indexModule.default.fullscreen]: isFullscreen
+      }),
+      titleButtonGroup: [{
+        type: "text",
+        icon: isFullscreen ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.FullscreenExitOutlined, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.FullscreenOutlined, {}),
+        title: isFullscreen ? "退出全屏" : "全屏",
+        onClick: () => setIsFullscreen(v => !v)
+      }, ...(modalConfig.titleButtonGroup ?? [])],
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: (0, _classnames.default)(_indexModule.default.ListModalPanel, className),
         children: [extraContent, SearchComponent, /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
@@ -130,6 +148,7 @@ const ListModalPanel = props => {
             scroll: true,
             serialNumberColumn: true,
             bordered: true,
+            fillPanel: true,
             ...tableConfig,
             columns: _columns
           })]

package/lib/components/Panel/ListPanel/ListModalPanel/index.module.scss

@@ -1,10 +1,25 @@
+.modal {
+  // 定高让内部“height: 100%”链路可解析（antd Modal 默认内容自适应，内层设置 height/max-height 无效）
+  height: 700px;
+
+  &.fullscreen {
+    top: 0;
+
+    width: 100vw !important;
+    max-width: 100vw !important;
+    height: 100vh !important;
+
+    margin: 0;
+    padding-bottom: 0;
+  }
+}
+
 .ListModalPanel {
   display: flex;
   flex-direction: column;
   row-gap: 10px;
 
-  height: max-content;
-  max-height: 70vh;
+  height: 100%;
 
   .search {
     padding: 0px;

package/lib/components/Panel/ListPanel/index.module.scss

@@ -87,7 +87,7 @@
 
     width: 100%;
     min-height: 0px;
-    padding: 14px 16px;
+    padding: 10px;
 
     background: var(--cf-surface);
 
@@ -102,23 +102,22 @@
     align-items: center;
     justify-content: space-between;
     column-gap: 10px;
+  }
 
-    padding: 10px;
+  // 页面级页签：无底色容器，页签拆成独立圆角块、块间留空；
+  // margin/radius 需 !important 压过 TabBar 内部的连体分段样式（负 margin + 首尾切角）
+  .headerTabBar {
+    column-gap: 4px;
 
-    background: var(--cf-subtle);
+    > div {
+      margin-left: 0 !important;
+      border-radius: 6px !important;
 
-    border-radius: 8px 8px 0px 0px;
-    border: 1px solid var(--cf-border);
+      background: var(--cf-surface);
+    }
   }
 
   &.hasHeaderTabBar {
-    .search {
-      padding: 10px;
-      margin-top: -10px;
-
-      border-radius: 0px 0px 8px 8px;
-    }
-
     &:not(:has(.search)) {
       .headerTabBarContainer {
         border-radius: 8px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hsu-react/ui",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "description": "一套基于 React + Ant Design 的中后台业务组件库",
   "license": "MIT",
   "type": "module",

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

@@ -16,7 +16,9 @@ import {
   ChartScrollConfig,
   createDefaultCategoryXAxis,
   createDefaultValueYAxis,
+  DataZoomIndexWindow,
   getSliderShow,
+  percentWindowToIndexWindow,
   resolveScrollConfig,
 } from "../_utils/cartesian";
 
@@ -27,6 +29,10 @@ export interface ChartBarProps extends ChartCommonProps {
   legendData?: string[];
   scrollConfig?: ChartScrollConfig;
   onClick?: (event: echarts.ECElementEvent) => void;
+  /** 图例点选变化回调，参数为当前各系列选中状态（配合 legend.selected 可实现坐标轴重算） */
+  onLegendSelectChanged?: (selected: Record<string, boolean>) => void;
+  /** dataZoom 可见窗口变化回调（滑块/滚轮/自动滚动/初始同步均触发），参数为当前可见的 x 轴索引区间（配合 useDataZoomWindow 可按展示部分重算坐标轴） */
+  onDataZoomWindowChanged?: (window: DataZoomIndexWindow) => void;
   /** 是否启用图例自动滚动，默认 false */
   enableLegendAutoScroll?: boolean;
   /** 图例每页可见数量，默认 8 */
@@ -55,6 +61,8 @@ const ChartBar: React.FC<ChartBarProps> = (props) => {
     insideDataZoom,
     sliderDataZoom,
     onClick,
+    onLegendSelectChanged,
+    onDataZoomWindowChanged,
     enableLegendAutoScroll = false,
     legendVisibleCount = 8,
     legendScrollInterval = 1500,
@@ -63,6 +71,7 @@ const ChartBar: React.FC<ChartBarProps> = (props) => {
   const chartRef = useRef<HTMLDivElement>(null);
   const chartInstanceRef = useRef<echarts.ECharts | null>(null);
   const resizeObserverRef = useRef<ResizeObserver | null>(null);
+  const prevXAxisKeyRef = useRef<string | null>(null);
   const legendScrollRef = useRef<ReturnType<typeof autoScrollLegend> | null>(
     null,
   );
@@ -268,8 +277,46 @@ const ChartBar: React.FC<ChartBarProps> = (props) => {
       chartInstanceRef.current = chart;
     }
 
-    // 设置配置
+    // 设置配置：notMerge 会把 dataZoom 窗口重置回初始位置，
+    // x 轴数据未变化时（如坐标轴重算/图例点选触发的重渲染）先记录当前窗口，设置后恢复
+    const xAxisKey = xAxisData?.join("\u0001") ?? "";
+    const prevZoomRanges =
+      prevXAxisKeyRef.current === xAxisKey
+        ? ((chart.getOption() as ChartsOption | undefined)?.dataZoom as
+            | Array<{ start?: number; end?: number }>
+            | undefined)
+        : undefined;
+    prevXAxisKeyRef.current = xAxisKey;
     chart.setOption(chartOption as ChartOptionType, true);
+    const nextZooms = (chartOption as ChartsOption).dataZoom;
+    if (
+      prevZoomRanges?.length &&
+      Array.isArray(nextZooms) &&
+      nextZooms.length === prevZoomRanges.length
+    ) {
+      chart.setOption({
+        dataZoom: prevZoomRanges.map((z) => ({ start: z.start, end: z.end })),
+      });
+    }
+
+    // 向调用方同步当前可见窗口（初始渲染与恢复后），用于按展示部分重算坐标轴
+    if (onDataZoomWindowChanged) {
+      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(
+          percentWindowToIndexWindow(zoom.start, zoom.end, totalLen),
+        );
+      } else {
+        // 无 dataZoom（如数据量不足未启用滚动）时窗口即全量，同步一次避免残留旧窗口
+        onDataZoomWindowChanged({
+          startIndex: 0,
+          endIndex: Math.max(0, totalLen - 1),
+        });
+      }
+    }
 
     // 添加 resize 监听
     window.addEventListener("resize", handleResize);
@@ -285,6 +332,59 @@ const ChartBar: React.FC<ChartBarProps> = (props) => {
       chartInstanceRef.current?.on("click", onClick);
     }
 
+    // 图例点选事件
+    const handleLegendSelectChanged = (params: unknown) => {
+      onLegendSelectChanged?.(
+        (params as { selected: Record<string, boolean> }).selected,
+      );
+    };
+    if (onLegendSelectChanged) {
+      chartInstanceRef.current?.on(
+        "legendselectchanged",
+        handleLegendSelectChanged,
+      );
+    }
+
+    // dataZoom 原生交互（slider 拖动 / inside 缩放）→ 同步可见窗口
+    const handleDataZoom = (params: unknown) => {
+      const raw = params as {
+        start?: number;
+        end?: number;
+        startValue?: number;
+        endValue?: number;
+        batch?: Array<{
+          start?: number;
+          end?: number;
+          startValue?: number;
+          endValue?: number;
+        }>;
+      };
+      const info = raw?.batch?.[0] ?? raw;
+      if (
+        typeof info?.startValue === "number" &&
+        typeof info?.endValue === "number"
+      ) {
+        onDataZoomWindowChanged?.({
+          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?.(
+          percentWindowToIndexWindow(
+            info.start,
+            info.end,
+            xAxisData?.length ?? 0,
+          ),
+        );
+      }
+    };
+    if (onDataZoomWindowChanged) {
+      chartInstanceRef.current?.on("datazoom", handleDataZoom);
+    }
+
     // 图例自动滚动（参考 Pie 组件）
     const opt = chartOption as ChartsOption;
     const legendDataLen = Array.isArray(opt.legend)
@@ -317,6 +417,17 @@ const ChartBar: React.FC<ChartBarProps> = (props) => {
         chartInstanceRef.current?.off("click", onClick);
       }
 
+      if (onLegendSelectChanged) {
+        chartInstanceRef.current?.off(
+          "legendselectchanged",
+          handleLegendSelectChanged,
+        );
+      }
+
+      if (onDataZoomWindowChanged) {
+        chartInstanceRef.current?.off("datazoom", handleDataZoom);
+      }
+
       if (legendScrollRef.current) {
         legendScrollRef.current.dispose();
         legendScrollRef.current = null;
@@ -326,6 +437,9 @@ const ChartBar: React.FC<ChartBarProps> = (props) => {
     chartOption,
     handleResize,
     onClick,
+    onLegendSelectChanged,
+    onDataZoomWindowChanged,
+    xAxisData,
     enableLegendAutoScroll,
     legendVisibleCount,
     legendScrollInterval,
@@ -358,10 +472,26 @@ const ChartBar: React.FC<ChartBarProps> = (props) => {
       startIndex: normalizedScroll.startIndex,
       autoPlay: normalizedScroll.autoScroll,
       enableWheelScroll,
+      onWindowChange: onDataZoomWindowChanged
+        ? (startPercent, endPercent) =>
+            onDataZoomWindowChanged(
+              percentWindowToIndexWindow(
+                startPercent,
+                endPercent,
+                xAxisData.length,
+              ),
+            )
+        : undefined,
     });
 
     return dispose;
-  }, [dataZoom, normalizedScroll, sliderDataZoom, xAxisData]);
+  }, [
+    dataZoom,
+    normalizedScroll,
+    sliderDataZoom,
+    xAxisData,
+    onDataZoomWindowChanged,
+  ]);
 
   // 组件卸载时清理资源
   useEffect(() => {

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

@@ -16,7 +16,9 @@ import {
   ChartScrollConfig,
   createDefaultCategoryXAxis,
   createDefaultValueYAxis,
+  DataZoomIndexWindow,
   getSliderShow,
+  percentWindowToIndexWindow,
   resolveScrollConfig,
 } from "../_utils/cartesian";
 
@@ -28,6 +30,10 @@ export interface ChartLineProps extends ChartCommonProps {
   scrollConfig?: ChartScrollConfig;
   yAxisNameOffsets?: number[];
   onClick?: (event: echarts.ECElementEvent) => void;
+  /** 图例点选变化回调，参数为当前各系列选中状态（配合 legend.selected 可实现坐标轴重算） */
+  onLegendSelectChanged?: (selected: Record<string, boolean>) => void;
+  /** dataZoom 可见窗口变化回调（滑块/滚轮/自动滚动/初始同步均触发），参数为当前可见的 x 轴索引区间（配合 useDataZoomWindow 可按展示部分重算坐标轴） */
+  onDataZoomWindowChanged?: (window: DataZoomIndexWindow) => void;
   /** 是否启用图例自动滚动，默认 false */
   enableLegendAutoScroll?: boolean;
   /** 图例每页可见数量，默认 8 */
@@ -56,6 +62,8 @@ const ChartLine: React.FC<ChartLineProps> = (props) => {
     insideDataZoom,
     sliderDataZoom,
     onClick,
+    onLegendSelectChanged,
+    onDataZoomWindowChanged,
     enableLegendAutoScroll = false,
     legendVisibleCount = 8,
     legendScrollInterval = 1500,
@@ -64,6 +72,7 @@ const ChartLine: React.FC<ChartLineProps> = (props) => {
   const chartRef = useRef<HTMLDivElement>(null);
   const chartInstanceRef = useRef<echarts.ECharts | null>(null);
   const resizeObserverRef = useRef<ResizeObserver | null>(null);
+  const prevXAxisKeyRef = useRef<string | null>(null);
   const legendScrollRef = useRef<ReturnType<typeof autoScrollLegend> | null>(
     null,
   );
@@ -265,8 +274,46 @@ const ChartLine: React.FC<ChartLineProps> = (props) => {
       chartInstanceRef.current = chart;
     }
 
-    // 设置配置
+    // 设置配置：notMerge 会把 dataZoom 窗口重置回初始位置，
+    // x 轴数据未变化时（如坐标轴重算/图例点选触发的重渲染）先记录当前窗口，设置后恢复
+    const xAxisKey = xAxisData?.join("\u0001") ?? "";
+    const prevZoomRanges =
+      prevXAxisKeyRef.current === xAxisKey
+        ? ((chart.getOption() as ChartsOption | undefined)?.dataZoom as
+            | Array<{ start?: number; end?: number }>
+            | undefined)
+        : undefined;
+    prevXAxisKeyRef.current = xAxisKey;
     chart.setOption(chartOption as ChartOptionType, true);
+    const nextZooms = (chartOption as ChartsOption).dataZoom;
+    if (
+      prevZoomRanges?.length &&
+      Array.isArray(nextZooms) &&
+      nextZooms.length === prevZoomRanges.length
+    ) {
+      chart.setOption({
+        dataZoom: prevZoomRanges.map((z) => ({ start: z.start, end: z.end })),
+      });
+    }
+
+    // 向调用方同步当前可见窗口（初始渲染与恢复后），用于按展示部分重算坐标轴
+    if (onDataZoomWindowChanged) {
+      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(
+          percentWindowToIndexWindow(zoom.start, zoom.end, totalLen),
+        );
+      } else {
+        // 无 dataZoom（如数据量不足未启用滚动）时窗口即全量，同步一次避免残留旧窗口
+        onDataZoomWindowChanged({
+          startIndex: 0,
+          endIndex: Math.max(0, totalLen - 1),
+        });
+      }
+    }
 
     // 添加 resize 监听
     window.addEventListener("resize", handleResize);
@@ -282,6 +329,59 @@ const ChartLine: React.FC<ChartLineProps> = (props) => {
       chartInstanceRef.current?.on("click", onClick);
     }
 
+    // 图例点选事件
+    const handleLegendSelectChanged = (params: unknown) => {
+      onLegendSelectChanged?.(
+        (params as { selected: Record<string, boolean> }).selected,
+      );
+    };
+    if (onLegendSelectChanged) {
+      chartInstanceRef.current?.on(
+        "legendselectchanged",
+        handleLegendSelectChanged,
+      );
+    }
+
+    // dataZoom 原生交互（slider 拖动 / inside 缩放）→ 同步可见窗口
+    const handleDataZoom = (params: unknown) => {
+      const raw = params as {
+        start?: number;
+        end?: number;
+        startValue?: number;
+        endValue?: number;
+        batch?: Array<{
+          start?: number;
+          end?: number;
+          startValue?: number;
+          endValue?: number;
+        }>;
+      };
+      const info = raw?.batch?.[0] ?? raw;
+      if (
+        typeof info?.startValue === "number" &&
+        typeof info?.endValue === "number"
+      ) {
+        onDataZoomWindowChanged?.({
+          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?.(
+          percentWindowToIndexWindow(
+            info.start,
+            info.end,
+            xAxisData?.length ?? 0,
+          ),
+        );
+      }
+    };
+    if (onDataZoomWindowChanged) {
+      chartInstanceRef.current?.on("datazoom", handleDataZoom);
+    }
+
     // 图例自动滚动（与 Pie/Bar 一致）
     const opt = chartOption as ChartsOption;
     const legendDataLen = Array.isArray(opt.legend)
@@ -314,6 +414,17 @@ const ChartLine: React.FC<ChartLineProps> = (props) => {
         chartInstanceRef.current?.off("click", onClick);
       }
 
+      if (onLegendSelectChanged) {
+        chartInstanceRef.current?.off(
+          "legendselectchanged",
+          handleLegendSelectChanged,
+        );
+      }
+
+      if (onDataZoomWindowChanged) {
+        chartInstanceRef.current?.off("datazoom", handleDataZoom);
+      }
+
       if (legendScrollRef.current) {
         legendScrollRef.current.dispose();
         legendScrollRef.current = null;
@@ -323,6 +434,9 @@ const ChartLine: React.FC<ChartLineProps> = (props) => {
     chartOption,
     handleResize,
     onClick,
+    onLegendSelectChanged,
+    onDataZoomWindowChanged,
+    xAxisData,
     enableLegendAutoScroll,
     legendVisibleCount,
     legendScrollInterval,
@@ -355,10 +469,26 @@ const ChartLine: React.FC<ChartLineProps> = (props) => {
       startIndex: normalizedScroll.startIndex,
       autoPlay: normalizedScroll.autoScroll,
       enableWheelScroll,
+      onWindowChange: onDataZoomWindowChanged
+        ? (startPercent, endPercent) =>
+            onDataZoomWindowChanged(
+              percentWindowToIndexWindow(
+                startPercent,
+                endPercent,
+                xAxisData.length,
+              ),
+            )
+        : undefined,
     });
 
     return dispose;
-  }, [dataZoom, normalizedScroll, sliderDataZoom, xAxisData]);
+  }, [
+    dataZoom,
+    normalizedScroll,
+    sliderDataZoom,
+    xAxisData,
+    onDataZoomWindowChanged,
+  ]);
 
   // 组件卸载时清理资源
   useEffect(() => {