@hsu-react/ui 0.0.1

package/es/components/Chart/Pie/Pie3D/index.js

@@ -0,0 +1,140 @@
+var _excluded = ["className", "style", "pieData", "internalDiameterRatio", "autoRotate", "distance", "alpha", "beta", "hoverHeightIncrement", "minHeight", "maxHeight", "yOffset", "tooltip", "label", "enableMouseControl", "onChart", "onClick"];
+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 "echarts-gl";
+import React, { useCallback, useEffect, useMemo, useRef } from "react";
+import { useMouseOverHandler, useGlobalOutHandler } from "./_hooks";
+import { getPie3DOption } from "./_utils/option";
+import styles from "../../index.module.less";
+import { jsx as _jsx } from "react/jsx-runtime";
+var ChartPie3D = function ChartPie3D(props) {
+  var className = props.className,
+    style = props.style,
+    pieData = props.pieData,
+    _props$internalDiamet = props.internalDiameterRatio,
+    internalDiameterRatio = _props$internalDiamet === void 0 ? 0.9 : _props$internalDiamet,
+    _props$autoRotate = props.autoRotate,
+    autoRotate = _props$autoRotate === void 0 ? false : _props$autoRotate,
+    _props$distance = props.distance,
+    distance = _props$distance === void 0 ? 200 : _props$distance,
+    _props$alpha = props.alpha,
+    alpha = _props$alpha === void 0 ? 20 : _props$alpha,
+    _props$beta = props.beta,
+    beta = _props$beta === void 0 ? 0 : _props$beta,
+    _props$hoverHeightInc = props.hoverHeightIncrement,
+    hoverHeightIncrement = _props$hoverHeightInc === void 0 ? 5 : _props$hoverHeightInc,
+    _props$minHeight = props.minHeight,
+    minHeight = _props$minHeight === void 0 ? 1 : _props$minHeight,
+    _props$maxHeight = props.maxHeight,
+    maxHeight = _props$maxHeight === void 0 ? 10 : _props$maxHeight,
+    _props$yOffset = props.yOffset,
+    yOffset = _props$yOffset === void 0 ? -0.2 : _props$yOffset,
+    _props$tooltip = props.tooltip,
+    tooltip = _props$tooltip === void 0 ? {
+      show: false
+    } : _props$tooltip,
+    _props$label = props.label,
+    label = _props$label === void 0 ? {
+      show: true
+    } : _props$label,
+    _props$enableMouseCon = props.enableMouseControl,
+    enableMouseControl = _props$enableMouseCon === void 0 ? false : _props$enableMouseCon,
+    onChart = props.onChart,
+    onClick = props.onClick,
+    coreOption = _objectWithoutProperties(props, _excluded);
+  var chartRef = useRef(null);
+  var chartInstanceRef = useRef(null);
+  var resizeObserverRef = useRef(null);
+  var hoveredIndexRef = useRef("");
+  var optionRef = useRef(null);
+  var chartOption = useMemo(function () {
+    return getPie3DOption(pieData, {
+      internalDiameterRatio: internalDiameterRatio,
+      tooltip: tooltip,
+      alpha: alpha,
+      beta: beta,
+      autoRotate: autoRotate,
+      distance: distance,
+      coreOption: coreOption,
+      optionRef: optionRef,
+      minHeight: minHeight,
+      maxHeight: maxHeight,
+      yOffset: yOffset,
+      label: label,
+      enableMouseControl: enableMouseControl
+    });
+  }, [pieData, internalDiameterRatio, tooltip, alpha, beta, autoRotate, distance, coreOption, minHeight, maxHeight, yOffset, label, enableMouseControl]);
+  var handleResize = useCallback(function () {
+    var _chartInstanceRef$cur;
+    (_chartInstanceRef$cur = chartInstanceRef.current) === null || _chartInstanceRef$cur === void 0 || _chartInstanceRef$cur.resize();
+  }, []);
+  var handleMouseOver = useMouseOverHandler(optionRef, chartInstanceRef, hoveredIndexRef, {
+    hoverHeightIncrement: hoverHeightIncrement,
+    minHeight: minHeight,
+    maxHeight: maxHeight,
+    yOffset: yOffset,
+    autoRotate: autoRotate
+  });
+  var handleGlobalOut = useGlobalOutHandler(optionRef, chartInstanceRef, hoveredIndexRef, {
+    minHeight: minHeight,
+    maxHeight: maxHeight,
+    yOffset: yOffset,
+    autoRotate: autoRotate
+  });
+  useEffect(function () {
+    if (!chartRef.current) return;
+    var chart = chartInstanceRef.current;
+    if (!chart) {
+      chart = echarts.init(chartRef.current);
+      chartInstanceRef.current = chart;
+      onChart === null || onChart === void 0 || onChart(chart);
+    }
+    chart.setOption(chartOption, true);
+    optionRef.current = chartOption;
+    window.addEventListener("resize", handleResize);
+    if (chartRef.current && !resizeObserverRef.current) {
+      resizeObserverRef.current = new ResizeObserver(handleResize);
+      resizeObserverRef.current.observe(chartRef.current);
+    }
+    chart.on("mouseover", handleMouseOver);
+    chart.on("globalout", handleGlobalOut);
+    if (onClick) {
+      chart.on("click", onClick);
+    }
+    return function () {
+      window.removeEventListener("resize", handleResize);
+      if (chart) {
+        chart.off("mouseover", handleMouseOver);
+        chart.off("globalout", handleGlobalOut);
+        if (onClick) {
+          chart.off("click", onClick);
+        }
+      }
+    };
+  }, [chartOption, handleResize, handleMouseOver, handleGlobalOut, onChart, onClick]);
+  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 ChartPie3D;

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

@@ -0,0 +1,32 @@
+import * as echarts from "echarts";
+import { ChartCommonProps, Series, SeriesDataType } from "..";
+import React from "react";
+import { ChartPie3DProps } from "./Pie3D";
+export interface ChartPieProps extends ChartCommonProps {
+    chartTitle?: string;
+    seriesData?: SeriesDataType;
+    onChart?: (chart: echarts.EChartsType) => void;
+    extendSeries?: Series[];
+    onClick?: (event: echarts.ECElementEvent) => void;
+    /** 是否启用图例自动滚动，默认 false */
+    enableLegendAutoScroll?: boolean;
+    /** 图例每页可见数量，默认 8 */
+    legendVisibleCount?: number;
+    /** 图例滚动间隔时间(ms)，默认 1500 */
+    legendScrollInterval?: number;
+    /** 是否半圆，默认 false */
+    isSemiCircle?: boolean;
+    /** 半圆贴边位置，默认 'bottom' */
+    position?: "top" | "bottom" | "left" | "right";
+    /** 显示角度，默认 180 */
+    spanAngle?: number;
+    /** 中心位置 */
+    center?: [string, string];
+    /** 半径配置 */
+    radius?: [string, string];
+}
+export interface ChartPieFC extends React.FC<ChartPieProps> {
+    Three: React.FC<ChartPie3DProps>;
+}
+declare const ChartPie: ChartPieFC;
+export default ChartPie;

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

@@ -0,0 +1,294 @@
+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", "chartTitle", "seriesData", "legend", "tooltip", "series", "title", "onChart", "extendSeries", "onClick", "enableLegendAutoScroll", "legendVisibleCount", "legendScrollInterval", "isSemiCircle", "position", "spanAngle", "center", "radius"];
+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 _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 _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 { autoScrollLegend } from "../chartUtils";
+import styles from "../index.module.less";
+import ChartPie3D from "./Pie3D";
+import { jsx as _jsx } from "react/jsx-runtime";
+var ChartPie = function ChartPie(props) {
+  var className = props.className,
+    style = props.style,
+    chartTitle = props.chartTitle,
+    seriesData = props.seriesData,
+    legend = props.legend,
+    tooltip = props.tooltip,
+    series = props.series,
+    title = props.title,
+    onChart = props.onChart,
+    _props$extendSeries = props.extendSeries,
+    extendSeries = _props$extendSeries === void 0 ? [] : _props$extendSeries,
+    onClick = props.onClick,
+    _props$enableLegendAu = props.enableLegendAutoScroll,
+    enableLegendAutoScroll = _props$enableLegendAu === void 0 ? false : _props$enableLegendAu,
+    _props$legendVisibleC = props.legendVisibleCount,
+    legendVisibleCount = _props$legendVisibleC === void 0 ? 8 : _props$legendVisibleC,
+    _props$legendScrollIn = props.legendScrollInterval,
+    legendScrollInterval = _props$legendScrollIn === void 0 ? 1500 : _props$legendScrollIn,
+    _props$isSemiCircle = props.isSemiCircle,
+    isSemiCircle = _props$isSemiCircle === void 0 ? false : _props$isSemiCircle,
+    _props$position = props.position,
+    position = _props$position === void 0 ? "bottom" : _props$position,
+    _props$spanAngle = props.spanAngle,
+    spanAngle = _props$spanAngle === void 0 ? 180 : _props$spanAngle,
+    center = props.center,
+    radius = props.radius,
+    coreOption = _objectWithoutProperties(props, _excluded);
+  var chartRef = useRef(null);
+  var chartInstanceRef = useRef(null);
+  var resizeObserverRef = useRef(null);
+  var legendScrollRef = useRef(null);
+
+  // 根据 position 计算默认 radius（如果未指定）
+  var calculatedRadius = useMemo(function () {
+    if (radius) {
+      return radius;
+    }
+
+    // 对于半圆，需要更大的 radius 值才能占满容器
+    // 因为半圆只占 180 度，所以外半径需要更大才能覆盖整个容器的高度或宽度
+    if (isSemiCircle) {
+      return ["0%", "200%"];
+    }
+    // 全圆
+    return ["45%", "70%"];
+  }, [radius, isSemiCircle]);
+
+  // 计算角度和中心位置
+  var _useMemo = useMemo(function () {
+      // 根据 position 计算默认 center（如果未指定）
+      var calculatedCenter = center || ["30%", "50%"];
+      var startAngle = 90;
+      var endAngle = 450; // 360 + 90，从顶部开始
+      var actualSpanAngle = isSemiCircle ? spanAngle : 360;
+      if (isSemiCircle) {
+        // 根据 position 计算角度和中心位置
+        switch (position) {
+          case "top":
+            // 上半圆
+            startAngle = 180;
+            endAngle = 0;
+            calculatedCenter = center || ["center", "0%"];
+            break;
+          case "bottom":
+            // 下半圆
+            startAngle = 0;
+            endAngle = 180;
+            calculatedCenter = center || ["center", "100%"];
+            break;
+          case "left":
+            // 左半圆
+            startAngle = 90;
+            endAngle = 270;
+            calculatedCenter = center || ["0%", "center"];
+            break;
+          case "right":
+            // 右半圆
+            startAngle = 270;
+            endAngle = 90;
+            calculatedCenter = center || ["100%", "center"];
+            break;
+        }
+      } else {
+        // 全圆
+        calculatedCenter = center || ["30%", "50%"];
+      }
+      return {
+        calculatedCenter: calculatedCenter,
+        startAngle: startAngle,
+        endAngle: endAngle,
+        actualSpanAngle: actualSpanAngle
+      };
+    }, [isSemiCircle, position, center, spanAngle]),
+    calculatedCenter = _useMemo.calculatedCenter,
+    startAngle = _useMemo.startAngle,
+    endAngle = _useMemo.endAngle,
+    actualSpanAngle = _useMemo.actualSpanAngle;
+
+  // 处理数据：如果是半圆，需要填充空白数据
+  var processedSeriesData = useMemo(function () {
+    if (!seriesData || !isSemiCircle) {
+      return seriesData;
+    }
+    var originDataLen = seriesData.length;
+    var repeatedMultiple = 360 / actualSpanAngle;
+    var addDataLen = parseInt(String((repeatedMultiple - 1) * originDataLen));
+
+    // 填充空白数据以形成半圆
+    var emptyData = Array.from({
+      length: addDataLen
+    }, function () {
+      return {
+        value: 0,
+        itemStyle: {
+          color: "rgba(0,0,0,0)"
+        },
+        tooltip: {
+          show: false
+        }
+      };
+    });
+    return [].concat(_toConsumableArray(seriesData), emptyData);
+  }, [seriesData, isSemiCircle, actualSpanAngle]);
+
+  // 使用 useMemo 缓存 chart 配置
+  var chartOption = useMemo(function () {
+    // 当启用自动滚动时，隐藏分页按钮并设置为滚动类型
+    var baseLegendConfig = _objectSpread({
+      orient: "vertical",
+      top: "middle",
+      right: "5%",
+      icon: "circle",
+      textStyle: {
+        color: "#7B7B7B",
+        fontSize: 14
+      }
+    }, legend);
+    var legendConfig = enableLegendAutoScroll ? _objectSpread(_objectSpread({}, baseLegendConfig), {}, {
+      // 设置为滚动类型
+      type: "scroll",
+      // 隐藏分页按钮的配置
+      pageIconSize: 0,
+      pageIconColor: "transparent",
+      pageIconInactiveColor: "transparent",
+      pageTextStyle: {
+        color: "transparent"
+      }
+    }) : baseLegendConfig;
+    var option = _objectSpread({
+      title: _objectSpread({
+        left: "center",
+        top: "center",
+        textAlign: "center",
+        text: chartTitle || ""
+      }, title),
+      legend: legendConfig,
+      tooltip: _objectSpread({
+        trigger: "item"
+      }, tooltip),
+      series: [_objectSpread({
+        data: processedSeriesData,
+        type: "pie",
+        center: calculatedCenter,
+        radius: calculatedRadius,
+        startAngle: startAngle,
+        endAngle: endAngle,
+        clockwise: false,
+        label: {
+          show: false
+        }
+      }, series)].concat(_toConsumableArray(extendSeries))
+    }, coreOption);
+    return option;
+  }, [chartTitle, title, legend, tooltip, processedSeriesData, series, extendSeries, coreOption, enableLegendAutoScroll, calculatedCenter, calculatedRadius, startAngle, endAngle]);
+
+  // 处理图表 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;
+      // 首次初始化时调用 onChart 回调
+      onChart === null || onChart === void 0 || onChart(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);
+    }
+
+    // 添加点击事件
+    if (onClick) {
+      var _chartInstanceRef$cur2;
+      (_chartInstanceRef$cur2 = chartInstanceRef.current) === null || _chartInstanceRef$cur2 === void 0 || _chartInstanceRef$cur2.on("click", onClick);
+    }
+
+    // 图例自动滚动
+    if (enableLegendAutoScroll && seriesData && seriesData.length > 0) {
+      // 清理之前的滚动实例
+      if (legendScrollRef.current) {
+        legendScrollRef.current.dispose();
+      }
+      legendScrollRef.current = autoScrollLegend({
+        chart: chart,
+        total: seriesData.length,
+        visibleCount: legendVisibleCount,
+        interval: legendScrollInterval,
+        autoStart: true
+      });
+    }
+
+    // 清理函数
+    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);
+      }
+
+      // 清理图例滚动
+      if (legendScrollRef.current) {
+        legendScrollRef.current.dispose();
+        legendScrollRef.current = null;
+      }
+    };
+  }, [chartOption, handleResize, onChart, onClick, enableLegendAutoScroll, seriesData, legendVisibleCount, legendScrollInterval]);
+
+  // 组件卸载时清理资源
+  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%"
+      }
+    })
+  });
+};
+ChartPie.Three = ChartPie3D;
+export default ChartPie;

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

