@gadmin2n/schematics 0.0.70 → 0.0.71

package/src/lib/application/files/gadmin2-game-angle-demo/web/src/components/canvas/BarChart/index.tsx

@@ -0,0 +1,896 @@
+import React, { useMemo, useEffect } from 'react';
+import { Spin, Empty } from 'antd';
+import type * as echarts from 'echarts';
+import { useECharts } from '@/hooks/useECharts';
+import {
+  LEGEND_BASE,
+  GRID_VERTICAL,
+  GRID_HORIZONTAL,
+} from '../chart-constants';
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+/**
+ * bar 单系列数据（direction=vertical 时 name=X轴标签，direction=horizontal 时 name=Y轴标签）
+ * value = 数值
+ */
+export type BarDataSingle = {
+  name: string;
+  value: number | null;
+  /** 额外描述，显示在 tooltip 或 label 括号内 */
+  extraTxt?: string;
+  [key: string]: any;
+}[];
+
+/**
+ * stackBar 多系列数据
+ * xData = 分类轴标签数组（纵向时为X轴，横向时为Y轴）
+ * series[].data 与 xData 等长
+ */
+export interface BarDataMulti {
+  xData: string[];
+  series: {
+    name: string;
+    data: (number | null)[];
+    /** 可附加 stack、color、itemStyle 等原生 ECharts 字段 */
+    [key: string]: any;
+  }[];
+}
+
+/**
+ * stackBarPercent 百分比堆叠柱状图数据
+ * series[].data 为百分比值（0–100）；originalData 存原始计数，用于 tooltip/label 展示
+ * xData 格式为 "YYYYMMDD"，展示时自动转 "MM/DD"
+ */
+export interface BarDataPercent {
+  xData: string[];
+  series: { name: string; data: number[] }[];
+  allTypes: string[];
+  originalData: Record<
+    string,
+    Array<{ key: string; active_device_cnt: number; [key: string]: any }>
+  >;
+}
+
+export type BarChartVariant =
+  | 'bar' // 单系列柱状图
+  | 'stackBar' // 多系列堆叠柱状图
+  | 'stackBarPercent'; // 百分比堆叠柱状图（Y 轴 0–100%，label 在 bar 内显示原始计数）
+
+export type BarChartDirection = 'vertical' | 'horizontal';
+
+export type BarChartData = BarDataSingle | BarDataMulti | BarDataPercent;
+
+export interface BarChartProps {
+  // ── 核心 ──────────────────────────────────────────────────────────────────
+  /** 图表数据。bar 用 BarDataSingle；stackBar 用 BarDataMulti；stackBarPercent 用 BarDataPercent */
+  data: BarChartData;
+  /** 视觉变体 */
+  variant?: BarChartVariant;
+  /** 方向：纵向（默认）或横向 */
+  direction?: BarChartDirection;
+  /** Y 轴（纵向）或 X 轴（横向）单位，显示在 tooltip 和 label */
+  unit?: string;
+
+  // ── 布局 ──────────────────────────────────────────────────────────────────
+  /**
+   * 图表标题，渲染在图表上方。
+   * - 字符串：套默认样式（居中、12px、bold、#515151）
+   * - ReactNode：直接渲染，样式由调用方控制
+   * height 只指图表区域高度，标题额外占空间。
+   */
+  title?: React.ReactNode;
+  /** 图表容器高度，默认 300 */
+  height?: number | string;
+
+  // ── 显示控制 ──────────────────────────────────────────────────────────────
+  /**
+   * 是否在 bar 顶部（或横向时右侧）显示 label。
+   * - bar：默认 true（显示数值 + unit）
+   * - stackBar：默认 true（仅最后一段显示总量）
+   */
+  showLabel?: boolean;
+  /** 是否显示网格线，默认 true */
+  showGrid?: boolean;
+  /** 是否显示图例（多系列默认 true，单系列默认 false） */
+  legendShow?: boolean;
+
+  // ── 配置覆盖 ──────────────────────────────────────────────────────────────
+  /**
+   * 透传至 ECharts option 的配置（yAxis、xAxis、grid 等），与基准配置浅合并。
+   * 支持：yAxis、xAxis、grid、seriesProps（透传到每条 series）、reverseTooltip（tooltip 反向排序）
+   */
+  chartProps?: Record<string, any>;
+  /** 完全自定义 option，与组件生成的 option 浅合并（优先级最高） */
+  option?: echarts.EChartsCoreOption;
+
+  // ── 交互 ──────────────────────────────────────────────────────────────────
+  /**
+   * 图表实例就绪回调，回传 ECharts 实例（销毁时传 null）。
+   * 用于 chart linking（如 BarChart ↔ PieChart 联动）。
+   */
+  onChartReady?: (instance: echarts.ECharts | null) => void;
+
+  // ── 状态 ──────────────────────────────────────────────────────────────────
+  /** 显示 Spin 加载态 */
+  loading?: boolean;
+  /** 强制显示空态。未传时根据数据是否为空自动判断 */
+  empty?: boolean;
+
+  // ── 样式 / 测试 ──────────────────────────────────────────────────────────
+  style?: React.CSSProperties;
+  className?: string;
+  /** data-testid，必须填写 */
+  testId: string;
+}
+
+// ─── 共享常量 ─────────────────────────────────────────────────────────────────
+
+// LEGEND_BASE, GRID_VERTICAL, GRID_HORIZONTAL 来自 ../chart-constants
+
+// ─── 工具函数 ─────────────────────────────────────────────────────────────────
+
+function isMulti(data: BarChartData): data is BarDataMulti {
+  return !Array.isArray(data) && 'xData' in data && !('allTypes' in data);
+}
+
+function isPercent(data: BarChartData): data is BarDataPercent {
+  return !Array.isArray(data) && 'allTypes' in data;
+}
+
+function isEmpty(data: BarChartData): boolean {
+  if (Array.isArray(data)) return data.length === 0;
+  return (data as BarDataMulti).xData?.length === 0;
+}
+
+// 构建 dateMap：每个 x 轴点上各系列值（用于计算堆叠总量）
+function buildDateMap(data: BarDataMulti): Record<string, (number | null)[]> {
+  const { xData, series } = data;
+  const map: Record<string, (number | null)[]> = {};
+  for (let xIdx = 0; xIdx < xData.length; xIdx++) {
+    const key = xData[xIdx];
+    for (let sIdx = 0; sIdx < series.length; sIdx++) {
+      const val = series[sIdx].data[xIdx];
+      map[key] ? map[key].push(val) : (map[key] = [val]);
+    }
+  }
+  return map;
+}
+
+// ─── Variant 配置构建 ─────────────────────────────────────────────────────────
+
+function buildBarOption(
+  data: BarDataSingle,
+  unit: string,
+  showLabel: boolean,
+  chartProps: Record<string, any>,
+): echarts.EChartsCoreOption {
+  const {
+    yAxis = {},
+    xAxis = {},
+    grid = {},
+    seriesName = '',
+    seriesProps = {},
+  } = chartProps;
+  return {
+    legend: { ...LEGEND_BASE, data: [seriesName], show: false },
+    tooltip: {
+      trigger: 'item' as const,
+      formatter: (ctx: any) => {
+        const { marker, value, name } = ctx || {};
+        const extraTxt =
+          data.find((item) => item?.name === name)?.extraTxt || '';
+        return `${marker}${name}: ${value ?? 0} ${unit}${extraTxt ? `\n(${extraTxt})` : ''}`;
+      },
+    },
+    xAxis: {
+      type: 'category' as const,
+      axisTick: { show: false },
+      data: data.map((item) => item?.name),
+      axisLabel: {
+        fontSize: 10,
+        interval: 0,
+        hideOverlap: true,
+        margin: 15,
+        ...xAxis?.axisLabel,
+      },
+      ...xAxis,
+    },
+    yAxis: {
+      type: 'value' as const,
+      axisLabel: {
+        fontSize: 10,
+        formatter: (v: number) => `${v}${unit}`,
+        ...yAxis?.axisLabel,
+      },
+      ...yAxis,
+    },
+    grid: { ...GRID_VERTICAL, ...grid },
+    series: [
+      {
+        name: seriesName,
+        type: 'bar' as const,
+        barMaxWidth: 50,
+        data: data.map((item) => item?.value),
+        label: showLabel
+          ? {
+              show: true,
+              position: 'top' as const,
+              fontSize: 10,
+              formatter: (ctx: any) => {
+                const { dataIndex, value, name } = ctx;
+                const extraTxt =
+                  data.find((item) => item?.name === name)?.extraTxt || '';
+                if (
+                  (data.length > 8 && dataIndex % 3 !== 0) ||
+                  (data.length > 6 && data.length < 8 && dataIndex % 2 !== 0)
+                ) {
+                  return '';
+                }
+                return `${value ?? ''}${value !== null ? unit : ''}${extraTxt ? `\n(${extraTxt})` : ''}`;
+              },
+            }
+          : { show: false },
+        ...seriesProps,
+      },
+    ],
+  };
+}
+
+function buildHorizontalBarOption(
+  data: BarDataSingle,
+  unit: string,
+  showLabel: boolean,
+  chartProps: Record<string, any>,
+): echarts.EChartsCoreOption {
+  const {
+    yAxis = {},
+    xAxis = {},
+    grid = {},
+    seriesName = '',
+    seriesProps = {},
+  } = chartProps;
+  return {
+    legend: { ...LEGEND_BASE, data: [seriesName], show: false },
+    tooltip: {
+      trigger: 'item' as const,
+      formatter: (ctx: any) => {
+        const { marker, value, name } = ctx || {};
+        const extraTxt =
+          data.find((item) => item?.name === name)?.extraTxt || '';
+        return `${marker}${name}: ${(value ?? 0)?.toLocaleString()} ${unit}${extraTxt ? `\n(${extraTxt})` : ''}`;
+      },
+    },
+    yAxis: {
+      type: 'category' as const,
+      axisTick: { show: false },
+      axisLabel: {
+        fontSize: 10,
+        width: 120,
+        overflow: 'truncate' as const,
+        ellipsis: '...',
+        ...yAxis?.axisLabel,
+      },
+      data: data.map((item) => item?.name),
+      ...yAxis,
+    },
+    xAxis: {
+      type: 'value' as const,
+      axisTick: { show: false },
+      axisLabel: {
+        fontSize: 10,
+        formatter: (v: number) => `${v?.toLocaleString()}${unit}`,
+        ...xAxis?.axisLabel,
+      },
+      ...xAxis,
+    },
+    grid: { ...GRID_HORIZONTAL, ...grid },
+    series: [
+      {
+        name: seriesName,
+        type: 'bar' as const,
+        barMaxWidth: 30,
+        data: data.map((item) => ({ ...item })),
+        label: showLabel
+          ? {
+              show: true,
+              position: 'right' as const,
+              fontSize: 10,
+              color: '#666',
+              formatter: (ctx: any) => {
+                const { value, name } = ctx;
+                const extraTxt =
+                  data.find((item) => item?.name === name)?.extraTxt || '';
+                return `${(value ?? 0)?.toLocaleString()}${value !== null ? ` ${unit}` : ''}${extraTxt ? `\n(${extraTxt})` : ''}`;
+              },
+            }
+          : { show: false },
+        ...seriesProps,
+      },
+    ],
+  };
+}
+
+function buildStackBarOption(
+  data: BarDataMulti,
+  unit: string,
+  showLabel: boolean,
+  chartProps: Record<string, any>,
+): echarts.EChartsCoreOption {
+  const {
+    yAxis = {},
+    xAxis = {},
+    grid = {},
+    reverseTooltip = false,
+    seriesProps = {},
+  } = chartProps;
+  const { series = [], xData = [] } = data;
+  const dateMap = buildDateMap(data);
+
+  return {
+    tooltip: {
+      trigger: 'axis' as const,
+      formatter: (arr: any) => {
+        const xName = arr[0]?.name;
+        const sortArr = reverseTooltip ? [...arr].reverse() : arr;
+        const str = sortArr
+          .map((item: any) => {
+            const fData = item?.data ?? item?.value;
+            return fData !== null && fData !== undefined && fData !== 0
+              ? `<div>${item?.marker} ${item?.seriesName}: ${fData?.toLocaleString()}${unit}</div>`
+              : '';
+          })
+          .join('');
+        return `<div>${xName}</div>${str}`;
+      },
+    },
+    legend: {
+      ...LEGEND_BASE,
+      data: series.map((item: any) => item?.name),
+    },
+    grid: { ...GRID_VERTICAL, ...grid },
+    xAxis: {
+      type: 'category' as const,
+      boundaryGap: true,
+      data: xData,
+      axisTick: { show: false },
+      axisLine: { show: false },
+      axisLabel: {
+        fontSize: 10,
+        interval: 0,
+        hideOverlap: true,
+        margin: 15,
+        ...xAxis?.axisLabel,
+      },
+      ...xAxis,
+    },
+    yAxis: {
+      type: 'value' as const,
+      axisLabel: {
+        fontSize: 10,
+        formatter: (v: number) => `${v?.toLocaleString()}${unit}`,
+        ...yAxis?.axisLabel,
+      },
+      axisTick: { show: false },
+      axisLine: { show: false },
+      splitNumber: 3,
+      ...yAxis,
+    },
+    series: series.map((item: any, sIdx: number) => {
+      return {
+        name: item?.name,
+        type: 'bar' as const,
+        barMaxWidth: 50,
+        stack: item?.stack || 'stackKey',
+        data: item?.data,
+        label: showLabel
+          ? {
+              show: true,
+              position: 'top' as const,
+              fontSize: 10,
+              formatter: (params: any) => {
+                const { dataIndex, name } = params;
+                const validLen =
+                  dateMap[name]?.filter((v: any) => v !== null)?.length ?? 0;
+                // 只在最后一段显示总量
+                if (sIdx !== validLen - 1) return '';
+                const total = series.reduce(
+                  (sum: number, s: any) =>
+                    sum + (Number(s.data[dataIndex]) || 0),
+                  0,
+                );
+                return total ? `${total?.toLocaleString()}${unit}` : '';
+              },
+            }
+          : { show: false },
+        ...seriesProps,
+        ...item,
+        // item 字段不覆盖 label（让我们的 label 生效，除非 item 明确传了 label）
+        ...(item?.label ? { label: item.label } : showLabel ? {} : {}),
+      };
+    }),
+  };
+}
+
+function buildInversionStackBarOption(
+  data: BarDataMulti,
+  unit: string,
+  showLabel: boolean,
+  chartProps: Record<string, any>,
+): echarts.EChartsCoreOption {
+  const {
+    yAxis = {},
+    xAxis = {},
+    grid = {},
+    seriesProps = {},
+    reverseTooltip = false,
+  } = chartProps;
+  const { series = [], xData = [] } = data;
+  const dateMap = buildDateMap(data);
+
+  return {
+    tooltip: {
+      trigger: 'axis' as const,
+      formatter: (arr: any) => {
+        const xName = arr[0]?.name;
+        const sortArr = reverseTooltip ? [...arr].reverse() : arr;
+        const str = sortArr
+          .map((item: any) => {
+            const val = item?.data ?? item?.value;
+            return val !== null && val !== undefined
+              ? `<div>${item?.marker} ${item?.seriesName}: ${val?.toLocaleString()}${unit}</div>`
+              : '';
+          })
+          .join('');
+        return `<div>${xName}</div>${str}`;
+      },
+    },
+    legend: {
+      ...LEGEND_BASE,
+      data: series.map((item: any) => item?.name),
+    },
+    grid: { ...GRID_HORIZONTAL, ...grid },
+    yAxis: {
+      type: 'category' as const,
+      axisTick: { show: false },
+      axisLabel: {
+        fontSize: 10,
+        interval: 0,
+        width: 160,
+        overflow: 'truncate' as const,
+        ellipsis: '...',
+        ...yAxis?.axisLabel,
+      },
+      data: xData,
+      ...yAxis,
+    },
+    xAxis: {
+      type: 'value' as const,
+      minInterval: 1,
+      axisLabel: {
+        fontSize: 10,
+        formatter: (v: number) => `${v}${unit}`,
+        ...xAxis?.axisLabel,
+      },
+      axisLine: { show: false },
+      splitLine: { show: false },
+      ...xAxis,
+    },
+    series: series.map((item: any, sIdx: number) => {
+      return {
+        name: item?.name,
+        type: 'bar' as const,
+        barMaxWidth: 50,
+        stack: item?.stack || 'stackKey',
+        data: item?.data,
+        label: showLabel
+          ? {
+              show: true,
+              position: 'right' as const,
+              fontSize: 12,
+              color: '#333',
+              formatter: (params: any) => {
+                const { dataIndex, name } = params;
+                const validLen =
+                  dateMap[name]?.filter((v: any) => v !== null)?.length ?? 0;
+                if (sIdx !== validLen - 1) return '';
+                const total = series.reduce(
+                  (sum: number, s: any) =>
+                    sum + (Number(s.data[dataIndex]) || 0),
+                  0,
+                );
+                return total ? `${total}${unit}` : '';
+              },
+            }
+          : { show: false },
+        ...seriesProps,
+        ...item,
+        ...(item?.label ? { label: item.label } : showLabel ? {} : {}),
+      };
+    }),
+  };
+}
+
+function buildStackBarPercentOption(
+  data: BarDataPercent,
+  unit: string,
+  chartProps: Record<string, any>,
+): echarts.EChartsCoreOption {
+  const { grid = {} } = chartProps;
+  const { xData = [], series = [], allTypes = [], originalData = {} } = data;
+
+  return {
+    tooltip: {
+      trigger: 'axis' as const,
+      formatter: (arr: any) => {
+        const xName = arr[0]?.name ?? '';
+        const originData: any[] = originalData[xName] ?? [];
+        const dateLabel = xName.replace(/^\d{4}(\d{2})(\d{2})$/, '$1/$2');
+        const str = arr
+          .map((item: any) => {
+            const cnt = (
+              originData.find((o: any) => o.key === item?.seriesName)
+                ?.active_device_cnt ?? 0
+            ).toLocaleString();
+            return `<div style="text-align:left;">${item?.marker} ${item?.seriesName} ${cnt}(${item.value}${unit})</div>`;
+          })
+          .join('');
+        return `<div style="text-align:left;">${dateLabel}</div>${str}`;
+      },
+    },
+    legend: {
+      ...LEGEND_BASE,
+      data: allTypes,
+    },
+    grid: {
+      top: 30,
+      left: 50,
+      right: 40,
+      bottom: 60,
+      containLabel: true,
+      ...grid,
+    },
+    xAxis: {
+      type: 'category' as const,
+      data: xData,
+      axisTick: { show: false },
+      axisPointer: { type: 'shadow' as const },
+      axisLabel: {
+        fontSize: 10,
+        formatter: (value: string) =>
+          value.replace(/^\d{4}(\d{2})(\d{2})$/, '$1/$2'),
+      },
+    },
+    yAxis: {
+      type: 'value' as const,
+      max: 100,
+      nameLocation: 'middle' as const,
+      nameGap: 80,
+      position: 'left' as const,
+      axisLabel: {
+        fontSize: 10,
+        formatter: '{value}%',
+      },
+    },
+    series: series.map((barItem: any) => ({
+      name: barItem.name,
+      type: 'bar' as const,
+      barMaxWidth: 50,
+      stack: 'Total',
+      data: barItem.data,
+      label: {
+        show: true,
+        position: 'inside' as const,
+        fontSize: 12,
+        formatter: (params: any) => {
+          const oData: any[] = originalData[params.name] ?? [];
+          const tarData = oData.find(
+            (item: any) => item.key === params.seriesName,
+          );
+          return tarData?.active_device_cnt ?? 0;
+        },
+      },
+    })),
+  };
+}
+
+function buildInversionStackBarPercentOption(
+  data: BarDataPercent,
+  unit: string,
+  chartProps: Record<string, any>,
+): echarts.EChartsCoreOption {
+  const { grid = {} } = chartProps;
+  const { xData = [], series = [], allTypes = [], originalData = {} } = data;
+
+  return {
+    tooltip: {
+      trigger: 'axis' as const,
+      formatter: (arr: any) => {
+        const yName = arr[0]?.name ?? '';
+        const originData: any[] = originalData[yName] ?? [];
+        const dateLabel = yName.replace(/^\d{4}(\d{2})(\d{2})$/, '$1/$2');
+        const str = arr
+          .map((item: any) => {
+            const cnt = (
+              originData.find((o: any) => o.key === item?.seriesName)
+                ?.active_device_cnt ?? 0
+            ).toLocaleString();
+            return `<div style="text-align:left;">${item?.marker} ${item?.seriesName} ${cnt}(${item.value}${unit})</div>`;
+          })
+          .join('');
+        return `<div style="text-align:left;">${dateLabel}</div>${str}`;
+      },
+    },
+    legend: {
+      ...LEGEND_BASE,
+      data: allTypes,
+    },
+    grid: {
+      top: 30,
+      left: 50,
+      right: 40,
+      bottom: 60,
+      containLabel: true,
+      ...grid,
+    },
+    yAxis: {
+      type: 'category' as const,
+      data: xData,
+      axisTick: { show: false },
+      axisLabel: {
+        fontSize: 10,
+        formatter: (value: string) =>
+          value.replace(/^\d{4}(\d{2})(\d{2})$/, '$1/$2'),
+      },
+    },
+    xAxis: {
+      type: 'value' as const,
+      max: 100,
+      axisLabel: {
+        fontSize: 10,
+        formatter: '{value}%',
+      },
+    },
+    series: series.map((barItem: any) => ({
+      name: barItem.name,
+      type: 'bar' as const,
+      barMaxWidth: 50,
+      stack: 'Total',
+      data: barItem.data,
+      label: {
+        show: true,
+        position: 'inside' as const,
+        fontSize: 12,
+        formatter: (params: any) => {
+          const oData: any[] = originalData[params.name] ?? [];
+          const tarData = oData.find(
+            (item: any) => item.key === params.seriesName,
+          );
+          return tarData?.active_device_cnt ?? 0;
+        },
+      },
+    })),
+  };
+}
+
+// ─── 组件 ─────────────────────────────────────────────────────────────────────
+
+export const BarChart: React.FC<BarChartProps> = ({
+  data,
+  variant = 'bar',
+  direction = 'vertical',
+  unit = '',
+  title,
+  height = 300,
+  showLabel: showLabelProp,
+  showGrid: showGridProp,
+  legendShow: legendShowProp,
+  chartProps = {},
+  option: optionOverride,
+  onChartReady,
+  loading = false,
+  empty,
+  style,
+  className,
+  testId,
+}) => {
+  // 空态判断
+  const isEmptyData = empty ?? isEmpty(data);
+
+  // showLabel 默认值
+  const showLabel = showLabelProp ?? true;
+
+  // showGrid 默认值
+  const showGrid = showGridProp ?? true;
+
+  // 构建 option
+  const mergedOption = useMemo(() => {
+    let baseOption: echarts.EChartsCoreOption;
+
+    if (variant === 'bar' && direction === 'horizontal') {
+      baseOption = buildHorizontalBarOption(
+        data as BarDataSingle,
+        unit,
+        showLabel,
+        chartProps,
+      );
+    } else if (variant === 'stackBar' && direction === 'horizontal') {
+      baseOption = buildInversionStackBarOption(
+        data as BarDataMulti,
+        unit,
+        showLabel,
+        chartProps,
+      );
+    } else if (variant === 'stackBarPercent' && direction === 'horizontal') {
+      baseOption = buildInversionStackBarPercentOption(
+        data as BarDataPercent,
+        unit,
+        chartProps,
+      );
+    } else if (variant === 'stackBarPercent') {
+      baseOption = buildStackBarPercentOption(
+        data as BarDataPercent,
+        unit,
+        chartProps,
+      );
+    } else if (variant === 'stackBar') {
+      baseOption = buildStackBarOption(
+        data as BarDataMulti,
+        unit,
+        showLabel,
+        chartProps,
+      );
+    } else {
+      // variant === 'bar' && direction === 'vertical' (default)
+      baseOption = buildBarOption(
+        data as BarDataSingle,
+        unit,
+        showLabel,
+        chartProps,
+      );
+    }
+
+    // legendShow 覆盖
+    if (legendShowProp !== undefined) {
+      const legend = baseOption.legend as any;
+      baseOption = {
+        ...baseOption,
+        legend: { ...legend, show: legendShowProp },
+      };
+    }
+
+    // showGrid 覆盖：隐藏网格线
+    if (!showGrid) {
+      const yAxisBase = (baseOption as any).yAxis ?? {};
+      const xAxisBase = (baseOption as any).xAxis ?? {};
+      baseOption = {
+        ...baseOption,
+        yAxis: {
+          ...yAxisBase,
+          splitLine: { ...yAxisBase.splitLine, show: false },
+        },
+        xAxis: {
+          ...xAxisBase,
+          splitLine: { ...xAxisBase.splitLine, show: false },
+        },
+      };
+    }
+
+    // option 覆盖合并
+    if (optionOverride) {
+      return {
+        ...baseOption,
+        ...optionOverride,
+        ...(optionOverride.legend
+          ? {
+              legend: {
+                ...(baseOption.legend as any),
+                ...(optionOverride.legend as any),
+              },
+            }
+          : {}),
+        ...(optionOverride.tooltip
+          ? {
+              tooltip: {
+                ...(baseOption.tooltip as any),
+                ...(optionOverride.tooltip as any),
+              },
+            }
+          : {}),
+      };
+    }
+
+    return baseOption;
+  }, [
+    data,
+    variant,
+    direction,
+    unit,
+    showLabel,
+    showGrid,
+    legendShowProp,
+    chartProps,
+    optionOverride,
+  ]);
+
+  const { domRef, chartRef } = useECharts({ option: mergedOption });
+
+  // onChartReady 回调
+  useEffect(() => {
+    onChartReady?.(chartRef.current);
+    return () => {
+      onChartReady?.(null);
+    };
+  }, [chartRef.current, onChartReady]);
+
+  const titleNode = title ? (
+    typeof title === 'string' ? (
+      <div
+        style={{
+          textAlign: 'center',
+          fontSize: 13,
+          fontWeight: 'bold',
+          color: '#515151',
+          marginTop: 12,
+          marginBottom: 4,
+        }}
+      >
+        {title}
+      </div>
+    ) : (
+      title
+    )
+  ) : null;
+
+  return (
+    <Spin spinning={loading}>
+      <div
+        style={{
+          position: 'relative',
+          width: '100%',
+          ...(titleNode
+            ? { display: 'flex', flexDirection: 'column', height }
+            : {}),
+        }}
+      >
+        {titleNode}
+        <div
+          style={{
+            position: 'relative',
+            width: '100%',
+            ...(titleNode ? { flex: 1, minHeight: 0 } : { height }),
+          }}
+        >
+          <div
+            ref={domRef}
+            className={className}
+            style={{
+              width: '100%',
+              height: titleNode ? '100%' : height,
+              ...style,
+            }}
+            data-testid={testId}
+          />
+          {isEmptyData && !loading && (
+            <div
+              style={{
+                position: 'absolute',
+                inset: 0,
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+              }}
+            >
+              <Empty
+                image={Empty.PRESENTED_IMAGE_SIMPLE}
+                description="NO DATA"
+              />
+            </div>
+          )}
+        </div>
+      </div>
+    </Spin>
+  );
+};
+
+export default BarChart;