mirror of https://ghfast.top/https://github.com/aeroxw/easy_tdx_max.git synced 2026-09-12 14:34:18 +08:00

Files

T

Justin Gu 6aab7a82b5 feat(web-ui): Vue3 + ECharts 回测前端（单标的 + 组合回测）

独立前端工程（web-ui/），Vue3 + Vite + TypeScript + Pinia + ECharts。
通过 vite proxy 对接后端 /api，开发期无跨域。

单标的回测（/）：
- StrategyPicker: 策略下拉 + 按 schema 动态渲染参数表单
- SymbolPicker: 选标的 + 日期范围取行情（默认3年，结束日=今天）
- KlineChart: K线主图 + 买卖点 markPoint（按 datetime 对齐）
- EquityChart: 净值曲线 + 回撤双轴图
- MetricTable: 19 项绩效指标（收益/风险/交易分组）
- TradeTable: 成交记录表

组合回测（/portfolio）：
- StocksPicker: 多标的输入（增删标签）
- PortfolioCompareChart: 各标的净值叠加（归一化对比）
- PortfolioSummaryTable: 各标的绩效横向对比
- 顶部导航切换单标的/组合

契约修复（/check 审计）：
- fetchBars 归一化 date/datetime 列名（日线返回 date）
- K线买卖点按完整 datetime 对齐（分钟线不再折叠）
- count 上限对齐后端 800
- ECharts 注册内联 dark 主题
- 参数表单空输入不打断编辑
- 网络错误友好提示

技术栈：Vue 3.5 / Vite 8 / TS 6 / Pinia / ECharts（按需引入 725KB）

2026-07-03 03:35:20 +08:00

2.7 KiB

Raw Permalink Blame History

easy-tdx 回测 Web UI

单标的策略回测的可视化前端（Vue3 + ECharts）。对应后端回测 REST API（/api/v1/backtest/*）。

快速开始

需要两个进程：后端 FastAPI（提供回测 + 行情 API）+ 前端 Vite dev server。

# 1. 启动后端（仓库根目录，使用 venv）
venv/Scripts/easy-tdx serve --port 8000

# 2. 启动前端（本目录）
npm install      # 首次
npm run dev      # 启动在 http://localhost:5173

浏览器打开 http://localhost:5173。开发期 /api 请求由 vite proxy 转发到后端 127.0.0.1:8000，无需处理跨域。

功能（MVP-A）

选标的取行情：沪深北市场，日线/周线/分钟线，调 /api/v1/bars
策略选择 + 动态参数表单：下拉选预置策略（MA交叉/MACD/布林/RSI/KDJ），参数表单按后端 schema 自动渲染
回测报告：
- K线主图 + 买卖点标注（ECharts candlestick + markPoint）
- 净值曲线 + 回撤双轴图
- 19 项绩效指标表（收益/风险/交易分组）
- 成交记录表

技术栈

层	技术	说明
框架	Vue 3.5 + TypeScript	Composition API + `<script setup>`
构建	Vite 8	dev proxy 解决跨域
状态	Pinia	策略列表 / OHLCV / 回测结果
路由	Vue Router 4	MVP 仅 `/`，预留组合/寻优/对比
图表	ECharts（按需引入）	candlestick / line / markPoint

目录结构

src/
├── main.ts               # 入口（Pinia + Router）
├── App.vue               # 根布局
├── router.ts             # 路由
├── api.ts                # fetch 封装（strategies/bars/backtest）
├── types.ts              # 后端 schema 的 TS 镜像
├── echarts-setup.ts      # ECharts 按需注册
├── style.css             # 深色金融主题
├── stores/backtest.ts    # 状态管理
├── views/BacktestView.vue    # 主页面（左配置 / 右报告）
└── components/
    ├── StrategyPicker.vue    # 策略下拉 + 动态参数表单
    ├── SymbolPicker.vue      # 选标的取行情
    ├── KlineChart.vue        # K线 + 买卖点
    ├── EquityChart.vue       # 净值 + 回撤
    ├── MetricTable.vue       # 绩效指标表
    └── TradeTable.vue        # 成交记录表

生产构建

npm run build    # 产物在 dist/，由 FastAPI 同源托管（待后续配置）

注意事项

取行情需要网络：/api/v1/bars 通过 TDX 协议取真实行情，需后端能连通行情服务器。无网络时可手动构造 OHLCV（后续可加内联数据粘贴入口）。
A股配色惯例：红涨绿跌（与 ECharts 默认相反），见 echarts-setup.ts。

2.7 KiB Raw Permalink Blame History Unescape Escape