新建回测系统，并提交
This commit is contained in:
337
templates/index.html
Normal file
337
templates/index.html
Normal file
@@ -0,0 +1,337 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>回测结果查看器</title>
|
||||
<link rel="stylesheet" href="/static/css/style.css">
|
||||
<!-- Chart.js for 图表 -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<header>
|
||||
<h1>📊 A股回测结果查看器</h1>
|
||||
<p class="subtitle">策略回测数据分析与可视化平台</p>
|
||||
</header>
|
||||
|
||||
<!-- 标签页导航 -->
|
||||
<nav class="tabs">
|
||||
<button class="tab-btn active" data-tab="optimization">参数优化对比</button>
|
||||
<button class="tab-btn" data-tab="trades">交易明细</button>
|
||||
<button class="tab-btn" data-tab="equity">资金曲线</button>
|
||||
<button class="tab-btn" data-tab="comparison">多策略对比</button>
|
||||
<button class="tab-btn" data-tab="analytics">统计分析</button>
|
||||
<button class="tab-btn" data-tab="heatmap">参数热力图</button>
|
||||
</nav>
|
||||
|
||||
<!-- 参数优化对比页面 -->
|
||||
<div id="optimization" class="tab-content active">
|
||||
<div class="section-header">
|
||||
<h2>参数优化结果对比</h2>
|
||||
<div class="controls">
|
||||
<label>选择优化结果：
|
||||
<select id="opt-file-select">
|
||||
<option value="">加载中...</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>排序方式：
|
||||
<select id="opt-sort-select">
|
||||
<option value="sharpe">夏普比率↓</option>
|
||||
<option value="total_return">总收益↓</option>
|
||||
<option value="annual_return">年化收益↓</option>
|
||||
<option value="max_drawdown">最大回撤↑</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>显示数量：
|
||||
<input type="number" id="opt-limit" value="20" min="5" max="100" step="5">
|
||||
</label>
|
||||
<button id="opt-refresh-btn" class="btn-primary">刷新数据</button>
|
||||
<button id="opt-export-btn" class="btn-secondary">导出Excel</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stats-cards">
|
||||
<div class="stat-card">
|
||||
<h3>参数组合总数</h3>
|
||||
<p class="stat-value" id="opt-total">-</p>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<h3>最佳夏普比率</h3>
|
||||
<p class="stat-value" id="opt-best-sharpe">-</p>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<h3>最佳总收益</h3>
|
||||
<p class="stat-value" id="opt-best-return">-</p>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<h3>最小回撤</h3>
|
||||
<p class="stat-value" id="opt-worst-dd">-</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="table-container">
|
||||
<table id="opt-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>排名</th>
|
||||
<th>短期均线</th>
|
||||
<th>长期均线</th>
|
||||
<th>持有天数</th>
|
||||
<th>仓位比例</th>
|
||||
<th>总收益率</th>
|
||||
<th>年化收益</th>
|
||||
<th>夏普比率</th>
|
||||
<th>最大回撤</th>
|
||||
<th>资金利用率</th>
|
||||
<th>交易次数</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="opt-tbody">
|
||||
<tr><td colspan="11">请选择优化结果文件</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 交易明细页面 -->
|
||||
<div id="trades" class="tab-content">
|
||||
<div class="section-header">
|
||||
<h2>交易明细记录</h2>
|
||||
<div class="controls">
|
||||
<label>选择交易记录：
|
||||
<select id="trades-file-select">
|
||||
<option value="">加载中...</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>筛选：
|
||||
<select id="trades-filter">
|
||||
<option value="all">全部交易</option>
|
||||
<option value="win">盈利交易</option>
|
||||
<option value="loss">亏损交易</option>
|
||||
</select>
|
||||
</label>
|
||||
<button id="trades-refresh-btn" class="btn-primary">刷新数据</button>
|
||||
<button id="trades-export-btn" class="btn-secondary">导出Excel</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stats-cards">
|
||||
<div class="stat-card">
|
||||
<h3>总交易次数</h3>
|
||||
<p class="stat-value" id="trades-total">-</p>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<h3>胜率</h3>
|
||||
<p class="stat-value" id="trades-win-rate">-</p>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<h3>总盈亏</h3>
|
||||
<p class="stat-value" id="trades-profit">-</p>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<h3>平均盈亏</h3>
|
||||
<p class="stat-value" id="trades-avg">-</p>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<h3>最大盈利</h3>
|
||||
<p class="stat-value" id="trades-max-win">-</p>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<h3>最大亏损</h3>
|
||||
<p class="stat-value" id="trades-max-loss">-</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="table-container">
|
||||
<table id="trades-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>序号</th>
|
||||
<th>股票代码</th>
|
||||
<th>买入价</th>
|
||||
<th>卖出价</th>
|
||||
<th>数量</th>
|
||||
<th>盈亏比例</th>
|
||||
<th>盈亏金额</th>
|
||||
<th>结果</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="trades-tbody">
|
||||
<tr><td colspan="8">请选择交易记录文件</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 资金曲线页面 -->
|
||||
<div id="equity" class="tab-content">
|
||||
<div class="section-header">
|
||||
<h2>资金曲线可视化</h2>
|
||||
<div class="controls">
|
||||
<label>选择策略：
|
||||
<select id="equity-file-select">
|
||||
<option value="">加载中...</option>
|
||||
</select>
|
||||
</label>
|
||||
<button id="equity-refresh-btn" class="btn-primary">刷新数据</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stats-cards">
|
||||
<div class="stat-card">
|
||||
<h3>初始资金</h3>
|
||||
<p class="stat-value" id="equity-initial">-</p>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<h3>最终资金</h3>
|
||||
<p class="stat-value" id="equity-final">-</p>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<h3>总收益率</h3>
|
||||
<p class="stat-value" id="equity-return">-</p>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<h3>最大回撤</h3>
|
||||
<p class="stat-value" id="equity-dd">-</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="chart-container">
|
||||
<canvas id="equity-chart"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 多策略对比页面 -->
|
||||
<div id="comparison" class="tab-content">
|
||||
<div class="section-header">
|
||||
<h2>多策略对比分析</h2>
|
||||
<div class="controls">
|
||||
<label>选择策略1：
|
||||
<select id="compare-strategy1">
|
||||
<option value="">请选择...</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>选择策略2：
|
||||
<select id="compare-strategy2">
|
||||
<option value="">请选择...</option>
|
||||
</select>
|
||||
</label>
|
||||
<button id="compare-btn" class="btn-primary">对比分析</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="comparison-grid">
|
||||
<div class="compare-card">
|
||||
<h3>策略1</h3>
|
||||
<div id="strategy1-stats" class="stats-list">
|
||||
<p>请选择策略...</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="compare-card">
|
||||
<h3>对比指标</h3>
|
||||
<div id="comparison-diff" class="stats-list">
|
||||
<p>请选择两个策略...</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="compare-card">
|
||||
<h3>策略2</h3>
|
||||
<div id="strategy2-stats" class="stats-list">
|
||||
<p>请选择策略...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="chart-container">
|
||||
<canvas id="comparison-chart"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 统计分析页面 -->
|
||||
<div id="analytics" class="tab-content">
|
||||
<div class="section-header">
|
||||
<h2>统计分析与可视化</h2>
|
||||
<div class="controls">
|
||||
<label>选择交易记录：
|
||||
<select id="analytics-file-select">
|
||||
<option value="">加载中...</option>
|
||||
</select>
|
||||
</label>
|
||||
<button id="analytics-refresh-btn" class="btn-primary">刷新数据</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="analytics-grid">
|
||||
<div class="chart-box">
|
||||
<h3>收益分布</h3>
|
||||
<canvas id="profit-distribution-chart"></canvas>
|
||||
</div>
|
||||
<div class="chart-box">
|
||||
<h3>回撤分析</h3>
|
||||
<canvas id="drawdown-chart"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="analytics-grid">
|
||||
<div class="chart-box">
|
||||
<h3>持仓时间分布</h3>
|
||||
<canvas id="holding-period-chart"></canvas>
|
||||
</div>
|
||||
<div class="chart-box">
|
||||
<h3>月度收益</h3>
|
||||
<canvas id="monthly-return-chart"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 参数热力图页面 -->
|
||||
<div id="heatmap" class="tab-content">
|
||||
<div class="section-header">
|
||||
<h2>参数热力图分析</h2>
|
||||
<div class="controls">
|
||||
<label>选择优化结果：
|
||||
<select id="heatmap-file-select">
|
||||
<option value="">加载中...</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>X轴参数：
|
||||
<select id="heatmap-x-param">
|
||||
<option value="param_ma_short">短期均线</option>
|
||||
<option value="param_ma_long">长期均线</option>
|
||||
<option value="param_hold_days">持有天数</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>Y轴参数：
|
||||
<select id="heatmap-y-param">
|
||||
<option value="param_ma_long">长期均线</option>
|
||||
<option value="param_hold_days">持有天数</option>
|
||||
<option value="param_ma_short">短期均线</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>值指标：
|
||||
<select id="heatmap-metric">
|
||||
<option value="sharpe">夏普比率</option>
|
||||
<option value="total_return">总收益</option>
|
||||
<option value="annual_return">年化收益</option>
|
||||
<option value="max_drawdown">最大回撤</option>
|
||||
</select>
|
||||
</label>
|
||||
<button id="heatmap-generate-btn" class="btn-primary">生成热力图</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="chart-container" style="height: 600px;">
|
||||
<canvas id="heatmap-chart"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<p>A股回测系统 v1.0 | 数据来源: strategy_backtest/results/</p>
|
||||
</footer>
|
||||
|
||||
<script src="/static/js/app.js"></script>
|
||||
<script src="/static/js/advanced.js"></script>
|
||||
<script src="/static/js/export.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user