@hsu-react/ui 0.0.1

package/es/components/Chart/Radar/index.d.ts

@@ -0,0 +1,29 @@
+import { ChartCommonProps } from "..";
+import React from "react";
+export interface RadarIndicator {
+    name: string;
+    max?: number;
+}
+/** 单指标 tooltip 触发方式
+ * - `point`  仅悬停在数据点/线上触发（echarts 原生 item trigger）
+ * - `region` 进入该指标的扇形区域即触发，并在命中扇形区内填充高亮色
+ */
+export type SingleIndicatorMode = "point" | "region";
+export interface ChartRadarProps extends ChartCommonProps {
+    indicators: RadarIndicator[];
+    data: number[];
+    color?: string;
+    name?: string;
+    /**
+     * 单指标 tooltip：
+     * - `true` 使用内置简单格式（`系列名 · 指标名：值`）
+     * - 传函数则接收当前最近指标下标与原始 echarts params，自行返回 HTML
+     */
+    singleIndicatorTooltip?: boolean | ((indicatorIndex: number, params: unknown, indicator: RadarIndicator) => string);
+    /** 单指标触发方式；**不设置则完全走 echarts 原生全指标 tooltip**，忽略 `singleIndicatorTooltip` */
+    singleIndicatorMode?: SingleIndicatorMode;
+    /** `region` 模式下的高亮色；不传则使用 `color` 以 0.12 透明度渲染 */
+    singleIndicatorHoverFill?: string;
+}
+declare const Radar: React.FC<ChartRadarProps>;
+export default Radar;

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

