yuxuanhui
37 lines
2.5 KiB
Markdown
37 lines
2.5 KiB
Markdown
# Apache ECharts 复合行情图研究
|
||
|
||
## 结论
|
||
|
||
本任务使用 `echarts` 本体并通过 `echarts/core` 按需注册，不引入 React 包装库。一个 ECharts 实例通过三个 `grid`、三组 category `xAxis`/value `yAxis`，以及分别绑定索引的 candlestick、bar、line series 组合日线、成交量和 KDJ。`inside` 与 `slider` 两个 `dataZoom` 同时控制三个 x 轴，使三个区域保持同一数据窗口。
|
||
|
||
前端组件在 DOM 挂载后调用 `echarts.init` 和 `setOption`，容器尺寸变化时调用 `resize`，卸载时调用 `dispose`。配置与数据转换应提取为纯函数，便于在 Vitest/jsdom 中验证 series、axis、数据顺序和初始缩放，而不依赖 Canvas 像素结果。
|
||
|
||
## 所需模块
|
||
|
||
- charts：`CandlestickChart`、`BarChart`、`LineChart`
|
||
- components：`GridComponent`、`TooltipComponent`、`LegendComponent`、`DataZoomComponent`
|
||
- renderer：`CanvasRenderer`
|
||
- 类型：使用 ECharts 提供的 `ComposeOption` 组合已注册组件的 option 类型
|
||
|
||
## 数据约定
|
||
|
||
- K 线数据顺序为 `[open, close, low, high]`。
|
||
- 日线、成交量、K、D、J 共用升序交易日 category 数据。
|
||
- 后端最多返回 250 点；前端用 category 的 `startValue` 和 `endValue` 精确选择最后 120 个点，不足 120 点时展示全部。
|
||
- 三组 series 通过 `xAxisIndex`/`yAxisIndex` 绑定各自 grid；两个 dataZoom 的 `xAxisIndex` 同时包含 `[0, 1, 2]`。
|
||
- OHLC 不完整的日期使用 ECharts 缺失数据占位，不绘制蜡烛；volume/K/D/J 的空值保持空点，KDJ series 设置 `connectNulls: false`，禁止跨缺失日期连线。
|
||
|
||
## 资料来源
|
||
|
||
2026-09-01 通过 Context7 查询官方 Apache ECharts 文档 `/apache/echarts-doc`。相关官方资料包括：
|
||
|
||
- `en/tutorial/data-zoom.md`：slider 与 inside dataZoom 组合，以及用 axis index 控制指定轴。
|
||
- `en/option/component/data-zoom.md`：一个 dataZoom 同时控制多个轴。
|
||
- `slides/arch-brief/asset/ec-demo/list-sample1.html`：candlestick、volume、多 grid、多 xAxis/yAxis 和 dataZoom 的金融图表示例。
|
||
- `en/tutorial/basic-concepts-overview.md`：`echarts.init`、option、多个 axis/series 与 `setOption` 的基本实例生命周期。
|
||
- `zh/tutorial/whats-new-in-echarts-v5.md`：按需引入时通过 `ComposeOption` 获得严格 TypeScript 类型。
|
||
|
||
## 本仓库约束
|
||
|
||
前端为 React 19、TypeScript strict、Vite 8；服务器状态应通过 TanStack Query 获取，API 走同源 `/api/v1`。图表属于 `selection` feature，不提升为 shared primitive。
|