02cc3eadd9
- financialService.d.ts: 为 JS 服务文件提供 TypeScript 类型声明 - EChartsWrapper.tsx: 按需引入的 ECharts 包装组件，减小打包体积 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
49 lines
1.2 KiB
TypeScript
49 lines
1.2 KiB
TypeScript
/**
|
||
* 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;
|