/**
 * ECharts 包装组件 - 按需引入版本
 *
 * 使用方式：
 * import EChartsWrapper from '../EChartsWrapper';
 * <EChartsWrapper option={option} style={{ height: '400px' }} />
 *
 * 优势：
 * - 减小打包体积（从 ~800KB 降至 ~200-300KB）
 * - 统一管理图表实例
 * - 兼容原有 ReactECharts 的所有属性
 */

import React, { memo } from 'react';
import ReactEChartsCore from 'echarts-for-react/lib/core';
import { echarts, type EChartsOption } from '@lib/echarts';
import type { EChartsReactProps } from 'echarts-for-react';

// 重新导出类型
export type { EChartsOption };

interface EChartsWrapperProps extends Omit<EChartsReactProps, 'echarts' | 'option'> {
  option: EChartsOption;
}

/**
 * ECharts 包装组件
 *
 * 使用按需引入的 echarts 实例，减小打包体积
 */
const EChartsWrapper: React.FC<EChartsWrapperProps> = memo((props) => {
  const { option, ...restProps } = props;

  return (
    <ReactEChartsCore
      echarts={echarts}
      option={option}
      notMerge={true}
      lazyUpdate={true}
      opts={{ renderer: 'canvas' }}
      {...restProps}
    />
  );
});

EChartsWrapper.displayName = 'EChartsWrapper';

export default EChartsWrapper;