@gadmin2n/schematics 0.0.72 → 0.0.74

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

@@ -1,1034 +0,0 @@
-import React, { useMemo, useEffect } from 'react';
-import { Spin, Empty } from 'antd';
-import * as echarts from 'echarts';
-import { useECharts } from '@/hooks/useECharts';
-import { LEGEND_BASE, GRID_VERTICAL, GRID_DUAL_Y } from '../chart-constants';
-
-// ─── Types ────────────────────────────────────────────────────────────────────
-
-export type LineChartVariant =
-  | 'line'
-  | 'stackLine' // 向后兼容别名 → line
-  | 'stackArea' // 向后兼容别名 → line + stacked + area
-  | 'simpleLine' // 向后兼容别名 → line + smooth + area + showGrid=false
-  | 'mulAreaLine'
-  | 'dualYAxis';
-
-/** line / simpleLine 单系列数据 */
-export type LineDataSingle = { name: string; value: number | null }[];
-
-/** stackLine 多系列数据 */
-export interface LineDataMulti {
-  xData: string[];
-  series: {
-    name: string;
-    data: (number | null)[];
-    [key: string]: any;
-  }[];
-}
-
-/**
- * mulAreaLine 复合面积折线图数据（BG/云厂商 etc.）
- * outerKeyList: 外层 key（决定面积色），innerKeyList: 内层 key（决定虚线色）
- * series[].name = "outerKey-innerKey"，series[].areaColor = outerKey色，series[].lineColor = innerKey色
- */
-export interface LineDataMulAreaLine extends LineDataMulti {
-  outerKeyList?: string[];
-  innerKeyList?: string[];
-  originData?: any;
-}
-
-/**
- * dualYAxis 双 Y 轴混合图（折线 + 柱状）数据。
- * yData[0] 对应 Y 轴左侧，yData[1] 对应 Y 轴右侧。
- * series[].yAxisIndex 决定数据挂在哪条 Y 轴，series[].type 可为 "line" | "bar"。
- */
-export interface LineDataDualYAxis {
-  xData: string[];
-  yData: [
-    { name: string; unit: string; max?: number },
-    { name: string; unit: string; max?: number },
-  ];
-  series: {
-    name: string;
-    data: (number | null)[];
-    type: 'line' | 'bar';
-    yAxisIndex: 0 | 1;
-    [key: string]: any;
-  }[];
-}
-
-export type LineChartData =
-  | LineDataSingle
-  | LineDataMulti
-  | LineDataMulAreaLine
-  | LineDataDualYAxis;
-
-/** 标注线配置：在指定 Y 轴值处绘制水平红色参考线 */
-export interface MarkLineConfig {
-  value: number;
-  /** 线条颜色，默认 #fd0100 */
-  color?: string;
-}
-
-export interface LineChartProps {
-  // ── 核心 ──────────────────────────────────────────────────────────────────
-  /** 折线数据，line / simpleLine 用 LineDataSingle，stackLine 用 LineDataMulti，dualYAxis 用 LineDataDualYAxis */
-  data: LineChartData;
-  /** 视觉变体：line = 单系列；stackLine = 多系列；stackArea = 多系列面积堆叠（每条线带颜色填充）；simpleLine = 迷你趋势线（无轴标签）；dualYAxis = 双 Y 轴混合图 */
-  variant?: LineChartVariant;
-  /**
-   * 图表标题，渲染在图表上方。
-   * - 字符串：套默认样式（居中、12px、bold、#515151）
-   * - ReactNode：直接渲染，样式由调用方控制
-   * height 只指图表区域高度，标题额外占空间。
-   */
-  title?: React.ReactNode;
-  /** Y 轴单位，line / stackLine 显示在 tooltip 和 Y 轴 label 中（dualYAxis 使用 yData 中的 unit） */
-  unit?: string;
-
-  // ── 布局 ──────────────────────────────────────────────────────────────────
-  /** 图表容器高度，默认 300 */
-  height?: number | string;
-  /** 是否显示图例，多系列默认 true，单系列默认 false */
-  legendShow?: boolean;
-
-  // ── 配置覆盖 ──────────────────────────────────────────────────────────────
-  /**
-   * 透传至 ECharts option 的配置（yAxis、xAxis、grid 等），与基准配置浅合并。
-   * simpleLine 支持 seriesProps 字段（覆盖 series 级配置，如主题色 lineStyle / areaStyle）。
-   */
-  chartProps?: Record<string, any>;
-
-  // ── 高级功能 ──────────────────────────────────────────────────────────────
-  /**
-   * 仅对 variant="line" 生效。
-   * 开启后 label 只在 x 轴可见刻度对应的数据点上显示（每隔一个刻度显示一次），
-   * 避免密集数据时标签重叠。
-   */
-  smartLabel?: boolean;
-
-  /**
-   * 智能 Y 轴模式（默认 false）。
-   * 开启后自动分析数据最小值/最大值，计算合理的轴范围（两侧加 30% padding），
-   * 让折线起伏清晰可见，而不是从 0 起始。
-   * 适用于 variant="line" / "stackLine"。
-   * 若数据集内所有值相同，或已通过 chartProps.yAxis.min/max 手动指定范围，则 smartYAxis 无效。
-   */
-  smartYAxis?: boolean;
-
-  /**
-   * 标注线配置，在 Y 轴指定值处绘制水平参考线（红色虚线）。
-   * 适用于 variant="stackLine"，如带宽利用率 80% 阈值、网络延迟 100ms 阈值。
-   */
-  markLine?: MarkLineConfig;
-
-  // ── 样式开关 ──────────────────────────────────────────────────────────────
-  /** 是否堆叠（多系列时生效），默认 false */
-  stacked?: boolean;
-  /** 是否显示面积填充，默认 false */
-  area?: boolean;
-  /** 是否显示网格线（Y轴 splitLine），默认 true */
-  showGrid?: boolean;
-  /** 是否显示数据点标记（symbol），默认 false */
-  showDots?: boolean;
-  /** 是否显示坐标点数据标签（需 showDots 开启），默认 false */
-  showLabel?: boolean;
-  /** 是否使用平滑拟合曲线，默认 false */
-  smooth?: boolean;
-  /** 是否显示横纵坐标轴（轴标签+刻度），默认 true */
-  showAxis?: boolean;
-
-  // ── 状态 ──────────────────────────────────────────────────────────────────
-  /** 显示 Spin 加载态 */
-  loading?: boolean;
-  /** 强制显示空态。未传时根据数据是否为空自动判断 */
-  empty?: boolean;
-
-  // ── 样式 / 测试 ──────────────────────────────────────────────────────────
-  style?: React.CSSProperties;
-  className?: string;
-  /** data-testid */
-  testId: string;
-  /**
-   * 图表实例就绪回调，回传 ECharts 实例（销毁时传 null）。
-   * 用于 PieChart ↔ LineChart 联动（如 useChartLink）。
-   */
-  onChartReady?: (instance: import('echarts').ECharts | null) => void;
-  /**
-   * ECharts 事件绑定（如 click、mouseover），与 useECharts onEvents 对应。
-   */
-  onEvents?: Record<
-    string,
-    (params: any, chart: import('echarts').ECharts) => void
-  >;
-}
-
-// ─── 公共常量 ─────────────────────────────────────────────────────────────────
-
-// LEGEND_BASE, GRID_VERTICAL, GRID_DUAL_Y 来自 ../chart-constants
-const DEFAULT_GRID = { left: 60, right: 60 };
-
-// ─── 空态判断 ─────────────────────────────────────────────────────────────────
-
-function checkEmpty(data: LineChartData, variant: LineChartVariant): boolean {
-  if (
-    variant === 'stackLine' ||
-    variant === 'stackArea' ||
-    variant === 'mulAreaLine' ||
-    variant === 'dualYAxis'
-  ) {
-    const d = data as LineDataMulti;
-    return !d?.xData?.length && !d?.series?.length;
-  }
-  // variant='line' 可能是单系列(数组)或多系列(对象)
-  if (variant === 'line') {
-    if (Array.isArray(data)) {
-      return !(data as LineDataSingle)?.length;
-    }
-    const d = data as LineDataMulti;
-    return !d?.xData?.length && !d?.series?.length;
-  }
-  return !(data as LineDataSingle)?.length;
-}
-
-// ─── Smart Y Axis ─────────────────────────────────────────────────────────────
-
-/**
- * 根据数据值自动计算合理的 Y 轴 min/max，避免从 0 起始导致起伏不可见。
- * 逻辑：找到数据最小/最大值，在两侧各加 30% padding，再取美观整数边界。
- */
-function computeSmartYAxis(
-  values: (number | null)[],
-): { min: number; max: number } | null {
-  const nums = values.filter(
-    (v): v is number => typeof v === 'number' && isFinite(v),
-  );
-  if (nums.length < 2) return null;
-
-  const dataMin = Math.min(...nums);
-  const dataMax = Math.max(...nums);
-  const range = dataMax - dataMin;
-
-  if (range === 0) return null; // 所有值相同，让 ECharts 自动处理
-
-  // 两侧各加 30% padding
-  const padding = range * 0.3;
-  const rawMin = dataMin - padding;
-  const rawMax = dataMax + padding;
-
-  // 按 range 量级取整，保证轴刻度美观
-  const mag = Math.pow(10, Math.floor(Math.log10(range)));
-  const niceMag = mag >= 1 ? mag : 1;
-
-  const min = Math.floor(rawMin / niceMag) * niceMag;
-  const max = Math.ceil(rawMax / niceMag) * niceMag;
-
-  return { min, max };
-}
-
-// ─── markLine ECharts 配置构建 ─────────────────────────────────────────────────
-
-function buildMarkLineData(markLine?: MarkLineConfig) {
-  if (!markLine) return undefined;
-  return {
-    silent: true,
-    symbol: 'none',
-    label: { show: false },
-    lineStyle: {
-      color: markLine.color ?? '#fd0100',
-      type: 'solid',
-    },
-    data: [{ yAxis: markLine.value }],
-  };
-}
-
-// ─── Unified Line Option 构建 ────────────────────────────────────────────────
-
-function isMultiData(
-  data: LineDataSingle | LineDataMulti,
-): data is LineDataMulti {
-  return !Array.isArray(data) && 'xData' in (data as any);
-}
-
-function buildUnifiedLineOption(
-  data: LineDataSingle | LineDataMulti,
-  unit: string,
-  chartProps: Record<string, any>,
-  options: {
-    stacked?: boolean;
-    area?: boolean;
-    showGrid?: boolean;
-    showDots?: boolean;
-    showLabel?: boolean;
-    smooth?: boolean;
-    showAxis?: boolean;
-    smartLabel?: boolean;
-    smartYAxis?: boolean;
-    markLine?: MarkLineConfig;
-  },
-): echarts.EChartsCoreOption {
-  const {
-    yAxis,
-    xAxis,
-    grid = {},
-    legend = {},
-    tooltip = {},
-    seriesProps = {},
-  } = chartProps;
-  const {
-    stacked,
-    area,
-    showGrid = true,
-    showDots,
-    showLabel,
-    smooth,
-    showAxis = true,
-    smartLabel,
-    smartYAxis,
-    markLine,
-  } = options;
-  const markLineData = buildMarkLineData(markLine);
-
-  if (isMultiData(data)) {
-    // ── 多系列模式 ──
-    const allValues = data?.series?.flatMap((s) => s.data) ?? [];
-    const smartY =
-      smartYAxis && !yAxis?.min && !yAxis?.max
-        ? computeSmartYAxis(allValues)
-        : null;
-
-    return {
-      tooltip: {
-        trigger: 'axis' as const,
-        valueFormatter: (value: number) => `${value}${unit}`,
-        ...tooltip,
-      },
-      legend: {
-        ...LEGEND_BASE,
-        data: data?.series?.map((item) => item?.name),
-        ...legend,
-      },
-      xAxis: {
-        type: 'category' as const,
-        boundaryGap: false,
-        axisTick: { show: false },
-        axisLine: { show: false },
-        data: data?.xData,
-        axisLabel: { show: showAxis, fontSize: '10px', hideOverlap: true },
-        ...xAxis,
-      },
-      grid: { ...GRID_VERTICAL, ...grid },
-      yAxis: {
-        position: 'left' as const,
-        type: 'value' as const,
-        axisLabel: {
-          show: showAxis,
-          fontSize: '10px',
-          formatter: (value: number) => `${value}${unit}`,
-        },
-        axisLine: { show: false },
-        splitLine: { show: showGrid },
-        ...(smartY ?? {}),
-        ...yAxis,
-      },
-      series: data?.series?.map(
-        ({
-          name,
-          data: seriesData,
-          color,
-          lineStyle,
-          areaStyle: seriesAreaStyle,
-          stack,
-        }) => ({
-          type: 'line' as const,
-          smooth: smooth ?? false,
-          showSymbol: showDots ?? false,
-          label: {
-            show: !!(showDots && showLabel),
-            position: 'top' as const,
-            fontSize: 10,
-          },
-          name,
-          data: seriesData,
-          ...(stacked
-            ? { stack: stack ?? 'stack' }
-            : stack !== undefined
-              ? { stack }
-              : {}),
-          ...(color !== undefined && { color }),
-          ...(lineStyle !== undefined && { lineStyle }),
-          ...(area
-            ? {
-                areaStyle: { color: color ?? null, ...(seriesAreaStyle ?? {}) },
-              }
-            : seriesAreaStyle !== undefined
-              ? { areaStyle: seriesAreaStyle }
-              : {}),
-          ...(stacked && area
-            ? {
-                itemStyle: { color: color ?? null },
-                lineStyle: { color: color ?? null, ...(lineStyle ?? {}) },
-                emphasis: {
-                  focus: 'series' as const,
-                  blurScope: 'global' as const,
-                },
-              }
-            : {}),
-          ...seriesProps,
-          ...(markLineData !== undefined && { markLine: markLineData }),
-        }),
-      ),
-    };
-  }
-
-  // ── 单系列模式 ──
-  const smartY =
-    smartYAxis && !yAxis?.min && !yAxis?.max
-      ? computeSmartYAxis(data.map((d) => d?.value))
-      : null;
-
-  const labelFormatter = smartLabel
-    ? function (params: any) {
-        return params.dataIndex % 3 === 0 ? `${params.value}${unit}` : '';
-      }
-    : `{c}${unit}`;
-
-  return {
-    legend: { ...LEGEND_BASE, show: false },
-    tooltip: {
-      trigger: 'axis' as const,
-      formatter: (ctx: any) => {
-        if (ctx[0]) {
-          const { name, data: val, marker } = ctx[0];
-          return val !== null
-            ? `${marker || ''}${name}: ${val}${unit}`
-            : `${name}`;
-        }
-        return '';
-      },
-      ...tooltip,
-    },
-    xAxis: {
-      type: 'category' as const,
-      axisTick: { show: false },
-      axisLabel: {
-        show: showAxis,
-        fontSize: 10,
-        interval: 0,
-        hideOverlap: true,
-        margin: 15,
-      },
-      data: data.map((item) => item?.name),
-      ...xAxis,
-    },
-    yAxis: {
-      position: 'left' as const,
-      type: 'value' as const,
-      axisLabel: { show: showAxis, fontSize: 10 },
-      splitLine: { show: showGrid },
-      ...(smartY ?? {}),
-      ...yAxis,
-    },
-    grid: { ...DEFAULT_GRID, bottom: 30, top: 30, ...grid },
-    series: [
-      {
-        data: data.map((item) => item?.value),
-        type: 'line' as const,
-        smooth: smooth ?? false,
-        showSymbol: showDots ?? false,
-        label: {
-          show: !!(showDots && showLabel),
-          position: 'top' as const,
-          fontSize: 10,
-          formatter: labelFormatter,
-        },
-        ...(area
-          ? {
-              areaStyle: {
-                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                  { offset: 0, color: 'rgba(56, 137, 243, 0.5)' },
-                  { offset: 1, color: 'rgba(56, 137, 243, 0)' },
-                ]),
-              },
-            }
-          : {}),
-        ...seriesProps,
-      },
-    ],
-  };
-}
-
-// ─── GCD helpers for dualYAxis ────────────────────────────────────────────────
-
-function multipleArrayAdd(...arrays: (number | null)[][]): number[] {
-  const length = arrays[0].length;
-  const result: number[] = [];
-  for (let i = 0; i < length; i++) {
-    let sum = 0;
-    for (const arr of arrays) {
-      sum += arr[i] ?? 0;
-    }
-    result.push(sum);
-  }
-  return result;
-}
-
-function gcdFunc(a: number, b: number): number {
-  a = Math.abs(a);
-  b = Math.abs(b);
-  const c = 5;
-  while (b !== 0) {
-    const temp = b;
-    b = a % b;
-    a = temp;
-  }
-  let result = a;
-  let temp = c;
-  while (temp !== 0) {
-    const tempValue = temp;
-    temp = result % temp;
-    result = tempValue;
-  }
-  return result;
-}
-
-function getHighestDigitAndOrder(num: number) {
-  num = Math.ceil(num);
-  const order = Math.pow(10, String(num).length - 1);
-  const highestDigit = Math.ceil(num / order);
-  return { highestDigit, order };
-}
-
-function getMaxValue(
-  series: LineDataDualYAxis['series'],
-  yAxisIndex: number,
-): number {
-  const seriesArr = series.filter((s) => s.yAxisIndex === yAxisIndex);
-  if (seriesArr.length && seriesArr.every((s) => s.type === 'bar')) {
-    const arr = multipleArrayAdd(...seriesArr.map((s) => s.data));
-    return Math.max(...arr, 0);
-  }
-  return Math.max(
-    ...seriesArr
-      .flatMap((s) => s.data)
-      .filter((v): v is number => typeof v === 'number'),
-    0,
-  );
-}
-
-// ─── Option 构建函数 ──────────────────────────────────────────────────────────
-
-// buildLineOption, buildStackLineOption, buildStackAreaOption 已合并为 buildUnifiedLineOption（见上方）
-
-function buildMulAreaLineOption(
-  data: LineDataMulAreaLine,
-  unit: string,
-  chartProps: Record<string, any>,
-): echarts.EChartsCoreOption {
-  const { grid = {} } = chartProps;
-  const {
-    series = [],
-    xData = [],
-    outerKeyList = [],
-    innerKeyList = [],
-  } = data;
-
-  // Sort series: by outerKeyList order then innerKeyList order (mirrors getMulStackLineOption)
-  const outkeyGroup = series.reduce((acc: any, cur: any) => {
-    const outerKey = cur?.name?.split('-')?.[0] || cur?.name;
-    acc[outerKey] ? acc[outerKey].push(cur) : (acc[outerKey] = [cur]);
-    return acc;
-  }, {});
-  let sortedSeries: any[] = outerKeyList.map((outerKey: string) => {
-    return (outkeyGroup[outerKey] || []).sort((a: any, b: any) => {
-      const aInner = a?.name?.split('-')?.[1] || '';
-      const bInner = b?.name?.split('-')?.[1] || '';
-      return innerKeyList.indexOf(aInner) - innerKeyList.indexOf(bInner);
-    });
-  });
-  sortedSeries = sortedSeries.flat();
-  // 补上不在 outerKeyList（小份额）里的 series，避免丢失
-  const includedNames = new Set(sortedSeries.map((s: any) => s.name));
-  const remainder = series.filter((s: any) => !includedNames.has(s.name));
-  sortedSeries = [...sortedSeries, ...remainder];
-  if (sortedSeries.length === 0) sortedSeries = series;
-
-  return {
-    tooltip: { show: false },
-    legend: { ...LEGEND_BASE, show: false },
-    grid: { ...DEFAULT_GRID, top: 30, bottom: 45, ...grid },
-    xAxis: {
-      type: 'category' as const,
-      boundaryGap: false,
-      data: xData,
-      axisTick: { show: false },
-      axisLine: { show: false },
-      axisLabel: { fontSize: '10px', hideOverlap: true },
-    },
-    yAxis: {
-      position: 'left' as const,
-      type: 'value' as const,
-      axisLabel: {
-        formatter: (value: number) => value.toLocaleString(),
-        fontSize: '10px',
-      },
-      axisLine: { show: false },
-      splitNumber: 5,
-    },
-    series: sortedSeries.map((item: any, index: number) => {
-      const [outerKey, innerKey] = (item?.name || '').split('-');
-      const areaColor = item?.areaColor ?? null;
-      const lineColor = item?.lineColor ?? null;
-      return {
-        name: item?.name,
-        type: 'line' as const,
-        stack: 'stack',
-        data: item?.data,
-        smooth: false,
-        symbol: 'none',
-        triggerLineEvent: true, // 让面积/线条区域可触发 mouseover 等标准事件
-        lineStyle: {
-          type: 'dashed' as const,
-          dash: [5 + index, 5 + index],
-          color: lineColor,
-          width: 1,
-          opacity: 0.6,
-        },
-        areaStyle: {
-          color: areaColor,
-          opacity: 0.6,
-        },
-      };
-    }),
-  };
-}
-
-// buildSimpleLineOption 已废弃，simpleLine 功能由 buildUnifiedLineOption + smooth + area 覆盖
-
-function buildDualYAxisOption(
-  data: LineDataDualYAxis,
-  chartProps: Record<string, any>,
-): echarts.EChartsCoreOption {
-  const { grid = {} } = chartProps;
-  const { xData, yData, series } = data;
-  const [y0, y1] = yData || [];
-
-  const maxY0val = getMaxValue(series, 0);
-  const maxY1val = getMaxValue(series, 1);
-
-  const { highestDigit: highestDigitY0, order: order0 } =
-    getHighestDigitAndOrder(maxY0val);
-  const { highestDigit: highestDigitY1, order: order1 } =
-    getHighestDigitAndOrder(maxY1val);
-
-  const gcdNum = gcdFunc(highestDigitY0, highestDigitY1);
-  const gcdMax = Math.max(highestDigitY0 / gcdNum, highestDigitY1 / gcdNum);
-  const max = Math.max(highestDigitY0, highestDigitY1);
-  let max0 = gcdMax * order0 > maxY0val ? gcdMax * order0 : max * order0;
-  let max1 = gcdMax * order1 > maxY1val ? gcdMax * order1 : max * order1;
-  max0 = y0?.max ?? max0;
-  max1 = y1?.max ?? max1;
-
-  const y0SeriesCount = series.filter((s) => s.yAxisIndex === 0).length;
-
-  return {
-    tooltip: {
-      trigger: 'axis' as const,
-      formatter: (params: any) => {
-        let result = `${params[0].name}<br/>`;
-        params.forEach((item: any, index: number) => {
-          const isY0 = index < y0SeriesCount;
-          const unit = isY0 ? (y0?.unit ?? '') : (y1?.unit ?? '');
-          const unitStr = unit ? `${unit}` : '';
-          result += `${item.marker} ${item.seriesName}: ${item.value?.toLocaleString?.() ?? item.value}${unitStr}<br/>`;
-        });
-        return result;
-      },
-    },
-    grid: { ...GRID_DUAL_Y, ...grid },
-    legend: { ...LEGEND_BASE },
-    xAxis: [
-      {
-        type: 'category' as const,
-        data: xData,
-        boundaryGap: false,
-        axisTick: { show: false },
-        axisLine: { show: false },
-        axisLabel: {
-          fontSize: 10,
-          interval: 0,
-          hideOverlap: true,
-          margin: 15,
-        },
-      },
-    ],
-    yAxis: [
-      {
-        type: 'value' as const,
-        alignTicks: false,
-        name: y0?.name + (y0?.unit ? `(${y0?.unit})` : ''),
-        axisLabel: {
-          fontSize: 10,
-          formatter: (value: number) =>
-            `${value?.toLocaleString?.() ?? value}${y0?.unit ?? ''}`,
-        },
-        max: max0,
-        min: 0,
-      },
-      {
-        type: 'value' as const,
-        alignTicks: false,
-        name: y1?.name + (y1?.unit ? `(${y1?.unit})` : ''),
-        axisLabel: {
-          fontSize: 10,
-          formatter: (value: number) => `${value}${y1?.unit ?? ''}`,
-        },
-        max: max1,
-        min: 0,
-      },
-    ],
-    series,
-  };
-}
-
-// ─── 组件 ─────────────────────────────────────────────────────────────────────
-
-export const LineChart: React.FC<LineChartProps> = ({
-  data,
-  variant = 'line',
-  title = '',
-  unit = '',
-  height = 300,
-  legendShow: legendShowProp,
-  chartProps = {},
-  smartLabel = false,
-  smartYAxis = false,
-  markLine,
-  stacked: stackedProp,
-  area: areaProp,
-  showGrid: showGridProp,
-  showDots: showDotsProp,
-  showLabel: showLabelProp,
-  smooth: smoothProp,
-  showAxis: showAxisProp,
-  loading = false,
-  empty,
-  style,
-  className,
-  testId,
-  onChartReady,
-  onEvents,
-}) => {
-  const isEmpty = empty ?? checkEmpty(data, variant);
-
-  const titleNode = title ? (
-    typeof title === 'string' ? (
-      <div
-        style={{
-          textAlign: 'center',
-          fontSize: 13,
-          fontWeight: 'bold',
-          color: '#515151',
-          marginTop: 12,
-          marginBottom: 4,
-        }}
-      >
-        {title}
-      </div>
-    ) : (
-      title
-    )
-  ) : null;
-
-  const mergedOption = useMemo(() => {
-    // 向后兼容别名
-    let effectiveVariant = variant;
-    let stacked = stackedProp;
-    let area = areaProp;
-    let smooth = smoothProp;
-    let showAxis = showAxisProp;
-    if (variant === 'stackLine') {
-      effectiveVariant = 'line';
-    } else if (variant === 'stackArea') {
-      effectiveVariant = 'line';
-      stacked = stacked ?? true;
-      area = area ?? true;
-    } else if (variant === 'simpleLine') {
-      effectiveVariant = 'line';
-      smooth = smooth ?? true;
-      area = area ?? true;
-      showAxis = showAxis ?? false;
-    }
-
-    switch (effectiveVariant) {
-      case 'line':
-        return buildUnifiedLineOption(
-          data as LineDataSingle | LineDataMulti,
-          unit,
-          chartProps,
-          {
-            stacked,
-            area,
-            showGrid: showGridProp,
-            showDots: showDotsProp,
-            showLabel: showLabelProp,
-            smooth,
-            showAxis,
-            smartLabel,
-            smartYAxis,
-            markLine,
-          },
-        );
-      case 'dualYAxis':
-        return buildDualYAxisOption(data as LineDataDualYAxis, chartProps);
-      case 'mulAreaLine':
-        return buildMulAreaLineOption(
-          data as LineDataMulAreaLine,
-          unit,
-          chartProps,
-        );
-      default:
-        return buildUnifiedLineOption(
-          data as LineDataSingle | LineDataMulti,
-          unit,
-          chartProps,
-          {
-            stacked,
-            area,
-            showGrid: showGridProp,
-            showDots: showDotsProp,
-            showLabel: showLabelProp,
-            smooth,
-            showAxis,
-            smartLabel,
-            smartYAxis,
-            markLine,
-          },
-        );
-    }
-  }, [
-    data,
-    variant,
-    unit,
-    chartProps,
-    smartLabel,
-    smartYAxis,
-    markLine,
-    stackedProp,
-    areaProp,
-    showGridProp,
-    showDotsProp,
-    showLabelProp,
-    smoothProp,
-    showAxisProp,
-  ]);
-
-  // legendShow 覆盖
-  const finalOption = useMemo(() => {
-    if (legendShowProp === undefined) return mergedOption;
-    return {
-      ...mergedOption,
-      legend: { ...(mergedOption as any).legend, show: legendShowProp },
-    };
-  }, [mergedOption, legendShowProp]);
-
-  // ── mulAreaLine 分组高亮：hover 子类时同父类其他子类稍淡，其他父类全透明 ──
-  const mulSeriesMetaRef = React.useRef<
-    { name: string; areaColor: any; lineColor: any }[]
-  >([]);
-  const mulActiveRef = React.useRef<string | null>(null);
-  if (variant === 'mulAreaLine') {
-    const mulData = data as LineDataMulAreaLine;
-    mulSeriesMetaRef.current =
-      mulData.series?.map((s) => ({
-        name: s.name,
-        areaColor: s.areaColor ?? null,
-        lineColor: s.lineColor ?? null,
-      })) ?? [];
-  }
-
-  const applyMulOpacity = React.useCallback(
-    (chart: any, hoveredName: string | null) => {
-      const meta = mulSeriesMetaRef.current;
-      if (!meta.length || !chart) return;
-
-      if (!hoveredName) {
-        chart.setOption({
-          series: meta.map((s) => ({
-            areaStyle: { color: s.areaColor, opacity: 0.6 },
-            lineStyle: { color: s.lineColor, opacity: 0.6 },
-          })),
-        });
-        return;
-      }
-
-      const outerKey = hoveredName.split('-')[0];
-      chart.setOption({
-        series: meta.map((s) => {
-          const sOuterKey = s.name.split('-')[0];
-          let opacity: number;
-          if (s.name === hoveredName) {
-            opacity = 0.9;
-          } else if (sOuterKey === outerKey) {
-            opacity = 0.35;
-          } else {
-            opacity = 0.05;
-          }
-          return {
-            areaStyle: { color: s.areaColor, opacity },
-            lineStyle: { color: s.lineColor, opacity },
-          };
-        }),
-      });
-    },
-    [],
-  );
-
-  const { domRef, chartRef } = useECharts({ option: finalOption, onEvents });
-
-  // 监听 ECharts 标准事件 + 外部 highlight/downplay（sunburst 联动）
-  // 必须在 useECharts 之后，保证 chartRef.current 已初始化
-  useEffect(() => {
-    if (variant !== 'mulAreaLine' || !chartRef.current) return;
-    const chart = chartRef.current;
-
-    const onMouseOver = (params: any) => {
-      const name = params.seriesName;
-      if (name && name !== mulActiveRef.current) {
-        mulActiveRef.current = name;
-        applyMulOpacity(chart, name);
-      }
-    };
-
-    const onMouseOut = () => {
-      if (mulActiveRef.current !== null) {
-        mulActiveRef.current = null;
-        applyMulOpacity(chart, null);
-      }
-    };
-
-    // 外部 dispatchAction highlight（如 sunburst 联动）
-    const onHighlight = (params: any) => {
-      const batch = params.batch ?? [params];
-      const meta = mulSeriesMetaRef.current;
-      let targetName: string | null = null;
-
-      for (const item of batch) {
-        if (item.seriesName) {
-          targetName = item.seriesName;
-          break;
-        }
-        if (item.seriesIndex != null && meta[item.seriesIndex]) {
-          targetName = meta[item.seriesIndex].name;
-          break;
-        }
-      }
-
-      if (targetName && targetName !== mulActiveRef.current) {
-        mulActiveRef.current = targetName;
-        applyMulOpacity(chart, targetName);
-      }
-    };
-
-    const onDownplay = () => {
-      if (mulActiveRef.current !== null) {
-        mulActiveRef.current = null;
-        applyMulOpacity(chart, null);
-      }
-    };
-
-    chart.on('mouseover', onMouseOver);
-    chart.on('mouseout', onMouseOut);
-    chart.on('highlight', onHighlight);
-    chart.on('downplay', onDownplay);
-
-    return () => {
-      chart.off('mouseover', onMouseOver);
-      chart.off('mouseout', onMouseOut);
-      chart.off('highlight', onHighlight);
-      chart.off('downplay', onDownplay);
-    };
-  }, [variant, finalOption, applyMulOpacity]);
-
-  // 回调 ECharts 实例（onChartReady）
-  useEffect(() => {
-    if (onChartReady) {
-      onChartReady(chartRef.current);
-    }
-  }, [chartRef.current]);
-
-  // 组件卸载时通知 null
-  useEffect(() => {
-    return () => {
-      if (onChartReady) onChartReady(null);
-    };
-  }, []);
-
-  // 数据到来后强制 resize，确保容器已有实际尺寸时图表正确渲染
-  useEffect(() => {
-    if (!isEmpty && chartRef.current) {
-      requestAnimationFrame(() => {
-        chartRef.current?.resize();
-      });
-    }
-  }, [isEmpty, mergedOption]);
-
-  return (
-    <div
-      style={{
-        position: 'relative',
-        width: '100%',
-        height,
-        ...(titleNode ? { display: 'flex', flexDirection: 'column' } : {}),
-        ...style,
-      }}
-    >
-      {titleNode}
-      <div
-        style={{
-          position: 'relative',
-          width: '100%',
-          ...(titleNode ? { flex: 1, minHeight: 0 } : { height: '100%' }),
-        }}
-      >
-        <div
-          ref={domRef}
-          className={className}
-          style={{ position: 'absolute', inset: 0 }}
-          data-testid={testId}
-        />
-        {isEmpty && !loading && (
-          <div
-            style={{
-              position: 'absolute',
-              inset: 0,
-              display: 'flex',
-              justifyContent: 'center',
-              alignItems: 'center',
-            }}
-          >
-            <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="NO DATA" />
-          </div>
-        )}
-        {loading && (
-          <div
-            style={{
-              position: 'absolute',
-              inset: 0,
-              display: 'flex',
-              justifyContent: 'center',
-              alignItems: 'center',
-              background: 'rgba(255,255,255,0.6)',
-              zIndex: 1,
-            }}
-          >
-            <Spin />
-          </div>
-        )}
-      </div>
-    </div>
-  );
-};
-
-export default LineChart;