@hsu-react/ui 0.0.1

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

@@ -0,0 +1,339 @@
+var _excluded = ["className", "style", "data", "colorList", "chartTitle", "fontSize", "series", "tooltip", "title", "onChart", "onClick"];
+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 _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 _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; }
+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 React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import styles from "../index.module.less";
+import * as echarts from "echarts";
+import { defaultBubbleColorList, drawCircles } from "../_utils/bubble";
+
+// 扩展的数据项类型，包含图表需要的所有属性
+import { jsx as _jsx } from "react/jsx-runtime";
+var Bubble = function Bubble(props) {
+  var className = props.className,
+    style = props.style,
+    data = props.data,
+    _props$colorList = props.colorList,
+    colorList = _props$colorList === void 0 ? defaultBubbleColorList : _props$colorList,
+    chartTitle = props.chartTitle,
+    propFontSize = props.fontSize,
+    series = props.series,
+    tooltip = props.tooltip,
+    title = props.title,
+    onChart = props.onChart,
+    onClick = props.onClick,
+    coreOption = _objectWithoutProperties(props, _excluded);
+  var chartRef = useRef(null);
+  var chartInstanceRef = useRef(null);
+  var resizeObserverRef = useRef(null);
+  var layoutVersion = "ring-layout-v6-ellipse-tight";
+  var _useState = useState({
+      width: 0,
+      height: 0
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    containerSize = _useState2[0],
+    setContainerSize = _useState2[1];
+
+  // 缓存位置计算结果
+  var positionCacheRef = useRef(null);
+
+  // 生成缓存key，基于数据内容和容器尺寸
+  var generateCacheKey = useCallback(function (data, width, height) {
+    // 基于数据的name和value生成key，确保数据变化时能检测到
+    var dataKey = data === null || data === void 0 ? void 0 : data.map(function (item) {
+      return "".concat(item.name, ":").concat(item.value);
+    }).join("|");
+    return "".concat(layoutVersion, "_").concat(dataKey, "_").concat(width, "_").concat(height);
+  }, [layoutVersion]);
+
+  // 仅用于布局的半径补偿：当大小差异过大时，给小球增加额外布局半径，避免被大球挤压
+  var getLayoutRadiusList = useCallback(function (rawRadiusList) {
+    if (!rawRadiusList.length) return rawRadiusList;
+    var validRadiusList = rawRadiusList.filter(function (radius) {
+      return Number.isFinite(radius) && radius > 0;
+    });
+    if (!validRadiusList.length) return rawRadiusList;
+    var maxRadius = Math.max.apply(Math, _toConsumableArray(validRadiusList));
+    var minRadius = Math.min.apply(Math, _toConsumableArray(validRadiusList));
+    if (minRadius <= 0) return rawRadiusList;
+    var ratio = maxRadius / minRadius;
+    if (ratio <= 3) return rawRadiusList;
+    var radiusDiff = maxRadius - minRadius;
+    var compensationBase = Math.min(maxRadius * 0.32, Math.max(4, radiusDiff * 0.24));
+    return rawRadiusList.map(function (radius) {
+      if (!Number.isFinite(radius) || radius <= 0) return radius;
+      var normalized = radiusDiff === 0 ? 1 : (radius - minRadius) / radiusDiff;
+      var weight = 1 - normalized;
+      return radius + compensationBase * weight;
+    });
+  }, []);
+
+  // 处理数据并生成图表配置
+  var chartOption = useMemo(function () {
+    // 容器尺寸未获取或数据为空时，返回空配置
+    if (!data || data.length === 0 || containerSize.width === 0 || containerSize.height === 0) {
+      return {};
+    }
+    var colorListLen = colorList.length;
+    var countList = data === null || data === void 0 ? void 0 : data.map(function (item, index) {
+      return _objectSpread(_objectSpread({}, item), {}, {
+        id: index
+      });
+    });
+
+    // 计算最大值
+    var max = 0;
+    countList === null || countList === void 0 || countList.forEach(function (e) {
+      if (e.value >= max) max = e.value;
+    });
+
+    // 获取容器尺寸
+    var graphCanvas = containerSize;
+
+    // 基础气泡大小，根据容器尺寸和数据数量动态调整
+    var containerMin = Math.min(graphCanvas.width, graphCanvas.height);
+    var containerArea = graphCanvas.width * graphCanvas.height;
+    var dataCount = countList.length;
+
+    // 根据数据数量和容器面积动态调整基础尺寸
+    // 目标：尽量把气泡做大，让一层层外扩时紧贴容器边界；同时为环间隙留出必要空间。
+    var areaPerBubble = containerArea / dataCount;
+    var estimatedMaxRadius = Math.sqrt(areaPerBubble / Math.PI) * 0.82; // 提高密度系数，气泡更大
+
+    // 数量越多，基础尺寸越小，避免重叠
+    var sizeFactor = Math.max(0.55, 1.35 - dataCount * 0.07);
+    var baseSize = Math.min(170 * sizeFactor, containerMin / (1.9 + dataCount * 0.08), estimatedMaxRadius * 2 // 确保不超过估算的最大半径
+    );
+
+    // 自适应非线性映射：压缩大值、抬升小值，数据差距仍可读但视觉更饱满
+    var minPositiveValue = countList.map(function (item) {
+      return item.value;
+    }).filter(function (value) {
+      return value > 0;
+    }).reduce(function (min, value) {
+      return Math.min(min, value);
+    }, Number.POSITIVE_INFINITY);
+    var safeMinValue = Number.isFinite(minPositiveValue) ? minPositiveValue : 1;
+    var valueRatio = max > 0 ? max / safeMinValue : 1;
+    var compressPower = valueRatio > 20 ? 0.38 : valueRatio > 10 ? 0.46 : valueRatio > 4 ? 0.56 : 0.7;
+    // 最小气泡的底线提高，避免最小那颗过小难以识别；仍保留与最大值的可见差距
+    var minScale = valueRatio > 20 ? 0.74 : valueRatio > 10 ? 0.68 : valueRatio > 4 ? 0.62 : 0.56;
+    var maxScale = 1.1;
+    var symbolSizeList = countList.map(function (item) {
+      if (max <= 0) return baseSize * 0.6;
+      var normalized = item.value > 0 ? item.value / max : 0;
+      var compressed = Math.pow(normalized, compressPower);
+      var scale = minScale + compressed * (maxScale - minScale);
+      return Math.max(baseSize * 0.5, baseSize * scale);
+    });
+    var rawRadiusList = symbolSizeList.map(function (symbolSize) {
+      return symbolSize / 2;
+    });
+    var layoutRadiusList = getLayoutRadiusList(rawRadiusList);
+
+    // 生成缓存key
+    var cacheKey = generateCacheKey(data, graphCanvas.width, graphCanvas.height);
+
+    // 检查缓存，如果数据或容器尺寸没有变化，使用缓存的位置
+    var randomCircleArr;
+    if (positionCacheRef.current && positionCacheRef.current.cacheKey === cacheKey && positionCacheRef.current.positions.length === layoutRadiusList.length) {
+      // 使用缓存的位置
+      randomCircleArr = positionCacheRef.current.positions;
+    } else {
+      // 重新计算位置
+      randomCircleArr = drawCircles(layoutRadiusList, graphCanvas.width, graphCanvas.height);
+      // 更新缓存
+      positionCacheRef.current = {
+        cacheKey: cacheKey,
+        positions: randomCircleArr
+      };
+    }
+
+    // 处理每个数据项
+    countList === null || countList === void 0 || countList.forEach(function (e, i) {
+      var _symbolSizeList$i;
+      var symbolSize = (_symbolSizeList$i = symbolSizeList[i]) !== null && _symbolSizeList$i !== void 0 ? _symbolSizeList$i : baseSize * 0.5;
+      var fontSize = propFontSize !== null && propFontSize !== void 0 ? propFontSize : Math.max(12, Math.min(20, symbolSize * 0.28));
+
+      // 先计算 symbolSize，因为 label 的 width 需要用到它
+      var finalSymbolSize = symbolSize;
+      if (randomCircleArr[i]) {
+        e.x = randomCircleArr[i].x;
+        e.y = randomCircleArr[i].y;
+        e.symbolSize = symbolSize;
+        finalSymbolSize = symbolSize;
+      } else {
+        // 兜底：放在容器中心
+        e.symbolSize = symbolSize;
+        e.x = graphCanvas.width / 2;
+        e.y = graphCanvas.height / 2;
+        finalSymbolSize = symbolSize;
+      }
+      e.label = {
+        normal: {
+          show: true,
+          color: "#fff",
+          fontSize: fontSize,
+          width: finalSymbolSize,
+          // 设置宽度为气泡直径
+          overflow: "truncate",
+          // 超出部分截断
+          ellipsis: "..." // 省略号
+        }
+      };
+      e.emphasis = {
+        label: {
+          overflow: "none"
+        }
+      };
+      e.itemStyle = {
+        normal: {
+          color: colorList[i % colorListLen] // 使用索引确保颜色一致性
+        }
+      };
+    });
+    var option = _objectSpread({
+      title: _objectSpread({
+        text: chartTitle || ""
+      }, title),
+      tooltip: _objectSpread({
+        trigger: "item",
+        formatter: function formatter(params) {
+          if (params && _typeof(params) === "object" && "data" in params && params.data && _typeof(params.data) === "object" && "name" in params.data) {
+            var _data = params.data;
+            return "<b>" + _data.name + "</b>：<b>" + _data.value + " </b>";
+          }
+          return "";
+        }
+      }, tooltip),
+      series: [_objectSpread({
+        type: "graph",
+        layout: "none",
+        label: {
+          show: true,
+          normal: {
+            color: "#fff"
+          }
+        },
+        data: countList
+      }, series)]
+    }, coreOption);
+    return option;
+  }, [data, colorList, chartTitle, propFontSize, title, tooltip, series, coreOption, containerSize, generateCacheKey, getLayoutRadiusList]);
+
+  // 设置 ResizeObserver 监听容器尺寸变化（包括首次获取尺寸）
+  useEffect(function () {
+    if (!chartRef.current) return;
+    var containerElement = chartRef.current.parentElement;
+    if (!containerElement) return;
+    var observer = new ResizeObserver(function (entries) {
+      var entry = entries[0];
+      if (entry) {
+        var _entry$contentRect = entry.contentRect,
+          width = _entry$contentRect.width,
+          height = _entry$contentRect.height;
+        setContainerSize(function (prev) {
+          if (prev.width !== width || prev.height !== height) {
+            return {
+              width: width,
+              height: height
+            };
+          }
+          return prev;
+        });
+      }
+    });
+    observer.observe(containerElement);
+    resizeObserverRef.current = observer;
+    return function () {
+      observer.disconnect();
+      resizeObserverRef.current = null;
+    };
+  }, []);
+
+  // 处理图表 resize 的回调
+  var handleResize = useCallback(function () {
+    var _chartInstanceRef$cur;
+    (_chartInstanceRef$cur = chartInstanceRef.current) === null || _chartInstanceRef$cur === void 0 || _chartInstanceRef$cur.resize();
+    // 重新设置配置以更新气泡位置
+    if (chartInstanceRef.current && data && data.length > 0) {
+      chartInstanceRef.current.setOption(chartOption, true);
+    }
+  }, [chartOption, data]);
+
+  // 初始化图表
+  useEffect(function () {
+    if (!chartRef.current) return;
+    // 等待容器尺寸有效后再初始化图表
+    if (containerSize.width === 0 || containerSize.height === 0) return;
+
+    // 初始化或获取已存在的实例
+    var chart = chartInstanceRef.current;
+    if (!chart) {
+      chart = echarts.init(chartRef.current);
+      chartInstanceRef.current = chart;
+      // 首次初始化时调用 onChart 回调
+      onChart === null || onChart === void 0 || onChart(chart);
+    }
+
+    // 先 resize 确保 echarts 获取到正确的容器尺寸，再设置配置
+    chart.resize();
+    chart.setOption(chartOption, true);
+
+    // 添加 window resize 监听
+    window.addEventListener("resize", handleResize);
+
+    // 添加点击事件
+    if (onClick) {
+      var _chartInstanceRef$cur2;
+      (_chartInstanceRef$cur2 = chartInstanceRef.current) === null || _chartInstanceRef$cur2 === void 0 || _chartInstanceRef$cur2.on("click", onClick);
+    }
+
+    // 清理函数
+    return function () {
+      window.removeEventListener("resize", handleResize);
+      if (onClick) {
+        var _chartInstanceRef$cur3;
+        (_chartInstanceRef$cur3 = chartInstanceRef.current) === null || _chartInstanceRef$cur3 === void 0 || _chartInstanceRef$cur3.off("click", onClick);
+      }
+    };
+  }, [chartOption, containerSize.width, containerSize.height, handleResize, onChart, onClick]);
+
+  // 组件卸载时清理图表实例
+  useEffect(function () {
+    return function () {
+      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 Bubble;

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

@@ -0,0 +1,4 @@
+import React from "react";
+import { ChartCommonProps } from "..";
+declare const Common: React.FC<ChartCommonProps>;
+export default Common;

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

@@ -0,0 +1,94 @@
+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", "onChart"];
+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 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 Common = function Common(props) {
+  var className = props.className,
+    style = props.style,
+    onChart = props.onChart,
+    coreOption = _objectWithoutProperties(props, _excluded);
+  var chartRef = useRef(null);
+  var chartInstanceRef = useRef(null);
+  var resizeObserverRef = useRef(null);
+
+  // 使用 useMemo 缓存 chart 配置
+  var chartOption = useMemo(function () {
+    var option = _objectSpread({}, coreOption);
+    return option;
+  }, [coreOption]);
+
+  // 处理图表 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;
+    }
+
+    // 设置配置
+    chart.setOption(chartOption, true);
+
+    // 图表就绪回调（可用于图例自动滚动等）
+    onChart === null || onChart === void 0 || onChart(chart);
+
+    // 添加 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, onChart]);
+
+  // 组件卸载时清理资源
+  useEffect(function () {
+    return function () {
+      // 清理 ResizeObserver
+      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 Common;

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

@@ -0,0 +1,8 @@
+import { ChartCommonProps, SeriesData } from "..";
+import React from "react";
+export interface ChartGaugeProps extends ChartCommonProps {
+    color?: string[] | string;
+    seriesData?: SeriesData[];
+}
+declare const Gauge: React.FC<ChartGaugeProps>;
+export default Gauge;

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

@@ -0,0 +1,145 @@
+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 = ["pointer", "detail", "axisLine", "axisTick", "splitLine", "progress", "axisLabel", "title", "color"];
+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";
+import { jsx as _jsx } from "react/jsx-runtime";
+var Gauge = function Gauge(props) {
+  var className = props.className,
+    style = props.style,
+    _props$series = props.series,
+    series = _props$series === void 0 ? {} : _props$series,
+    seriesData = props.seriesData;
+  var _ref = series,
+    pointer = _ref.pointer,
+    detail = _ref.detail,
+    axisLine = _ref.axisLine,
+    axisTick = _ref.axisTick,
+    splitLine = _ref.splitLine,
+    progress = _ref.progress,
+    axisLabel = _ref.axisLabel,
+    title = _ref.title,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? "#1675FB" : _ref$color,
+    coreSeries = _objectWithoutProperties(_ref, _excluded);
+  var chartRef = useRef(null);
+  var chartInstanceRef = useRef(null);
+  var resizeObserverRef = useRef(null);
+
+  // 使用 useMemo 缓存 chart 配置
+  var chartOption = useMemo(function () {
+    var option = {
+      series: _objectSpread({
+        type: "gauge",
+        center: ["50%", "60%"],
+        radius: "115%",
+        color: color,
+        pointer: _objectSpread({
+          show: false
+        }, pointer),
+        detail: _objectSpread({
+          show: true,
+          offsetCenter: [0, "-10%"],
+          color: "inherit"
+        }, detail),
+        title: _objectSpread({
+          show: true,
+          offsetCenter: [0, "30%"]
+        }, title),
+        axisLine: _objectSpread({
+          show: true,
+          lineStyle: {
+            color: [[1, "#EAEDF2"]],
+            width: 14
+          }
+        }, axisLine),
+        axisTick: _objectSpread({
+          show: false
+        }, axisTick),
+        progress: _objectSpread({
+          show: true,
+          roundCap: false,
+          width: 14
+        }, progress),
+        splitLine: _objectSpread({
+          show: false
+        }, splitLine),
+        axisLabel: _objectSpread({
+          show: false
+        }, axisLabel),
+        data: seriesData
+      }, coreSeries)
+    };
+    return option;
+  }, [color, pointer, detail, title, axisLine, axisTick, progress, splitLine, axisLabel, seriesData, coreSeries]);
+
+  // 处理图表 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;
+    }
+
+    // 设置配置
+    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]);
+
+  // 组件卸载时清理资源
+  useEffect(function () {
+    return function () {
+      // 清理 ResizeObserver
+      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 Gauge;

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

@@ -0,0 +1,20 @@
+import { ChartCommonProps, ChartOptionsType, ChartTypes, ChartsOption } from "..";
+import React from "react";
+interface GroupType {
+    type: ChartTypes;
+    options: ChartOptionsType;
+}
+interface CommonOption {
+    type: ChartTypes;
+    options: ChartsOption;
+}
+export type ChartGroupType = Array<GroupType>;
+export interface ChartGroupProps extends ChartCommonProps {
+    chartGroup: Array<GroupType>;
+    commonOptions?: CommonOption[];
+    pageSize?: number;
+    pageNum?: number;
+    onChangePage?: (pageNum: number) => void;
+}
+declare const ChartGroup: React.FC<ChartGroupProps>;
+export default ChartGroup;