@hsu-react/ui 0.0.8 → 0.0.9

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

@@ -0,0 +1,35 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+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 { useCallback, useState } from "react";
+/**
+ * 图例选中状态管理：配合 Chart.Bar / Chart.Line 的 onLegendSelectChanged，
+ * 在调用方按"当前可见系列"重算 Y 轴 min/max/interval（calculateAxisConfig），
+ * 实现图例隐藏某一项后坐标轴自动重算。
+ */
+export function useLegendSelection() {
+  var _useState = useState({}),
+    _useState2 = _slicedToArray(_useState, 2),
+    legendSelected = _useState2[0],
+    setLegendSelected = _useState2[1];
+  var onLegendSelectChanged = useCallback(function (selected) {
+    setLegendSelected(_objectSpread({}, selected));
+  }, []);
+  var isSeriesVisible = useCallback(function (name) {
+    return name == null || legendSelected[name] !== false;
+  }, [legendSelected]);
+  return {
+    legendSelected: legendSelected,
+    onLegendSelectChanged: onLegendSelectChanged,
+    isSeriesVisible: isSeriesVisible
+  };
+}

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

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

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

@@ -1,6 +1,10 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 var _excluded = ["modalClassName", "className", "searchProps", "searchMode", "tableProps", "hasPermi", "extraContent"],
   _excluded2 = ["title", "buttonGroup", "className", "columns", "tabBarProps", "tableTools", "tableContainerClassName", "tips", "otherTool"];
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -17,6 +21,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 import React, { useEffect, useMemo, useState } from "react";
 import Search from "../../../Search";
 import Table from "../../../Table";
+import { FullscreenExitOutlined, FullscreenOutlined } from "@ant-design/icons";
 import classNames from "classnames";
 import { cloneDeep } from "lodash";
 import styles from "./index.module.scss";
