feat(web): 完善选股详情图表与案例图

2026-09-01 13:37:19 +08:00
parent 9145fe4b2c
commit feb8fd4feb
27 changed files with 788 additions and 25 deletions
@@ -0,0 +1,70 @@
+import { useEffect, useRef } from "react"
+import { BarChart, CandlestickChart, LineChart } from "echarts/charts"
+import {
+  AxisPointerComponent,
+  DataZoomComponent,
+  GridComponent,
+  LegendComponent,
+  TitleComponent,
+  TooltipComponent,
+} from "echarts/components"
+import * as echarts from "echarts/core"
+import { CanvasRenderer } from "echarts/renderers"
+
+import type { SelectionChart as SelectionChartData } from "../api/selection.types"
+import { buildSelectionChartOption } from "./selection-chart-option"
+
+echarts.use([
+  AxisPointerComponent,
+  BarChart,
+  CanvasRenderer,
+  CandlestickChart,
+  DataZoomComponent,
+  GridComponent,
+  LegendComponent,
+  LineChart,
+  TitleComponent,
+  TooltipComponent,
+])
+
+interface SelectionChartProps {
+  chart: SelectionChartData
+}
+
+export function SelectionChart({ chart }: SelectionChartProps) {
+  const containerRef = useRef<HTMLDivElement>(null)
+  const instanceRef = useRef<echarts.EChartsType | null>(null)
+
+  useEffect(() => {
+    const container = containerRef.current
+    if (!container) return
+
+    const instance = echarts.init(container, undefined, {
+      renderer: "canvas",
+    })
+    instanceRef.current = instance
+    const observer = new ResizeObserver(() => instance.resize())
+    observer.observe(container)
+
+    return () => {
+      observer.disconnect()
+      instance.dispose()
+      instanceRef.current = null
+    }
+  }, [])
+
+  useEffect(() => {
+    instanceRef.current?.setOption(buildSelectionChartOption(chart.points), {
+      notMerge: true,
+    })
+  }, [chart.points])
+
+  return (
+    <div
+      aria-label={`${chart.name} 日线、成交量和 KDJ 图表`}
+      className="h-[620px] min-h-[520px] w-full"
+      ref={containerRef}
+      role="img"
+    />
+  )
+}