feat: 新增 financialService 类型声明和 EChartsWrapper 组件

- financialService.d.ts: 为 JS 服务文件提供 TypeScript 类型声明
- EChartsWrapper.tsx: 按需引入的 ECharts 包装组件,减小打包体积

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
zdl
2025-12-19 10:15:59 +08:00
parent 51721ce9bf
commit 02cc3eadd9
2 changed files with 97 additions and 0 deletions

View File

@@ -0,0 +1,48 @@
/**
* 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;