yuxuanhui
71 lines
1.7 KiB
TypeScript
71 lines
1.7 KiB
TypeScript
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"
|
|
/>
|
|
)
|
|
}
|