@gadmin2n/schematics 0.0.70 → 0.0.71

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

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