yuxuanhui
2.5 KiB
2.5 KiB
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。