feat(web): K线图库对比 —— TradingView Lightweight Charts 实现 + 双库切换

- 按确认方案「两套实现并存对比」:
  - npm 依赖 lightweight-charts@4.2.3(v3 §21 推荐库)
  - components/StockChart/chartTypes.ts:共享 props 接口
  - CandleChart.tsx(ECharts 版,重构复用共享类型)+ CandleChartLW.tsx
    (Lightweight 版:蜡烛+成交量副刻度+MA+成交实心箭头/未成交信号圆点 markers)
  - StockChart.tsx wrapper;个股页顶部「ECharts / Lightweight」切换(默认 Lightweight)
- /stocks/600519.SH 冒烟 200;tsc --noEmit 通过
This commit is contained in:
Simon
2026-09-09 07:21:07 +08:00
parent 37510c1b89
commit 03fb463216
7 changed files with 218 additions and 21 deletions
+10 -2
View File
@@ -18,7 +18,8 @@ import {
Empty,
SkeletonLines,
} from "@/components/ui";
import { CandleChart, type CandleDatum } from "@/components/StockChart/CandleChart";
import type { CandleDatum } from "@/components/StockChart/chartTypes";
import { StockChart, type ChartLibrary } from "@/components/StockChart/StockChart";
export default function StockResearchPage() {
const params = useParams<{ symbol: string }>();
@@ -28,6 +29,7 @@ export default function StockResearchPage() {
const [signalMarkers, setSignalMarkers] = useState<ChartMarker[]>([]);
const [selectionMarkers, setSelectionMarkers] = useState<ChartMarker[]>([]);
const [adjust, setAdjust] = useState<"none" | "qfq" | "hfq">("none");
const [chartLib, setChartLib] = useState<ChartLibrary>("lightweight");
const [loading, setLoading] = useState(true);
const [error, setError] = useState("");
@@ -80,6 +82,11 @@ export default function StockResearchPage() {
}
actions={
<div className="row" style={{ gap: 6 }}>
{(["echarts", "lightweight"] as const).map((l) => (
<Btn key={l} variant={chartLib === l ? "primary" : undefined} onClick={() => setChartLib(l)}>
{l === "echarts" ? "ECharts" : "Lightweight"}
</Btn>
))}
{(["none", "qfq", "hfq"] as const).map((m) => (
<Btn
key={m}
@@ -113,7 +120,8 @@ export default function StockResearchPage() {
{candles.length === 0 ? (
<Empty icon="chartLine" title="无 K 线数据" hint="该区间/口径没有行情(可能停牌或未同步)。" />
) : (
<CandleChart
<StockChart
library={chartLib}
data={candles}
volume={chart?.volume ?? []}
indicators={chart?.indicators ?? {}}