@@ -0,0 +1,13 @@
+import * as echarts from "echarts";
+import { ChartCommonProps, SeriesData } from "..";
+import React from "react";
+export interface ChartPolarProps extends ChartCommonProps {
+    title1?: string;
+    title1Style?: echarts.TitleComponentOption["textStyle"];
+    title2?: string;
+    title2Style?: echarts.TitleComponentOption["textStyle"];
+    seriesData: SeriesData;
+    color?: string[] | string;
+}
+declare const Polar: React.FC<ChartPolarProps>;
+export default Polar;

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

@@ -0,0 +1,197 @@
+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", "polar", "radiusAxis", "angleAxis", "series", "title1", "title1Style", "title2", "title2Style", "textStyle", "seriesData", "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 Polar = function Polar(props) {
+  var className = props.className,
+    style = props.style,
+    polar = props.polar,
+    radiusAxis = props.radiusAxis,
+    angleAxis = props.angleAxis,
+    series = props.series,
+    title1 = props.title1,
+    title1Style = props.title1Style,
+    title2 = props.title2,
+    title2Style = props.title2Style,
+    textStyle = props.textStyle,
+    seriesData = props.seriesData,
+    _props$color = props.color,
+    color = _props$color === void 0 ? ["#00FFA3", "#00FFA3"] : _props$color,
+    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({
+      title: [{
+        left: "center",
+        top: "45%",
+        textVerticalAlign: "middle",
+        textStyle: _objectSpread(_objectSpread({
+          fontSize: 18,
+          color: "#333",
+          rich: {
+            a: {
+              fontSize: 30,
+              fontWeight: "bold",
+              color: "#fff"
+            },
+            b: {
+              fontSize: 18,
+              color: "#fff"
+            }
+          }
+        }, textStyle), title1Style),
+        text: title1 || ""
+      }, {
+        left: "center",
+        top: "90%",
+        textVerticalAlign: "middle",
+        textStyle: _objectSpread(_objectSpread({
+          rich: {
+            a: {
+              fontSize: 18,
+              color: "rgba(255,255,255,0.7)",
+              padding: [20, 0, 0, 0]
+            }
+          }
+        }, textStyle), title2Style),
+        text: title2 || ""
+      }],
+      tooltip: {
+        show: false
+      },
+      polar: _objectSpread({
+        radius: ["60%", "80%"],
+        center: ["50%", "45%"]
+      }, polar),
+      radiusAxis: _objectSpread({
+        type: "category",
+        show: false,
+        inverse: true,
+        axisLabel: {
+          show: false
+        },
+        axisLine: {
+          show: false
+        },
+        axisTick: {
+          show: false
+        }
+      }, radiusAxis),
+      angleAxis: _objectSpread({
+        max: 100,
+        show: false,
+        axisPointer: {
+          show: false,
+          label: {
+            show: false
+          },
+          lineStyle: {
+            opacity: 0
+          }
+        }
+      }, angleAxis),
+      series: _objectSpread({
+        type: "bar",
+        name: seriesData.name,
+        data: [seriesData.value],
+        coordinateSystem: "polar",
+        showBackground: true,
+        roundCap: true,
+        itemStyle: {
+          color: {
+            type: "linear",
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [{
+              offset: 0,
+              color: Array.isArray(color) ? color[0] : color
+            }, {
+              offset: 1,
+              color: Array.isArray(color) ? color[1] : color
+            }],
+            global: false
+          }
+        }
+      }, series)
+    }, coreOption);
+    return option;
+  }, [textStyle, title1Style, title1, title2Style, title2, polar, radiusAxis, angleAxis, seriesData, color, series, 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);
+
+    // 添加 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 Polar;