@@ -28,6 +33,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 var ListModalPanel = function ListModalPanel(props) {
+  var _modalConfig$width, _modalConfig$titleBut;
   var modalClassName = props.modalClassName,
     className = props.className,
     searchProps = props.searchProps,
@@ -60,6 +66,15 @@ var ListModalPanel = function ListModalPanel(props) {
     _useState4 = _slicedToArray(_useState3, 2),
     showColumnMgt = _useState4[0],
     setShowColumnMgt = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isFullscreen = _useState6[0],
+    setIsFullscreen = _useState6[1];
+  useEffect(function () {
+    if (modalConfig.open) {
+      setIsFullscreen(false);
+    }
+  }, [modalConfig.open]);
   useEffect(function () {
     if (columnMgt && columns !== null && columns !== void 0 && columns.length) {
       var _columns2 = columns === null || columns === void 0 ? void 0 : columns.map(function (col) {
@@ -117,10 +132,22 @@ var ListModalPanel = function ListModalPanel(props) {
     return null;
   }
   return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(Modal, _objectSpread(_objectSpread({
-      width: 1400,
-      className: classNames(modalClassName)
-    }, modalConfig), {}, {
+    children: [/*#__PURE__*/_jsx(Modal, _objectSpread(_objectSpread(_objectSpread({}, modalConfig), {}, {
+      width: isFullscreen ? "100vw" : (_modalConfig$width = modalConfig.width) !== null && _modalConfig$width !== void 0 ? _modalConfig$width : 1400
+    }, isFullscreen ? {
+      full: true
+    } : {}), {}, {
+      className: classNames(styles.modal, modalClassName, _defineProperty({}, styles.fullscreen, isFullscreen)),
+      titleButtonGroup: [{
+        type: "text",
+        icon: isFullscreen ? /*#__PURE__*/_jsx(FullscreenExitOutlined, {}) : /*#__PURE__*/_jsx(FullscreenOutlined, {}),
+        title: isFullscreen ? "退出全屏" : "全屏",
+        onClick: function onClick() {
+          return setIsFullscreen(function (v) {
+            return !v;
+          });
+        }
+      }].concat(_toConsumableArray((_modalConfig$titleBut = modalConfig.titleButtonGroup) !== null && _modalConfig$titleBut !== void 0 ? _modalConfig$titleBut : [])),
       children: /*#__PURE__*/_jsxs("div", {
         className: classNames(styles.ListModalPanel, className),
         children: [extraContent, SearchComponent, /*#__PURE__*/_jsxs("div", {
@@ -139,7 +166,8 @@ var ListModalPanel = function ListModalPanel(props) {
           }, _objectSpread(_objectSpread({
             scroll: true,
             serialNumberColumn: true,
-            bordered: true
+            bordered: true,
+            fillPanel: true
           }, tableConfig), {}, {
             columns: _columns
           })))]

package/es/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/es/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/lib/components/Chart/Bar/index.d.ts

@@ -1,7 +1,7 @@
 import * as echarts from "echarts";
 import { ChartCommonProps, SeriesDataType } from "..";
 import React from "react";
-import { ChartScrollConfig } from "../_utils/cartesian";
+import { ChartScrollConfig, DataZoomIndexWindow } from "../_utils/cartesian";
 export interface ChartBarProps extends ChartCommonProps {
     chartTitle?: string;
     xAxisData?: Array<string>;
@@ -9,6 +9,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 */

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

@@ -34,6 +34,8 @@ const ChartBar = props => {
     insideDataZoom,
     sliderDataZoom,
     onClick,
+    onLegendSelectChanged,
+    onDataZoomWindowChanged,
     enableLegendAutoScroll = false,
     legendVisibleCount = 8,
     legendScrollInterval = 1500,
@@ -42,6 +44,7 @@ const ChartBar = props => {
   const chartRef = (0, _react.useRef)(null);
   const chartInstanceRef = (0, _react.useRef)(null);
   const resizeObserverRef = (0, _react.useRef)(null);
+  const prevXAxisKeyRef = (0, _react.useRef)(null);
   const legendScrollRef = (0, _react.useRef)(null);
   const normalizedScroll = (0, _react.useMemo)(() => (0, _cartesian.resolveScrollConfig)(scrollConfig), [scrollConfig]);
 
@@ -198,8 +201,37 @@ const ChartBar = props => {
       chartInstanceRef.current = chart;
     }
 
-    // 设置配置
+    // 设置配置：notMerge 会把 dataZoom 窗口重置回初始位置，
+    // x 轴数据未变化时（如坐标轴重算/图例点选触发的重渲染）先记录当前窗口，设置后恢复
+    const xAxisKey = xAxisData?.join("\u0001") ?? "";
+    const prevZoomRanges = prevXAxisKeyRef.current === xAxisKey ? chart.getOption()?.dataZoom : undefined;
+    prevXAxisKeyRef.current = xAxisKey;
     chart.setOption(chartOption, true);
+    const nextZooms = chartOption.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()?.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));
+      } else {
+        // 无 dataZoom（如数据量不足未启用滚动）时窗口即全量，同步一次避免残留旧窗口
+        onDataZoomWindowChanged({
+          startIndex: 0,
+          endIndex: Math.max(0, totalLen - 1)
+        });
+      }
+    }
 
     // 添加 resize 监听
     window.addEventListener("resize", handleResize);
@@ -215,6 +247,31 @@ const ChartBar = props => {
       chartInstanceRef.current?.on("click", onClick);
     }
 
+    // 图例点选事件
+    const handleLegendSelectChanged = params => {
+      onLegendSelectChanged?.(params.selected);
+    };
+    if (onLegendSelectChanged) {
+      chartInstanceRef.current?.on("legendselectchanged", handleLegendSelectChanged);
+    }
+
+    // dataZoom 原生交互（slider 拖动 / inside 缩放）→ 同步可见窗口
+    const handleDataZoom = params => {
+      const raw = params;
+      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?.((0, _cartesian.percentWindowToIndexWindow)(info.start, info.end, xAxisData?.length ?? 0));
+      }
+    };
+    if (onDataZoomWindowChanged) {
+      chartInstanceRef.current?.on("datazoom", handleDataZoom);
+    }
+
     // 图例自动滚动（参考 Pie 组件）
     const opt = chartOption;
     const legendDataLen = Array.isArray(opt.legend) ? opt.legend[0]?.data?.length : opt.legend?.data?.length;
@@ -239,12 +296,18 @@ const ChartBar = props => {
       if (onClick) {
         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;
       }
     };
-  }, [chartOption, handleResize, onClick, enableLegendAutoScroll, legendVisibleCount, legendScrollInterval]);
+  }, [chartOption, handleResize, onClick, onLegendSelectChanged, onDataZoomWindowChanged, xAxisData, enableLegendAutoScroll, legendVisibleCount, legendScrollInterval]);
 
   // 处理自动播放
   (0, _react.useEffect)(() => {
@@ -260,10 +323,11 @@ const ChartBar = props => {
       interval: normalizedScroll.interval,
       startIndex: normalizedScroll.startIndex,
       autoPlay: normalizedScroll.autoScroll,
-      enableWheelScroll
+      enableWheelScroll,
+      onWindowChange: onDataZoomWindowChanged ? (startPercent, endPercent) => onDataZoomWindowChanged((0, _cartesian.percentWindowToIndexWindow)(startPercent, endPercent, xAxisData.length)) : undefined
     });
     return dispose;
-  }, [dataZoom, normalizedScroll, sliderDataZoom, xAxisData]);
+  }, [dataZoom, normalizedScroll, sliderDataZoom, xAxisData, onDataZoomWindowChanged]);
 
   // 组件卸载时清理资源
   (0, _react.useEffect)(() => {

package/lib/components/Chart/Line/index.d.ts

@@ -1,7 +1,7 @@
 import * as echarts from "echarts";
 import { ChartCommonProps, SeriesDataType } from "..";
 import React from "react";
-import { ChartScrollConfig } from "../_utils/cartesian";
+import { ChartScrollConfig, DataZoomIndexWindow } from "../_utils/cartesian";
 export interface ChartLineProps extends ChartCommonProps {
     chartTitle?: string;
     xAxisData?: Array<string>;
@@ -10,6 +10,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 */

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

@@ -34,6 +34,8 @@ const ChartLine = props => {
     insideDataZoom,
     sliderDataZoom,
     onClick,
+    onLegendSelectChanged,
+    onDataZoomWindowChanged,
     enableLegendAutoScroll = false,
     legendVisibleCount = 8,
     legendScrollInterval = 1500,
@@ -42,6 +44,7 @@ const ChartLine = props => {
   const chartRef = (0, _react.useRef)(null);
   const chartInstanceRef = (0, _react.useRef)(null);
   const resizeObserverRef = (0, _react.useRef)(null);
+  const prevXAxisKeyRef = (0, _react.useRef)(null);
   const legendScrollRef = (0, _react.useRef)(null);
   const normalizedScroll = (0, _react.useMemo)(() => (0, _cartesian.resolveScrollConfig)(scrollConfig), [scrollConfig]);
 
@@ -194,8 +197,37 @@ const ChartLine = props => {
       chartInstanceRef.current = chart;
     }
 
-    // 设置配置
+    // 设置配置：notMerge 会把 dataZoom 窗口重置回初始位置，
+    // x 轴数据未变化时（如坐标轴重算/图例点选触发的重渲染）先记录当前窗口，设置后恢复
+    const xAxisKey = xAxisData?.join("\u0001") ?? "";
+    const prevZoomRanges = prevXAxisKeyRef.current === xAxisKey ? chart.getOption()?.dataZoom : undefined;
+    prevXAxisKeyRef.current = xAxisKey;
     chart.setOption(chartOption, true);
+    const nextZooms = chartOption.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()?.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));
+      } else {
+        // 无 dataZoom（如数据量不足未启用滚动）时窗口即全量，同步一次避免残留旧窗口
+        onDataZoomWindowChanged({
+          startIndex: 0,
+          endIndex: Math.max(0, totalLen - 1)
+        });
+      }
+    }
 
     // 添加 resize 监听
     window.addEventListener("resize", handleResize);
@@ -211,6 +243,31 @@ const ChartLine = props => {
       chartInstanceRef.current?.on("click", onClick);
     }
 
+    // 图例点选事件
+    const handleLegendSelectChanged = params => {
+      onLegendSelectChanged?.(params.selected);
+    };
+    if (onLegendSelectChanged) {
+      chartInstanceRef.current?.on("legendselectchanged", handleLegendSelectChanged);
+    }
+
+    // dataZoom 原生交互（slider 拖动 / inside 缩放）→ 同步可见窗口
+    const handleDataZoom = params => {
+      const raw = params;
+      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?.((0, _cartesian.percentWindowToIndexWindow)(info.start, info.end, xAxisData?.length ?? 0));
+      }
+    };
+    if (onDataZoomWindowChanged) {
+      chartInstanceRef.current?.on("datazoom", handleDataZoom);
+    }
+
     // 图例自动滚动（与 Pie/Bar 一致）
     const opt = chartOption;
     const legendDataLen = Array.isArray(opt.legend) ? opt.legend[0]?.data?.length : opt.legend?.data?.length;
@@ -235,12 +292,18 @@ const ChartLine = props => {
       if (onClick) {
         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;
       }
     };
-  }, [chartOption, handleResize, onClick, enableLegendAutoScroll, legendVisibleCount, legendScrollInterval]);
+  }, [chartOption, handleResize, onClick, onLegendSelectChanged, onDataZoomWindowChanged, xAxisData, enableLegendAutoScroll, legendVisibleCount, legendScrollInterval]);
 
   // 处理自动播放
   (0, _react.useEffect)(() => {
@@ -256,10 +319,11 @@ const ChartLine = props => {
       interval: normalizedScroll.interval,
       startIndex: normalizedScroll.startIndex,
       autoPlay: normalizedScroll.autoScroll,
-      enableWheelScroll
+      enableWheelScroll,
+      onWindowChange: onDataZoomWindowChanged ? (startPercent, endPercent) => onDataZoomWindowChanged((0, _cartesian.percentWindowToIndexWindow)(startPercent, endPercent, xAxisData.length)) : undefined
     });
     return dispose;
-  }, [dataZoom, normalizedScroll, sliderDataZoom, xAxisData]);
+  }, [dataZoom, normalizedScroll, sliderDataZoom, xAxisData, onDataZoomWindowChanged]);
 
   // 组件卸载时清理资源
   (0, _react.useEffect)(() => {

package/lib/components/Chart/_utils/autoSmooth.d.ts

@@ -7,6 +7,8 @@ export interface AutoScrollByItemProps {
     startIndex?: number;
     autoPlay?: boolean;
     enableWheelScroll?: boolean;
+    /** 窗口变化回调（创建同步、自动滚动、滚轮、resize 均触发），参数为当前窗口 start/end 百分比 */
+    onWindowChange?: (startPercent: number, endPercent: number) => void;
 }
 export declare function autoScrollByItem(props: AutoScrollByItemProps): {
     pause: () => void;

package/lib/components/Chart/_utils/autoSmooth.js

@@ -12,7 +12,8 @@ function autoScrollByItem(props) {
     interval = 2000,
     startIndex = 0,
     autoPlay = true,
-    enableWheelScroll = true
+    enableWheelScroll = true,
+    onWindowChange
   } = props;
   const total = xAxisData?.length ?? 0;
   if (total <= 0) {
@@ -28,6 +29,14 @@ function autoScrollByItem(props) {
   const initialStartPercent = total > 0 ? initialStartIndex / total * 100 : 0;
   let start = initialStartPercent;
   let end = Math.min(initialStartPercent + windowSizePercent, 100);
+
+  // 图表已有 dataZoom 窗口时（组件重渲染重建滚动器）从当前位置继续，
+  // 避免图例点选、坐标轴重算等触发的重渲染把已滚动位置重置回初始窗口
+  const currentZoom = chart.getOption()?.dataZoom?.[0];
+  if (typeof currentZoom?.start === "number" && typeof currentZoom?.end === "number") {
+    start = currentZoom.start;
+    end = currentZoom.end;
+  }
   const syncDataZoomRange = () => {
     const option = chart.getOption();
     const currentDataZoom = option?.dataZoom;
@@ -39,6 +48,7 @@ function autoScrollByItem(props) {
         end
       }))
     });
+    onWindowChange?.(start, end);
   };
   syncDataZoomRange();
   let timer = null;

package/lib/components/Chart/_utils/cartesian.d.ts

@@ -18,6 +18,17 @@ export interface NormalizedScrollConfig {
     sliderVisible?: boolean;
     wheelModeWhenSliderHidden: "scroll" | "none";
 }
+/** dataZoom 当前可见窗口对应的 x 轴索引区间（闭区间） */
+export interface DataZoomIndexWindow {
+    startIndex: number;
+    endIndex: number;
+}
+/**
+ * 把 dataZoom 的 start/end 百分比换算为 x 轴索引窗口。
+ * 与本组件族写入 dataZoom 的百分比约定一致（index / total * 100），
+ * 对 echarts 原生交互产生的百分比做外扩取整，边界最多多含一项，不影响坐标轴量级。
+ */
+export declare const percentWindowToIndexWindow: (startPercent: number, endPercent: number, total: number) => DataZoomIndexWindow;
 export declare const createDefaultCategoryXAxis: (xAxisData?: Array<string>) => ChartOptionType;
 export declare const createDefaultValueYAxis: (mode?: "bar" | "line") => ChartOptionType;
 export declare const buildCartesianSeriesOptions: (mode: "bar" | "line", seriesData?: SeriesDataType, series?: echarts.SeriesOption | echarts.SeriesOption[]) => echarts.SeriesOption[];

package/lib/components/Chart/_utils/cartesian.js

@@ -3,7 +3,27 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.resolveScrollConfig = exports.getSliderShow = exports.createDefaultValueYAxis = exports.createDefaultCategoryXAxis = exports.buildCartesianSeriesOptions = void 0;
+exports.resolveScrollConfig = exports.percentWindowToIndexWindow = exports.getSliderShow = exports.createDefaultValueYAxis = exports.createDefaultCategoryXAxis = exports.buildCartesianSeriesOptions = void 0;
+/** dataZoom 当前可见窗口对应的 x 轴索引区间（闭区间） */
+
+/**
+ * 把 dataZoom 的 start/end 百分比换算为 x 轴索引窗口。
+ * 与本组件族写入 dataZoom 的百分比约定一致（index / total * 100），
+ * 对 echarts 原生交互产生的百分比做外扩取整，边界最多多含一项，不影响坐标轴量级。
+ */
+const percentWindowToIndexWindow = (startPercent, endPercent, total) => {
+  if (total <= 0) return {
+    startIndex: 0,
+    endIndex: 0
+  };
+  const startIndex = Math.max(0, Math.min(total - 1, Math.floor(startPercent / 100 * total)));
+  const endIndex = Math.max(startIndex, Math.min(total - 1, Math.ceil(endPercent / 100 * total) - 1));
+  return {
+    startIndex,
+    endIndex
+  };
+};
+exports.percentWindowToIndexWindow = percentWindowToIndexWindow;
 const createDefaultCategoryXAxis = xAxisData => ({
   type: "category",
   boundaryGap: true,

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

@@ -18,6 +18,8 @@ export interface ChartTooltipFormatterProps {
     hideMarker?: boolean;
     textStyle?: Record<string, unknown>;
     unit?: string;
+    /** 多系列时按数值从大到小排序展示（大的在上） */
+    sortDescending?: boolean;
 }
 declare const chartTooltipFormatter: (props: ChartTooltipFormatterProps) => string;
 export default chartTooltipFormatter;

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

@@ -14,7 +14,8 @@ const chartTooltipFormatter = props => {
       color: "#666",
       fontWeight: 400
     },
-    unit
+    unit,
+    sortDescending
   } = props;
   if (!Array.isArray(params)) {
     return `
@@ -43,10 +44,11 @@ const chartTooltipFormatter = props => {
       </div>
     `;
   }
-  const items = params?.map((item, idx) => {
+  const sortedParams = sortDescending ? [...params].sort((a, b) => (Number(b.value) || 0) - (Number(a.value) || 0)) : params;
+  const items = sortedParams?.map((item, idx) => {
     const value = item.value ?? "";
     return `
-      <div style="margin: 0 0 ${idx === params.length - 1 ? "0" : "10px"} 0;line-height:1;">
+      <div style="margin: 0 0 ${idx === sortedParams.length - 1 ? "0" : "10px"} 0;line-height:1;">
         <div style="margin: 0px 0 0;line-height:1;">
           ${hideMarker ? "" : `${item?.marker}`}
           <span style="font-size:${textStyle?.fontSize}px;color:${textStyle?.color};font-weight:${textStyle?.fontWeight};margin-left:2px">${item?.seriesName}</span>

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

@@ -2,6 +2,9 @@ import chartTooltipFormatter from "./chartTooltipFormatter";
 import { TooltipParams, ChartTooltipFormatterProps } from "./chartTooltipFormatter";
 import { autoScrollLegend, AutoScrollLegendProps } from "../_utils/autoScrollLegend";
 import { calculateAxisConfig } from "./calculateAxisConfig";
+import { useLegendSelection, LegendSelectionResult } from "./useLegendSelection";
+import { useDataZoomWindow, DataZoomWindowOptions, DataZoomWindowResult } from "./useDataZoomWindow";
+import { DataZoomIndexWindow } from "../_utils/cartesian";
 import { MB_PER_GB, MB_PER_TB, trimAxisNumber, chineseMagnitudeDivisor, formatChineseMagnitudeTick, mbDisplayTier, formatMbAxisTick } from "./yAxisDisplayUnit";
-export { chartTooltipFormatter, autoScrollLegend, calculateAxisConfig, MB_PER_GB, MB_PER_TB, trimAxisNumber, chineseMagnitudeDivisor, formatChineseMagnitudeTick, mbDisplayTier, formatMbAxisTick, };
-export type { TooltipParams, ChartTooltipFormatterProps, AutoScrollLegendProps, };
+export { chartTooltipFormatter, autoScrollLegend, calculateAxisConfig, useLegendSelection, useDataZoomWindow, MB_PER_GB, MB_PER_TB, trimAxisNumber, chineseMagnitudeDivisor, formatChineseMagnitudeTick, mbDisplayTier, formatMbAxisTick, };
+export type { TooltipParams, ChartTooltipFormatterProps, AutoScrollLegendProps, LegendSelectionResult, DataZoomWindowOptions, DataZoomWindowResult, DataZoomIndexWindow, };

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

@@ -63,8 +63,22 @@ Object.defineProperty(exports, "trimAxisNumber", {
     return _yAxisDisplayUnit.trimAxisNumber;
   }
 });
+Object.defineProperty(exports, "useDataZoomWindow", {
+  enumerable: true,
+  get: function () {
+    return _useDataZoomWindow.useDataZoomWindow;
+  }
+});
+Object.defineProperty(exports, "useLegendSelection", {
+  enumerable: true,
+  get: function () {
+    return _useLegendSelection.useLegendSelection;
+  }
+});
 var _chartTooltipFormatter = _interopRequireDefault(require("./chartTooltipFormatter"));
 var _autoScrollLegend = require("../_utils/autoScrollLegend");
 var _calculateAxisConfig = require("./calculateAxisConfig");
+var _useLegendSelection = require("./useLegendSelection");
+var _useDataZoomWindow = require("./useDataZoomWindow");
 var _yAxisDisplayUnit = require("./yAxisDisplayUnit");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }