@hsu-react/ui 0.0.1

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

@@ -0,0 +1,192 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var echarts = _interopRequireWildcard(require("echarts"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const colors = ["rgba(29, 230, 235,1)", "rgba(7, 235, 251,1)"];
+
+// buildPath 内 ctx 的可链式调用类型（等价于 zrender 的 PathProxy）
+
+// 绘制正面
+const CubeFront = echarts.graphic.extendShape({
+  shape: {
+    x: 0,
+    y: 0
+  },
+  buildPath(ctx, shape) {
+    const {
+      xAxisPoint,
+      xAxisTranslation = 0,
+      barWidth = 20
+    } = shape;
+
+    // 右上点
+    const c0 = [shape.x + 0 + xAxisTranslation, shape.y];
+    // 左上点
+    const c1 = [shape.x - barWidth + xAxisTranslation, shape.y];
+    // 左下点
+    const c2 = [xAxisPoint[0] - barWidth + xAxisTranslation, xAxisPoint[1]];
+    // 右下点
+    const c3 = [xAxisPoint[0] + 0 + xAxisTranslation, xAxisPoint[1]];
+    ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath();
+  }
+});
+// 绘制右侧面
+const CubeRight = echarts.graphic.extendShape({
+  shape: {
+    x: 0,
+    y: 0
+  },
+  buildPath(ctx, shape) {
+    const {
+      xAxisPoint,
+      xAxisTranslation = 0,
+      barWidth = 20
+    } = shape;
+    // 根据 barWidth 计算深度偏移，保持原有比例
+    const depthOffset = barWidth * 8 / 20;
+
+    // 左上点
+    const c1 = [shape.x + 0 + xAxisTranslation, shape.y];
+    // 左下点
+    const c2 = [xAxisPoint[0] + 0 + xAxisTranslation, xAxisPoint[1]];
+    // 右下点
+    const c3 = [xAxisPoint[0] + depthOffset + xAxisTranslation, xAxisPoint[1] - 5];
+    // 右上点
+    const c4 = [shape.x + depthOffset + xAxisTranslation, shape.y - 5];
+    ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();
+  }
+});
+// 绘制顶面
+const CubeTop = echarts.graphic.extendShape({
+  shape: {
+    x: 0,
+    y: 0
+  },
+  buildPath(ctx, shape) {
+    const {
+      xAxisTranslation = 0,
+      barWidth = 20
+    } = shape;
+    // 根据 barWidth 计算偏移量，保持原有比例
+    const rightOffset = barWidth * 8 / 20; // 右侧偏移
+    const leftOffset = barWidth * 12 / 20; // 左侧偏移
+
+    // 右上点
+    const c1 = [shape.x + 0 + xAxisTranslation, shape.y];
+    // 右上点
+    const c2 = [shape.x + rightOffset + xAxisTranslation, shape.y - 5];
+    // 左上点
+    const c3 = [shape.x - leftOffset + xAxisTranslation, shape.y - 5];
+    // 左下点
+    const c4 = [shape.x - barWidth + xAxisTranslation, shape.y];
+    ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();
+  }
+});
+// 注册三个面图形
+echarts.graphic.registerShape("CubeFront", CubeFront);
+echarts.graphic.registerShape("CubeRight", CubeRight);
+echarts.graphic.registerShape("CubeTop", CubeTop);
+
+/**
+ * 3D柱状图series生成
+ * @param _colors 颜色
+ * @param barGap 柱间距，必须大于等于柱宽
+ * @param barWidth 柱宽
+ * @returns
+ */
+const bar3DSeries = (_colors, barGap = 25, barWidth = 20) => {
+  const series = {
+    type: "custom",
+    renderItem: (params, api) => {
+      const {
+        seriesIndex = 0
+      } = params;
+      const cubeLeftStyle = _colors ?? new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+        offset: 0,
+        color: colors[0]
+      }, {
+        offset: 1,
+        color: "rgba(7, 20, 52,0.7)"
+      }]);
+      const cubeRightStyle = _colors ?? new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+        offset: 0,
+        color: "rgba(7, 20, 52,1)"
+      }, {
+        offset: 1,
+        color: colors[0]
+      }]);
+      const cubeTopStyle = _colors ?? new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+        offset: 0,
+        color: "rgba(7, 20, 52,1)"
+      }, {
+        offset: 1,
+        color: colors[0]
+      }]);
+      const [value0, value1] = [api.value(0), api.value(1)];
+      const location = api.coord([value0, value1]);
+      const xAxisTranslation = seriesIndex * barGap;
+      if (value1 === 0) {
+        return {
+          type: "group",
+          children: []
+        };
+      }
+      return {
+        type: "group",
+        children: [{
+          type: "CubeFront",
+          shape: {
+            api,
+            xValue: value0,
+            yValue: value1,
+            x: location[0],
+            y: location[1],
+            xAxisPoint: api.coord([value0, 0]),
+            xAxisTranslation,
+            barWidth
+          },
+          style: {
+            fill: cubeLeftStyle
+          }
+        }, {
+          type: "CubeRight",
+          shape: {
+            api,
+            xValue: value0,
+            yValue: value1,
+            x: location[0],
+            y: location[1],
+            xAxisPoint: api.coord([value0, 0]),
+            xAxisTranslation,
+            barWidth
+          },
+          style: {
+            fill: cubeRightStyle
+          }
+        }, {
+          type: "CubeTop",
+          shape: {
+            api,
+            xValue: value0,
+            yValue: value1,
+            x: location[0],
+            y: location[1],
+            xAxisPoint: api.coord([value0, 0]),
+            xAxisTranslation,
+            barWidth
+          },
+          style: {
+            fill: cubeTopStyle
+          }
+        }]
+      };
+    }
+  };
+  return series;
+};
+var _default = exports.default = bar3DSeries;

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

@@ -0,0 +1,20 @@
+import * as echarts from "echarts";
+import { ChartCommonProps, SeriesDataType } from "..";
+import React from "react";
+import { ChartScrollConfig } from "../_utils/cartesian";
+export interface ChartBarProps extends ChartCommonProps {
+    chartTitle?: string;
+    xAxisData?: Array<string>;
+    seriesData?: SeriesDataType;
+    legendData?: string[];
+    scrollConfig?: ChartScrollConfig;
+    onClick?: (event: echarts.ECElementEvent) => void;
+    /** 是否启用图例自动滚动，默认 false */
+    enableLegendAutoScroll?: boolean;
+    /** 图例每页可见数量，默认 8 */
+    legendVisibleCount?: number;
+    /** 图例滚动间隔时间(ms)，默认 1500 */
+    legendScrollInterval?: number;
+}
+declare const ChartBar: React.FC<ChartBarProps>;
+export default ChartBar;

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

@@ -0,0 +1,295 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var echarts = _interopRequireWildcard(require("echarts"));
+var _react = _interopRequireWildcard(require("react"));
+var _indexModule = _interopRequireDefault(require("../index.module.less"));
+var _autoScrollLegend = require("../_utils/autoScrollLegend");
+var _autoSmooth = require("../_utils/autoSmooth");
+var _cartesian = require("../_utils/cartesian");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const ChartBar = props => {
+  const {
+    className,
+    style,
+    chartTitle,
+    xAxisData,
+    seriesData,
+    legendData,
+    legend,
+    grid,
+    tooltip,
+    xAxis,
+    yAxis,
+    series,
+    title,
+    scrollConfig,
+    dataZoom,
+    insideDataZoom,
+    sliderDataZoom,
+    onClick,
+    enableLegendAutoScroll = false,
+    legendVisibleCount = 8,
+    legendScrollInterval = 1500,
+    ...coreOption
+  } = props;
+  const chartRef = (0, _react.useRef)(null);
+  const chartInstanceRef = (0, _react.useRef)(null);
+  const resizeObserverRef = (0, _react.useRef)(null);
+  const legendScrollRef = (0, _react.useRef)(null);
+  const normalizedScroll = (0, _react.useMemo)(() => (0, _cartesian.resolveScrollConfig)(scrollConfig), [scrollConfig]);
+
+  // 使用 useMemo 缓存 chart 配置
+  const chartOption = (0, _react.useMemo)(() => {
+    const def_xAxis = (0, _cartesian.createDefaultCategoryXAxis)(xAxisData);
+    const def_yAxis = (0, _cartesian.createDefaultValueYAxis)("bar");
+
+    // 处理 xAxis 配置
+    const processedXAxis = Array.isArray(xAxis) ? xAxis?.map(item => ({
+      ...def_xAxis,
+      data: item?.type === "value" ? undefined : xAxisData,
+      ...item
+    })) : {
+      ...def_xAxis,
+      data: xAxis?.type === "value" ? undefined : xAxisData,
+      ...xAxis
+    };
+
+    // 处理 yAxis 配置
+    const processedYAxis = Array.isArray(yAxis) ? yAxis?.map(item => ({
+      ...def_yAxis,
+      data: item?.type === "category" ? xAxisData : undefined,
+      ...item
+    })) : {
+      ...def_yAxis,
+      data: yAxis?.type === "category" ? xAxisData : undefined,
+      ...yAxis
+    };
+
+    // 计算 grid 配置
+    let gridTop = "5%";
+    if (yAxis?.name) {
+      gridTop = "15%";
+    }
+    const gridConfig = {
+      top: gridTop,
+      left: "5%",
+      right: "5%",
+      bottom: "5%",
+      containLabel: true,
+      ...grid
+    };
+    if (chartTitle) {
+      delete gridConfig.top;
+    }
+
+    // 处理 dataZoom 配置
+    const totalLen = xAxisData?.length ?? 1;
+    const {
+      zoomEnabled,
+      autoScroll,
+      windowSize,
+      startIndex: resolvedStartIndex,
+      sliderVisible: sliderVisibleInConfig
+    } = normalizedScroll;
+    const windowSizePercent = Number((windowSize / totalLen * 100).toFixed(0));
+    const zoomStartIndex = resolvedStartIndex;
+    const clampedStart = Math.max(0, Math.min(zoomStartIndex, Math.max(0, totalLen - 1)));
+    const zoomStartPercent = totalLen > 0 ? clampedStart / totalLen * 100 : 0;
+    const zoomEndPercent = Math.min(zoomStartPercent + windowSizePercent, 100);
+    const sliderFromDataZoom = Array.isArray(dataZoom) ? dataZoom.find(item => item.type === "slider") : dataZoom || {};
+    const insideFromDataZoom = Array.isArray(dataZoom) ? dataZoom.find(item => item.type === "inside") : dataZoom || {};
+    const requestedSliderVisible = sliderVisibleInConfig ?? (0, _cartesian.getSliderShow)(sliderDataZoom) ?? (0, _cartesian.getSliderShow)(sliderFromDataZoom) ?? false;
+    const finalSliderVisible = autoScroll ? false : requestedSliderVisible;
+    const enableCustomWheelScroll = normalizedScroll.wheelModeWhenSliderHidden === "scroll" && (autoScroll || !finalSliderVisible);
+    const processedDataZoom = zoomEnabled ? [{
+      type: "inside",
+      ...(insideFromDataZoom || {}),
+      ...(insideDataZoom || {}),
+      start: zoomStartPercent,
+      end: zoomEndPercent,
+      ...(autoScroll ? {
+        zoomLock: true
+      } : {}),
+      ...(enableCustomWheelScroll ? {
+        zoomOnMouseWheel: false,
+        moveOnMouseWheel: false
+      } : {})
+    }, {
+      type: "slider",
+      ...(sliderFromDataZoom || {}),
+      ...(sliderDataZoom || {}),
+      start: zoomStartPercent,
+      end: zoomEndPercent,
+      show: finalSliderVisible
+    }] : undefined;
+    const option = {
+      title: {
+        text: chartTitle,
+        textStyle: {
+          fontSize: 18,
+          color: "#333"
+        },
+        ...title
+      },
+      grid: gridConfig,
+      tooltip: {
+        trigger: "axis",
+        axisPointer: {
+          type: "shadow"
+        },
+        ...tooltip
+      },
+      legend: (() => {
+        const baseLegend = {
+          top: "5%",
+          data: legendData,
+          icon: "circle",
+          textStyle: {
+            color: "#373D48",
+            fontSize: 16
+          },
+          itemWidth: 8,
+          itemHeight: 8,
+          ...legend
+        };
+        if (enableLegendAutoScroll) {
+          return {
+            ...baseLegend,
+            type: "scroll",
+            pageIconSize: 0,
+            pageIconColor: "transparent",
+            pageIconInactiveColor: "transparent",
+            pageTextStyle: {
+              color: "transparent"
+            }
+          };
+        }
+        return baseLegend;
+      })(),
+      xAxis: processedXAxis,
+      yAxis: processedYAxis,
+      dataZoom: processedDataZoom,
+      series: (0, _cartesian.buildCartesianSeriesOptions)("bar", seriesData, series),
+      ...coreOption
+    };
+    return option;
+  }, [xAxisData, xAxis, yAxis, grid, chartTitle, dataZoom, normalizedScroll, insideDataZoom, sliderDataZoom, title, tooltip, legendData, legend, seriesData, series, enableLegendAutoScroll, coreOption]);
+
+  // 处理图表 resize 的回调
+  const handleResize = (0, _react.useCallback)(() => {
+    chartInstanceRef.current?.resize();
+  }, []);
+
+  // 初始化图表
+  (0, _react.useEffect)(() => {
+    if (!chartRef.current) return;
+
+    // 初始化或获取已存在的实例
+    let 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);
+    }
+
+    // 添加点击事件
+    if (onClick) {
+      chartInstanceRef.current?.on("click", onClick);
+    }
+
+    // 图例自动滚动（参考 Pie 组件）
+    const opt = chartOption;
+    const legendDataLen = Array.isArray(opt.legend) ? opt.legend[0]?.data?.length : opt.legend?.data?.length;
+    const seriesLen = Array.isArray(opt.series) ? opt.series.length : opt.series ? 1 : 0;
+    const legendTotal = legendDataLen ?? seriesLen ?? 0;
+    if (enableLegendAutoScroll && chartInstanceRef.current && legendTotal > 0) {
+      if (legendScrollRef.current) {
+        legendScrollRef.current.dispose();
+      }
+      legendScrollRef.current = (0, _autoScrollLegend.autoScrollLegend)({
+        chart: chartInstanceRef.current,
+        total: legendTotal,
+        visibleCount: legendVisibleCount,
+        interval: legendScrollInterval,
+        autoStart: true
+      });
+    }
+
+    // 清理函数
+    return () => {
+      window.removeEventListener("resize", handleResize);
+      if (onClick) {
+        chartInstanceRef.current?.off("click", onClick);
+      }
+      if (legendScrollRef.current) {
+        legendScrollRef.current.dispose();
+        legendScrollRef.current = null;
+      }
+    };
+  }, [chartOption, handleResize, onClick, enableLegendAutoScroll, legendVisibleCount, legendScrollInterval]);
+
+  // 处理自动播放
+  (0, _react.useEffect)(() => {
+    if (!normalizedScroll.zoomEnabled || !chartInstanceRef.current || !xAxisData?.length) return;
+    const sliderVisible = normalizedScroll.sliderVisible ?? (0, _cartesian.getSliderShow)(sliderDataZoom) ?? (Array.isArray(dataZoom) ? (0, _cartesian.getSliderShow)(dataZoom.find(item => item.type === "slider")) : (0, _cartesian.getSliderShow)(dataZoom)) ?? false;
+    const enableWheelScroll = normalizedScroll.wheelModeWhenSliderHidden === "scroll" && (normalizedScroll.autoScroll || !sliderVisible);
+    const {
+      dispose
+    } = (0, _autoSmooth.autoScrollByItem)({
+      chart: chartInstanceRef.current,
+      xAxisData,
+      windowSize: normalizedScroll.windowSize,
+      interval: normalizedScroll.interval,
+      startIndex: normalizedScroll.startIndex,
+      autoPlay: normalizedScroll.autoScroll,
+      enableWheelScroll
+    });
+    return dispose;
+  }, [dataZoom, normalizedScroll, sliderDataZoom, xAxisData]);
+
+  // 组件卸载时清理资源
+  (0, _react.useEffect)(() => {
+    return () => {
+      // 清理 ResizeObserver
+      if (resizeObserverRef.current) {
+        resizeObserverRef.current.disconnect();
+        resizeObserverRef.current = null;
+      }
+      // 销毁图表实例
+      if (chartInstanceRef.current) {
+        chartInstanceRef.current.dispose();
+        chartInstanceRef.current = null;
+      }
+    };
+  }, []);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: `${_indexModule.default["chart-container"]} ${className ?? ""}`,
+    style: style,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      ref: chartRef,
+      style: {
+        width: "100%",
+        height: "100%"
+      }
+    })
+  });
+};
+var _default = exports.default = ChartBar;

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

@@ -0,0 +1,24 @@
+import React from "react";
+import { ChartCommonProps } from "..";
+import * as echarts from "echarts";
+export interface BubbleDataItem {
+    name: string;
+    value: number;
+    [key: string]: unknown;
+}
+export interface ChartBubbleProps extends ChartCommonProps {
+    /** 气泡图数据 */
+    data: BubbleDataItem[];
+    /** 自定义颜色列表 */
+    colorList?: echarts.Color[];
+    /** 图表标题 */
+    chartTitle?: string;
+    /** 气泡标签字体大小 */
+    fontSize?: number;
+    /** 图表实例回调 */
+    onChart?: (chart: echarts.EChartsType) => void;
+    /** 点击事件 */
+    onClick?: (event: echarts.ECElementEvent) => void;
+}
+declare const Bubble: React.FC<ChartBubbleProps>;
+export default Bubble;