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:
49
src/services/financialService.d.ts
vendored
Normal file
49
src/services/financialService.d.ts
vendored
Normal file
@@ -0,0 +1,49 @@
|
|||||||
|
// financialService 类型声明
|
||||||
|
|
||||||
|
export interface RequestOptions {
|
||||||
|
signal?: AbortSignal;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ApiResponse<T> {
|
||||||
|
success: boolean;
|
||||||
|
data: T;
|
||||||
|
message?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface FinancialService {
|
||||||
|
getStockInfo(seccode: string, options?: RequestOptions): Promise<ApiResponse<any>>;
|
||||||
|
getBalanceSheet(seccode: string, limit?: number, options?: RequestOptions): Promise<ApiResponse<any[]>>;
|
||||||
|
getIncomeStatement(seccode: string, limit?: number, options?: RequestOptions): Promise<ApiResponse<any[]>>;
|
||||||
|
getCashflow(seccode: string, limit?: number, options?: RequestOptions): Promise<ApiResponse<any[]>>;
|
||||||
|
getFinancialMetrics(seccode: string, limit?: number, options?: RequestOptions): Promise<ApiResponse<any[]>>;
|
||||||
|
getMainBusiness(seccode: string, periods?: number, options?: RequestOptions): Promise<ApiResponse<any>>;
|
||||||
|
getForecast(seccode: string, options?: RequestOptions): Promise<ApiResponse<any>>;
|
||||||
|
getIndustryRank(seccode: string, limit?: number, options?: RequestOptions): Promise<ApiResponse<any[]>>;
|
||||||
|
getPeriodComparison(seccode: string, periods?: number, options?: RequestOptions): Promise<ApiResponse<any[]>>;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const financialService: FinancialService;
|
||||||
|
|
||||||
|
export interface FormatUtils {
|
||||||
|
formatLargeNumber(num: number, decimal?: number): string;
|
||||||
|
formatPercent(num: number, decimal?: number): string;
|
||||||
|
formatDate(dateStr: string): string;
|
||||||
|
getReportType(dateStr: string): string;
|
||||||
|
getGrowthColor(value: number): string;
|
||||||
|
getTrendIcon(current: number, previous: number): 'up' | 'down' | 'stable';
|
||||||
|
calculateYoY(current: number, yearAgo: number): number | null;
|
||||||
|
calculateQoQ(current: number, previous: number): number | null;
|
||||||
|
getFinancialHealthScore(metrics: any): { score: number; level: string; color: string } | null;
|
||||||
|
getTableColumns(type: string): any[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export const formatUtils: FormatUtils;
|
||||||
|
|
||||||
|
export interface ChartUtils {
|
||||||
|
prepareTrendData(data: any[], metrics: any[]): any[];
|
||||||
|
preparePieData(data: any[], valueKey: string, nameKey: string): any[];
|
||||||
|
prepareComparisonData(data: any[], periods: any[], metrics: any[]): any[];
|
||||||
|
getChartColors(theme?: string): string[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export const chartUtils: ChartUtils;
|
||||||
48
src/views/Company/components/EChartsWrapper.tsx
Normal file
48
src/views/Company/components/EChartsWrapper.tsx
Normal 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;
|
||||||
Reference in New Issue
Block a user