zhixing-web/src/features/selection/components/pattern-case-image.tsx

@@ -16,7 +16,7 @@ export function PatternCaseImage({ score }: PatternCaseImageProps) {
     patternCaseImageById[matchedCase.id as keyof typeof patternCaseImageById]
 
   return (
-    <section aria-labelledby="best-pattern-case" className="mt-4">
+    <section aria-labelledby="best-pattern-case" className="mt-2">
       <div className="mb-2 flex items-baseline justify-between gap-3">
         <h3 className="text-xs font-medium" id="best-pattern-case">
           最接近案例：{matchedCase.name}
@@ -32,7 +32,7 @@ export function PatternCaseImage({ score }: PatternCaseImageProps) {
       ) : (
         <img
           alt={`${matchedCase.name} B1 参考案例图`}
-          className="aspect-2/1 w-full rounded-md border border-border/60 object-contain"
+          className="h-40 w-full rounded-md border border-border/60 object-contain"
           loading="lazy"
           onError={() => setFailedSource(source)}
           src={source}

zhixing-web/src/features/selection/components/selection-chart-option.test.ts

@@ -44,6 +44,7 @@ describe("selection chart option", () => {
     })
     expect(dataZoom[1].xAxisIndex).toEqual([0, 1, 2])
     expect(legends[0]?.data).toEqual(["知行白线", "知行黄线"])
+    expect(legends[1]?.data).toEqual(["J"])
     expect(series.find((item) => item.name === "日线")).toMatchObject({
       xAxisIndex: 0,
       yAxisIndex: 0,
@@ -62,7 +63,16 @@ describe("selection chart option", () => {
       xAxisIndex: 1,
       yAxisIndex: 1,
     })
-    expect(series.filter((item) => item.xAxisIndex === 2)).toHaveLength(3)
+    expect(series.filter((item) => item.xAxisIndex === 2)).toEqual([
+      expect.objectContaining({
+        data: points.map((item) => item.j),
+        name: "J",
+        xAxisIndex: 2,
+        yAxisIndex: 2,
+      }),
+    ])
+    expect(series.find((item) => item.name === "K")).toBeUndefined()
+    expect(series.find((item) => item.name === "D")).toBeUndefined()
     expect(series[0].data[0]).toEqual([10, 10.5, 9, 11])
   })
 
@@ -91,7 +101,7 @@ describe("selection chart option", () => {
     expect(candle).toHaveLength(4)
     expect(candle.every(Number.isNaN)).toBe(true)
     expect(volume?.data[0]).toMatchObject({ value: null })
-    expect(lines).toHaveLength(5)
+    expect(lines).toHaveLength(3)
     for (const indicator of lines) {
       expect(indicator.data).toEqual([null])
     }

zhixing-web/src/features/selection/components/selection-chart-option.ts

@@ -35,7 +35,7 @@ export type SelectionChartOption = ComposeOption<
 /**
  * Build the three-grid financial chart configuration from aligned API points.
  *
- * @param points Ascending qfq OHLCV, KDJ, and Zhixing-line points from the API.
+ * @param points Ascending qfq OHLCV, J, and Zhixing-line points from the API.
  * @returns One ECharts option with synchronized axes and an exact 120-point window.
  */
 export function buildSelectionChartOption(
@@ -75,7 +75,7 @@ export function buildSelectionChartOption(
         top: 8,
       },
       {
-        data: ["K", "D", "J"],
+        data: ["J"],
         right: 20,
         top: "73%",
       },
@@ -126,25 +126,25 @@ export function buildSelectionChartOption(
         xAxisIndex: 1,
         yAxisIndex: 1,
       },
-      ...(["k", "d", "j"] as const).map((key, index): LineSeriesOption => ({
+      {
         connectNulls: false,
-        data: points.map((point) => point[key]),
-        name: key.toUpperCase(),
+        data: points.map((point) => point.j),
+        lineStyle: {
+          color: "#9333ea",
+          width: 1.5,
+        },
+        name: "J",
         showSymbol: false,
         smooth: false,
         type: "line",
         xAxisIndex: 2,
         yAxisIndex: 2,
-        lineStyle: {
-          color: ["#2563eb", "#d97706", "#9333ea"][index],
-          width: 1.5,
-        },
-      })),
+      },
     ],
     title: [
       { left: 12, text: "日线", textStyle: { fontSize: 12 }, top: 8 },
       { left: 72, text: "成交量", textStyle: { fontSize: 12 }, top: "54%" },
-      { left: 72, text: "KDJ", textStyle: { fontSize: 12 }, top: "72%" },
+      { left: 72, text: "J", textStyle: { fontSize: 12 }, top: "72%" },
     ],
     tooltip: {
       axisPointer: { type: "cross" },

zhixing-web/src/features/selection/components/selection-chart.test.tsx

@@ -90,7 +90,7 @@ describe("SelectionChart", () => {
 
     expect(
       screen.getByRole("img", {
-        name: "药明康德 日线、知行黄白线、成交量和 KDJ 图表",
+        name: "药明康德 日线、知行黄白线、成交量和 J 线图表",
       }),
     ).toBeInTheDocument()
     expect(chartMocks.init).toHaveBeenCalledTimes(1)

zhixing-web/src/features/selection/components/selection-chart.tsx

@@ -64,7 +64,7 @@ export function SelectionChart({ chart, className }: SelectionChartProps) {
 
   return (
     <div
-      aria-label={`${chart.name} 日线、知行黄白线、成交量和 KDJ 图表`}
+      aria-label={`${chart.name} 日线、知行黄白线、成交量和 J 线图表`}
       className={cn("h-full min-h-70 w-full", className)}
       ref={containerRef}
       role="img"