@@ -0,0 +1,309 @@
+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 = ["className", "style", "indicators", "data", "color", "name", "radar", "series", "singleIndicatorTooltip", "singleIndicatorMode", "singleIndicatorHoverFill"];
+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 _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 _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 _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 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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import * as echarts from "echarts";
+import React, { useCallback, useEffect, useMemo, useRef } from "react";
+import styles from "../index.module.less";
+
+/** 单指标 tooltip 触发方式
+ * - `point`  仅悬停在数据点/线上触发（echarts 原生 item trigger）
+ * - `region` 进入该指标的扇形区域即触发，并在命中扇形区内填充高亮色
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+var Radar = function Radar(props) {
+  var className = props.className,
+    style = props.style,
+    indicators = props.indicators,
+    data = props.data,
+    _props$color = props.color,
+    color = _props$color === void 0 ? "#0364f5" : _props$color,
+    _props$name = props.name,
+    name = _props$name === void 0 ? "热力值" : _props$name,
+    radar = props.radar,
+    series = props.series,
+    _props$singleIndicato = props.singleIndicatorTooltip,
+    singleIndicatorTooltipProp = _props$singleIndicato === void 0 ? false : _props$singleIndicato,
+    singleIndicatorMode = props.singleIndicatorMode,
+    singleIndicatorHoverFill = props.singleIndicatorHoverFill,
+    coreOption = _objectWithoutProperties(props, _excluded);
+  var chartRef = useRef(null);
+  var chartInstanceRef = useRef(null);
+  var resizeObserverRef = useRef(null);
+  var hoveredIndicatorRef = useRef(-1);
+  var singleIndicatorEnabled = Boolean(singleIndicatorTooltipProp) && singleIndicatorMode !== undefined;
+  var singleIndicatorFormatter = typeof singleIndicatorTooltipProp === "function" ? singleIndicatorTooltipProp : undefined;
+  var singleIndicatorRegion = singleIndicatorMode === "region";
+  var singleIndicatorHighlight = singleIndicatorRegion;
+  var chartOption = useMemo(function () {
+    var tooltipOption = coreOption === null || coreOption === void 0 ? void 0 : coreOption.tooltip;
+    var seriesOverride = series;
+    var overrideData = seriesOverride === null || seriesOverride === void 0 ? void 0 : seriesOverride.data;
+    var extraData = Array.isArray(overrideData) ? overrideData : [];
+
+    // 将每个 extraData item 拆为独立 series，使图例可以分别控制显隐
+    var extraSeries = extraData.map(function (item) {
+      var _d$name;
+      var d = item;
+      return {
+        type: "radar",
+        name: (_d$name = d.name) !== null && _d$name !== void 0 ? _d$name : "",
+        data: [d]
+      };
+    });
+    var mainSeries = {
+      type: "radar",
+      name: name,
+      data: [{
+        value: data,
+        name: name,
+        areaStyle: {
+          color: color,
+          opacity: 0.3
+        },
+        lineStyle: {
+          color: color,
+          width: 2
+        },
+        itemStyle: {
+          color: "#fff",
+          borderColor: color,
+          borderWidth: 2
+        },
+        symbol: "circle",
+        symbolSize: 6
+      }]
+    };
+    var option = _objectSpread(_objectSpread({
+      color: [color],
+      radar: _objectSpread({
+        indicator: indicators.map(function (ind) {
+          var _ind$max;
+          return {
+            name: ind.name,
+            max: (_ind$max = ind.max) !== null && _ind$max !== void 0 ? _ind$max : 40
+          };
+        }),
+        center: ["50%", "50%"],
+        radius: "70%",
+        splitNumber: 4,
+        shape: "polygon",
+        splitArea: {
+          areaStyle: {
+            color: ["rgba(3, 100, 245, 0.05)", "rgba(3, 100, 245, 0.1)"]
+          }
+        },
+        axisLine: {
+          lineStyle: {
+            color: "rgba(3, 100, 245, 0.2)",
+            type: "dashed"
+          }
+        },
+        splitLine: {
+          lineStyle: {
+            color: "rgba(3, 100, 245, 0.2)",
+            type: "dashed"
+          }
+        },
+        axisLabel: {
+          show: false
+        },
+        axisName: {
+          color: "#7B7B7B",
+          fontSize: 14,
+          fontWeight: 400
+        }
+      }, radar),
+      series: [].concat(_toConsumableArray(extraSeries), [mainSeries])
+    }, coreOption), {}, {
+      tooltip: _objectSpread(_objectSpread({
+        show: true
+      }, singleIndicatorEnabled ? _objectSpread(_objectSpread({
+        trigger: "item"
+      }, singleIndicatorRegion ? {
+        triggerOn: "none"
+      } : {}), {}, {
+        formatter: function formatter(params) {
+          var _p$data$value, _p$data, _ref, _p$data$name, _p$data2, _p$color;
+          var idx = hoveredIndicatorRef.current;
+          if (idx < 0 || idx >= indicators.length) return "";
+          if (singleIndicatorFormatter) {
+            return singleIndicatorFormatter(idx, params, indicators[idx]);
+          }
+          var p = params;
+          var rawValue = (_p$data$value = p === null || p === void 0 || (_p$data = p.data) === null || _p$data === void 0 ? void 0 : _p$data.value) !== null && _p$data$value !== void 0 ? _p$data$value : p === null || p === void 0 ? void 0 : p.value;
+          var value = Array.isArray(rawValue) ? rawValue[idx] : rawValue;
+          var seriesName = (_ref = (_p$data$name = p === null || p === void 0 || (_p$data2 = p.data) === null || _p$data2 === void 0 ? void 0 : _p$data2.name) !== null && _p$data$name !== void 0 ? _p$data$name : p === null || p === void 0 ? void 0 : p.name) !== null && _ref !== void 0 ? _ref : "";
+          var dot = "<span style=\"display:inline-block;width:8px;height:8px;border-radius:50%;background:".concat((_p$color = p === null || p === void 0 ? void 0 : p.color) !== null && _p$color !== void 0 ? _p$color : color, ";margin-right:6px;\"></span>");
+          return "".concat(dot).concat(seriesName ? seriesName + " · " : "").concat(indicators[idx].name, "\uFF1A").concat(value !== null && value !== void 0 ? value : "-");
+        }
+      }) : {}), tooltipOption)
+    });
+    return option;
+  }, [indicators, data, color, name, radar, series, coreOption, singleIndicatorEnabled, singleIndicatorFormatter, singleIndicatorRegion]);
+  var handleResize = useCallback(function () {
+    var _chartInstanceRef$cur;
+    (_chartInstanceRef$cur = chartInstanceRef.current) === null || _chartInstanceRef$cur === void 0 || _chartInstanceRef$cur.resize();
+  }, []);
+  useEffect(function () {
+    if (!chartRef.current) return;
+    var chart = chartInstanceRef.current;
+    if (!chart) {
+      chart = echarts.init(chartRef.current);
+      chartInstanceRef.current = chart;
+    }
+    chart.setOption(chartOption, true);
+    var zrMoveHandler = null;
+    var zrOutHandler = null;
+    var hoverShape = null;
+    if (singleIndicatorEnabled) {
+      var _chartOption$series;
+      var zr = chart.getZr();
+      var mainSeriesIndex = ((_chartOption$series = chartOption.series) === null || _chartOption$series === void 0 ? void 0 : _chartOption$series.length) != null ? chartOption.series.length - 1 : 0;
+      var hoverFill = singleIndicatorHoverFill !== null && singleIndicatorHoverFill !== void 0 ? singleIndicatorHoverFill : color;
+      if (singleIndicatorHighlight) {
+        var Polygon = echarts.graphic.Polygon;
+        hoverShape = new Polygon({
+          shape: {
+            points: []
+          },
+          style: {
+            fill: hoverFill,
+            opacity: 0.12
+          },
+          silent: true,
+          z: 0,
+          invisible: true
+        });
+        zr.add(hoverShape);
+      }
+      var hideTip = function hideTip() {
+        hoveredIndicatorRef.current = -1;
+        if (singleIndicatorRegion) {
+          var _chartInstanceRef$cur2;
+          (_chartInstanceRef$cur2 = chartInstanceRef.current) === null || _chartInstanceRef$cur2 === void 0 || _chartInstanceRef$cur2.dispatchAction({
+            type: "hideTip"
+          });
+        }
+        if (hoverShape) hoverShape.attr({
+          invisible: true
+        });
+      };
+      zrMoveHandler = function zrMoveHandler(e) {
+        var _model$getComponent, _coord$r;
+        var model = chart.getModel();
+        var coord = (_model$getComponent = model.getComponent("radar")) === null || _model$getComponent === void 0 ? void 0 : _model$getComponent.coordinateSystem;
+        if (!coord) return;
+        var dx = e.offsetX - coord.cx;
+        var dy = e.offsetY - coord.cy;
+        var distance = Math.sqrt(dx * dx + dy * dy);
+        var outerR = (_coord$r = coord.r) !== null && _coord$r !== void 0 ? _coord$r : Infinity;
+        if (distance > outerR) {
+          hideTip();
+          return;
+        }
+        var axes = coord.getIndicatorAxes();
+        // echarts 雷达轴角度按数学约定（y 向上），而屏幕坐标 y 向下，需翻转 y
+        var mouseAngle = Math.atan2(-dy, dx);
+        var bestI = -1;
+        var bestDA = Infinity;
+        axes.forEach(function (ax, i) {
+          var da = Math.abs(mouseAngle - ax.angle);
+          if (da > Math.PI) da = 2 * Math.PI - da;
+          if (da < bestDA) {
+            bestDA = da;
+            bestI = i;
+          }
+        });
+        hoveredIndicatorRef.current = bestI;
+        if (hoverShape && bestI >= 0) {
+          // 以与雷达多边形一致的边界构造扇形区：
+          // 中心 → 与上一轴顶边的中点 → 当前轴顶 → 与下一轴顶边的中点
+          var n = axes.length;
+          var tipOf = function tipOf(idx) {
+            var a = axes[idx].angle;
+            return [coord.cx + outerR * Math.cos(a), coord.cy - outerR * Math.sin(a)];
+          };
+          var midOf = function midOf(a, b) {
+            return [(a[0] + b[0]) / 2, (a[1] + b[1]) / 2];
+          };
+          var prevTip = tipOf((bestI - 1 + n) % n);
+          var curTip = tipOf(bestI);
+          var nextTip = tipOf((bestI + 1) % n);
+          var points = [[coord.cx, coord.cy], midOf(prevTip, curTip), curTip, midOf(curTip, nextTip)];
+          hoverShape.attr({
+            shape: {
+              points: points
+            },
+            invisible: false
+          });
+        }
+        if (singleIndicatorRegion) {
+          var _chartInstanceRef$cur3;
+          (_chartInstanceRef$cur3 = chartInstanceRef.current) === null || _chartInstanceRef$cur3 === void 0 || _chartInstanceRef$cur3.dispatchAction({
+            type: "showTip",
+            seriesIndex: mainSeriesIndex,
+            dataIndex: 0,
+            position: [e.offsetX, e.offsetY]
+          });
+        }
+      };
+      zrOutHandler = function zrOutHandler() {
+        return hideTip();
+      };
+      zr.on("mousemove", zrMoveHandler);
+      zr.on("globalout", zrOutHandler);
+    }
+    window.addEventListener("resize", handleResize);
+    if (chartRef.current && !resizeObserverRef.current) {
+      resizeObserverRef.current = new ResizeObserver(handleResize);
+      resizeObserverRef.current.observe(chartRef.current);
+    }
+    return function () {
+      window.removeEventListener("resize", handleResize);
+      if (chartInstanceRef.current) {
+        var _zr = chartInstanceRef.current.getZr();
+        if (zrMoveHandler) _zr.off("mousemove", zrMoveHandler);
+        if (zrOutHandler) _zr.off("globalout", zrOutHandler);
+        if (hoverShape) {
+          _zr.remove(hoverShape);
+        }
+      }
+    };
+  }, [chartOption, handleResize, singleIndicatorEnabled, singleIndicatorRegion, singleIndicatorHighlight, singleIndicatorHoverFill, color]);
+  useEffect(function () {
+    return function () {
+      if (resizeObserverRef.current) {
+        resizeObserverRef.current.disconnect();
+        resizeObserverRef.current = null;
+      }
+      if (chartInstanceRef.current) {
+        chartInstanceRef.current.dispose();
+        chartInstanceRef.current = null;
+      }
+    };
+  }, []);
+  return /*#__PURE__*/_jsx("div", {
+    className: "".concat(styles["chart-container"], " ").concat(className !== null && className !== void 0 ? className : ""),
+    style: style,
+    children: /*#__PURE__*/_jsx("div", {
+      ref: chartRef,
+      style: {
+        width: "100%",
+        height: "100%"
+      }
+    })
+  });
+};
+export default Radar;

