@gadmin2n/schematics 0.0.71 → 0.0.74

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

@@ -1,896 +0,0 @@
-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;