perf: 优化各 Tab 数据加载为按需请求
MarketDataView (股票行情): - 初始只加载 summary + tradeData(2个接口) - funding/bigDeal/unusual/pledge 数据在切换 Tab 时按需加载 - 新增 loadDataByType 方法支持懒加载 FinancialPanorama (财务全景): - 初始只加载 stockInfo + metrics + comparison + mainBusiness(4个接口) - 从9个接口优化到4个接口 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
120
src/lib/echarts.ts
Normal file
120
src/lib/echarts.ts
Normal file
@@ -0,0 +1,120 @@
|
||||
/**
|
||||
* ECharts 按需导入配置
|
||||
*
|
||||
* 使用方式:
|
||||
* import { echarts } from '@lib/echarts';
|
||||
*
|
||||
* 优势:
|
||||
* - 减小打包体积(从 ~800KB 降至 ~200-300KB)
|
||||
* - Tree-shaking 支持
|
||||
* - 统一管理图表类型和组件
|
||||
*/
|
||||
|
||||
// 核心模块
|
||||
import * as echarts from 'echarts/core';
|
||||
|
||||
// 图表类型 - 按需导入
|
||||
import {
|
||||
LineChart,
|
||||
BarChart,
|
||||
PieChart,
|
||||
CandlestickChart,
|
||||
ScatterChart,
|
||||
} from 'echarts/charts';
|
||||
|
||||
// 组件 - 按需导入
|
||||
import {
|
||||
TitleComponent,
|
||||
TooltipComponent,
|
||||
LegendComponent,
|
||||
GridComponent,
|
||||
DataZoomComponent,
|
||||
ToolboxComponent,
|
||||
MarkLineComponent,
|
||||
MarkPointComponent,
|
||||
MarkAreaComponent,
|
||||
DatasetComponent,
|
||||
TransformComponent,
|
||||
} from 'echarts/components';
|
||||
|
||||
// 渲染器
|
||||
import { CanvasRenderer } from 'echarts/renderers';
|
||||
|
||||
// 类型导出
|
||||
import type {
|
||||
ECharts,
|
||||
EChartsOption,
|
||||
SetOptionOpts,
|
||||
ComposeOption,
|
||||
} from 'echarts/core';
|
||||
|
||||
import type {
|
||||
LineSeriesOption,
|
||||
BarSeriesOption,
|
||||
PieSeriesOption,
|
||||
CandlestickSeriesOption,
|
||||
ScatterSeriesOption,
|
||||
} from 'echarts/charts';
|
||||
|
||||
import type {
|
||||
TitleComponentOption,
|
||||
TooltipComponentOption,
|
||||
LegendComponentOption,
|
||||
GridComponentOption,
|
||||
DataZoomComponentOption,
|
||||
ToolboxComponentOption,
|
||||
MarkLineComponentOption,
|
||||
MarkPointComponentOption,
|
||||
MarkAreaComponentOption,
|
||||
DatasetComponentOption,
|
||||
} from 'echarts/components';
|
||||
|
||||
// 注册必需的组件
|
||||
echarts.use([
|
||||
// 图表类型
|
||||
LineChart,
|
||||
BarChart,
|
||||
PieChart,
|
||||
CandlestickChart,
|
||||
ScatterChart,
|
||||
// 组件
|
||||
TitleComponent,
|
||||
TooltipComponent,
|
||||
LegendComponent,
|
||||
GridComponent,
|
||||
DataZoomComponent,
|
||||
ToolboxComponent,
|
||||
MarkLineComponent,
|
||||
MarkPointComponent,
|
||||
MarkAreaComponent,
|
||||
DatasetComponent,
|
||||
TransformComponent,
|
||||
// 渲染器
|
||||
CanvasRenderer,
|
||||
]);
|
||||
|
||||
// 组合类型定义(用于 TypeScript 类型推断)
|
||||
export type ECOption = ComposeOption<
|
||||
| LineSeriesOption
|
||||
| BarSeriesOption
|
||||
| PieSeriesOption
|
||||
| CandlestickSeriesOption
|
||||
| ScatterSeriesOption
|
||||
| TitleComponentOption
|
||||
| TooltipComponentOption
|
||||
| LegendComponentOption
|
||||
| GridComponentOption
|
||||
| DataZoomComponentOption
|
||||
| ToolboxComponentOption
|
||||
| MarkLineComponentOption
|
||||
| MarkPointComponentOption
|
||||
| MarkAreaComponentOption
|
||||
| DatasetComponentOption
|
||||
>;
|
||||
|
||||
// 导出
|
||||
export { echarts };
|
||||
export type { ECharts, EChartsOption, SetOptionOpts };
|
||||
|
||||
// 默认导出(兼容 import * as echarts from 'echarts' 的用法)
|
||||
export default echarts;
|
||||
Reference in New Issue
Block a user