package/es/components/Chart/Sankey/index.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import { ChartCommonProps } from "..";
+import * as echarts from "echarts";
+type SankeyNodeItemOption = echarts.SankeySeriesOption["data"];
+type SankeyEdgeItemOption = echarts.SankeySeriesOption["links"];
+export interface ChartSankeyProps extends ChartCommonProps {
+    seriesData: SankeyNodeItemOption;
+    seriesLinks: SankeyEdgeItemOption;
+    getImage?: (img: string) => void;
+}
+declare const Sankey: React.FC<ChartSankeyProps>;
+export default Sankey;

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

@@ -0,0 +1,191 @@
+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 _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 _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 _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 _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 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); }
+import React, { useCallback, useEffect, useMemo, useRef } from "react";
+import styles from "../index.module.less";
+import * as echarts from "echarts";
+import { jsx as _jsx } from "react/jsx-runtime";
+var Sankey = function Sankey(props) {
+  var className = props.className,
+    style = props.style,
+    seriesData = props.seriesData,
+    seriesLinks = props.seriesLinks,
+    series = props.series,
+    getImage = props.getImage;
+  var chartRef = useRef(null);
+  var chartInstanceRef = useRef(null);
+  var resizeObserverRef = useRef(null);
+
+  // 使用 useMemo 缓存 chart 配置
+  var chartOption = useMemo(function () {
+    var option = {
+      series: _objectSpread({
+        type: "sankey",
+        layout: "none",
+        top: 0,
+        left: 0,
+        right: 180,
+        bottom: 0,
+        nodeGap: 1,
+        layoutIterations: 0,
+        data: seriesData === null || seriesData === void 0 ? void 0 : seriesData.map(function (item) {
+          return {
+            name: item.name,
+            itemStyle: {
+              color: "#156FFF"
+            },
+            label: {
+              position: "right",
+              textStyle: {
+                fontWeight: 800
+              }
+            }
+          };
+        }),
+        links: seriesLinks === null || seriesLinks === void 0 ? void 0 : seriesLinks.map(function (item) {
+          return _objectSpread(_objectSpread({}, item), {}, {
+            value: 10
+          });
+        }),
+        draggable: true,
+        roam: true,
+        focusNodeAdjacency: "allEdges",
+        levels: [{
+          depth: 0,
+          itemStyle: {
+            color: "yellow"
+          },
+          lineStyle: {
+            color: "source",
+            opacity: 0.2
+          }
+        }, {
+          depth: 1,
+          lineStyle: {
+            color: "source",
+            opacity: 0.2
+          }
+        }, {
+          depth: 2,
+          lineStyle: {
+            color: "source",
+            opacity: 0.2
+          }
+        }, {
+          depth: 3,
+          label: {
+            fontSize: 12
+          }
+        }],
+        label: {
+          fontSize: 14,
+          color: "#666"
+        },
+        itemStyle: {
+          color: "transparent",
+          borderColor: "transparent",
+          borderWidth: 20
+        }
+      }, series)
+    };
+    return option;
+  }, [seriesData, seriesLinks, series]);
+
+  // 处理图表 resize 的回调
+  var handleResize = useCallback(function () {
+    var _chartInstanceRef$cur;
+    (_chartInstanceRef$cur = chartInstanceRef.current) === null || _chartInstanceRef$cur === void 0 || _chartInstanceRef$cur.resize();
+  }, []);
+
+  // 初始化图表
+  useEffect(function () {
+    if (!chartRef.current) return;
+
+    // 初始化或获取已存在的实例
+    var chart = chartInstanceRef.current;
+    if (!chart) {
+      chart = echarts.init(chartRef.current);
+      chartInstanceRef.current = chart;
+
+      // 首次初始化时添加 finished 事件监听
+      chart.on("finished", function () {
+        getImage === null || getImage === void 0 || getImage(chart.getDataURL({
+          type: "png",
+          pixelRatio: 1,
+          backgroundColor: "#fff"
+        }));
+      });
+    }
+
+    // 设置配置
+    chart.setOption(chartOption, true);
+
+    // 添加 resize 监听
+    window.addEventListener("resize", handleResize);
+
+    // 添加 ResizeObserver
+    if (chartRef.current && !resizeObserverRef.current) {
+      resizeObserverRef.current = new ResizeObserver(handleResize);
+      resizeObserverRef.current.observe(chartRef.current);
+    }
+
+    // 清理函数
+    return function () {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, [chartOption, handleResize, getImage]);
+
+  // 组件卸载时清理资源
+  useEffect(function () {
+    return function () {
+      // 清理 ResizeObserver
+      if (resizeObserverRef.current) {
+        resizeObserverRef.current.disconnect();
+        resizeObserverRef.current = null;
+      }
+      // 销毁图表实例
+      if (chartInstanceRef.current) {
+        chartInstanceRef.current.off("finished");
+        chartInstanceRef.current.dispose();
+        chartInstanceRef.current = null;
+      }
+    };
+  }, []);
+  function getMaxLevelCount() {
+    if (!(seriesData !== null && seriesData !== void 0 && seriesData.length)) return 0;
+    var level = {};
+    seriesData === null || seriesData === void 0 || seriesData.forEach(function (v) {
+      var _ref = v,
+        _level = _ref.level;
+      if (!level[_level]) {
+        level[_level] = 1;
+        return;
+      }
+      level[_level] += 1;
+    });
+    var max = Math.max.apply(Math, _toConsumableArray(Object.values(level)));
+    return max > 10 ? max : 10;
+  }
+  return /*#__PURE__*/_jsx("div", {
+    className: "".concat(styles["chart-container"], " ").concat(className !== null && className !== void 0 ? className : ""),
+    style: style,
+    children: /*#__PURE__*/_jsx("div", {
+      ref: chartRef,
+      style: {
+        width: "100%",
+        height: "100%",
+        minHeight: "".concat(getMaxLevelCount() * 30, "px")
+      }
+    })
+  });
+};
+export default Sankey;

package/es/components/Chart/Tree/index.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { ChartCommonProps, SeriesData } from "..";
+export interface ChartTreeProps extends ChartCommonProps {
+    seriesData: SeriesData[];
+    getImage?: (img: string) => void;
+}
+declare const Tree: React.FC<ChartTreeProps>;
+export default Tree;

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

@@ -0,0 +1,110 @@
+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); }
+import React, { useCallback, useEffect, useMemo, useRef } from "react";
+import styles from "../index.module.less";
+import * as echarts from "echarts";
+import { deepCopy } from "hsu-utils";
+import { handleTreeData } from "../_utils/tree";
+import { jsx as _jsx } from "react/jsx-runtime";
+var Tree = function Tree(props) {
+  var className = props.className,
+    style = props.style,
+    seriesData = props.seriesData,
+    series = props.series,
+    getImage = props.getImage;
+  var chartRef = useRef(null);
+  var chartInstanceRef = useRef(null);
+  var resizeObserverRef = useRef(null);
+
+  // 使用 useMemo 缓存 chart 配置
+  var chartOption = useMemo(function () {
+    var option = {
+      series: _objectSpread({
+        type: "tree",
+        data: handleTreeData(deepCopy(seriesData), 0),
+        left: "10%",
+        right: "10%",
+        top: "10%",
+        bottom: "10%"
+      }, series)
+    };
+    return option;
+  }, [seriesData, series]);
+
+  // 处理图表 resize 的回调
+  var handleResize = useCallback(function () {
+    var _chartInstanceRef$cur;
+    (_chartInstanceRef$cur = chartInstanceRef.current) === null || _chartInstanceRef$cur === void 0 || _chartInstanceRef$cur.resize();
+  }, []);
+
+  // 初始化图表
+  useEffect(function () {
+    if (!chartRef.current) return;
+
+    // 初始化或获取已存在的实例
+    var chart = chartInstanceRef.current;
+    if (!chart) {
+      chart = echarts.init(chartRef.current);
+      chartInstanceRef.current = chart;
+
+      // 首次初始化时添加 finished 事件监听
+      chart.on("finished", function () {
+        getImage === null || getImage === void 0 || getImage(chart.getDataURL({
+          type: "png",
+          pixelRatio: 1,
+          backgroundColor: "#fff"
+        }));
+      });
+    }
+
+    // 设置配置
+    chart.setOption(chartOption, true);
+
+    // 添加 resize 监听
+    window.addEventListener("resize", handleResize);
+
+    // 添加 ResizeObserver
+    if (chartRef.current && !resizeObserverRef.current) {
+      resizeObserverRef.current = new ResizeObserver(handleResize);
+      resizeObserverRef.current.observe(chartRef.current);
+    }
+
+    // 清理函数
+    return function () {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, [chartOption, handleResize, getImage]);
+
+  // 组件卸载时清理资源
+  useEffect(function () {
+    return function () {
+      // 清理 ResizeObserver
+      if (resizeObserverRef.current) {
+        resizeObserverRef.current.disconnect();
+        resizeObserverRef.current = null;
+      }
+      // 销毁图表实例
+      if (chartInstanceRef.current) {
+        chartInstanceRef.current.off("finished");
+        chartInstanceRef.current.dispose();
+        chartInstanceRef.current = null;
+      }
+    };
+  }, []);
+  return /*#__PURE__*/_jsx("div", {
+    className: "".concat(styles["chart-container"], " ").concat(className !== null && className !== void 0 ? className : ""),
+    style: style,
+    children: /*#__PURE__*/_jsx("div", {
+      ref: chartRef,
+      style: {
+        width: "100%",
+        height: "100%"
+      }
+    })
+  });
+};
+export default Tree;

package/es/components/Chart/_utils/autoScrollLegend.d.ts

@@ -0,0 +1,14 @@
+import * as echarts from "echarts";
+export interface AutoScrollLegendProps {
+    chart: echarts.ECharts;
+    total: number;
+    visibleCount?: number;
+    interval?: number;
+    autoStart?: boolean;
+    stopOnWheel?: boolean;
+}
+export declare function autoScrollLegend(props: AutoScrollLegendProps): {
+    start: () => void;
+    stop: () => void;
+    dispose: () => void;
+};