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:
@@ -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 ?? {}}
|
||||
|
||||
Reference in New Issue
Block a user