diff --git a/src/components/kline-chart.tsx b/src/components/kline-chart.tsx index 0d7ab16..b9542a0 100644 --- a/src/components/kline-chart.tsx +++ b/src/components/kline-chart.tsx @@ -53,8 +53,8 @@ const GRID = "#e4e4e7"; const MARKER = "#f59e0b"; // MA / 指标线配色 -const MA_COLORS = ["#f59e0b", "#3b82f6", "#a855f7", "#10b981"]; -const MA_PERIODS = [5, 10, 20, 30]; +const MA_COLORS = ["#f59e0b", "#3b82f6", "#a855f7"]; +const MA_PERIODS = [5, 10, 20]; const MACD_DIF = "#3b82f6"; const MACD_DEA = "#f59e0b"; const RSI_COLOR = "#a855f7"; @@ -331,12 +331,37 @@ export function KLineChart({ data, mode, hasAddedDate, indicators }: Props) { chart.timeScale().fitContent(); } + // 颜色图例:根据启用的指标生成 + const legend: { color: string; label: string }[] = []; + if (indicators.ma) { + MA_PERIODS.forEach((p, i) => legend.push({ color: MA_COLORS[i % MA_COLORS.length], label: `MA${p}` })); + } + if (indicators.macd) { + legend.push({ color: MACD_DIF, label: "DIF" }, { color: MACD_DEA, label: "DEA" }); + } + if (indicators.rsi) legend.push({ color: RSI_COLOR, label: "RSI14" }); + if (indicators.kdj) { + legend.push({ color: KDJ_K, label: "K" }, { color: KDJ_D, label: "D" }, { color: KDJ_J, label: "J" }); + } + return ( -
+
+
+ {legend.length > 0 && ( +
+ {legend.map((l) => ( + + + {l.label} + + ))} +
+ )} +
); } diff --git a/src/routes/stock.$code.tsx b/src/routes/stock.$code.tsx index 310135c..2a04dd3 100755 --- a/src/routes/stock.$code.tsx +++ b/src/routes/stock.$code.tsx @@ -87,7 +87,7 @@ function StockDetail() { const [dailyTableDays, setDailyTableDays] = useState(7); const [chartRange, setChartRange] = useState(90); // 默认近3月 const [chartMode, setChartMode] = useState<"line" | "candle">("candle"); // 折线/蜡烛,默认蜡烛 - const [indicators, setIndicators] = useState({ ma: true, macd: true, rsi: false, kdj: false }); + const [indicators, setIndicators] = useState({ ma: true, macd: false, rsi: false, kdj: false }); const toggleIndicator = (key: keyof typeof indicators) => setIndicators((prev) => ({ ...prev, [key]: !prev[key] })); const [loading, setLoading] = useState(true);