- 后端业务 API:GET /api/stocks(搜索/分页)、GET /api/factors(因子目录)、POST /api/factor-tests 与 /api/backtests(Research Spec 驱动同步执行)、GET /api/backtests/last;Annotated 依赖注入 + CORS(dev) - Repository 批量查询 get_range_many(研究装配一次查询,避免逐只拉取) - 前端 frontend/web:Next.js 15(TS) + ECharts —— 总览 / 股票池 / 因子研究(IC·RankIC·分层展示) / 回测(净值·回撤·月度·持仓·未建模标注) - 前端只消费业务 API 与标准化 BacktestResult,无 Qlib/SQL 概念泄漏 - 真实数据:同步 20 只权重股 2023-2024 日线(9680 根)支撑截面研究 - 验证:API 集成测试 8 项(DTO 校验/装配/引擎/标准结果,内存 repo 全链路)+ 全量 pytest 68 passed;前端 tsc + next build 通过;无头浏览器端到端(factors/backtest 页面渲染后端数据) - ruff clean
61 lines
1.5 KiB
TypeScript
61 lines
1.5 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useRef } from "react";
|
|
import * as echarts from "echarts";
|
|
|
|
export interface XY {
|
|
date: string;
|
|
value: number;
|
|
}
|
|
|
|
export function LineChart({
|
|
title,
|
|
data,
|
|
color = "#38bdf8",
|
|
}: {
|
|
title: string;
|
|
data: XY[];
|
|
color?: string;
|
|
}) {
|
|
const ref = useRef<HTMLDivElement>(null);
|
|
|
|
useEffect(() => {
|
|
if (!ref.current || data.length === 0) return;
|
|
const chart = echarts.init(ref.current);
|
|
chart.setOption({
|
|
title: { text: title, textStyle: { color: "#e2e8f0", fontSize: 13 } },
|
|
tooltip: { trigger: "axis" },
|
|
grid: { left: 60, right: 20, top: 40, bottom: 30 },
|
|
xAxis: {
|
|
type: "category",
|
|
data: data.map((p) => p.date),
|
|
axisLabel: { color: "#94a3b8", fontSize: 10 },
|
|
},
|
|
yAxis: {
|
|
type: "value",
|
|
scale: true,
|
|
axisLabel: { color: "#94a3b8" },
|
|
splitLine: { lineStyle: { color: "#334155" } },
|
|
},
|
|
series: [
|
|
{
|
|
type: "line",
|
|
showSymbol: false,
|
|
data: data.map((p) => p.value),
|
|
lineStyle: { color, width: 1.6 },
|
|
itemStyle: { color },
|
|
},
|
|
],
|
|
});
|
|
const onResize = () => chart.resize();
|
|
window.addEventListener("resize", onResize);
|
|
return () => {
|
|
window.removeEventListener("resize", onResize);
|
|
chart.dispose();
|
|
};
|
|
}, [data, color, title]);
|
|
|
|
if (data.length === 0) return <div className="muted">暂无数据</div>;
|
|
return <div ref={ref} style={{ height: 360, width: "100%" }} />;
|
|
}
|