Files
qlib/frontend/web/components/LineChart.tsx
T
Simon 92627f5b6b feat: Phase 3 Web — 业务 API(stocks/factors/backtests)+ Next.js 前端
- 后端业务 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
2026-09-06 17:14:33 +08:00

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%" }} />;
}