32 lines
715 B
TypeScript
32 lines
715 B
TypeScript
import { useEffect, useRef } from "react";
|
|
import * as echarts from "echarts";
|
|
import type { EChartsOption } from "echarts";
|
|
|
|
interface EChartProps {
|
|
option: EChartsOption;
|
|
className?: string;
|
|
}
|
|
|
|
export function EChart({ option, className = "h-80 w-full" }: EChartProps) {
|
|
const ref = useRef<HTMLDivElement | null>(null);
|
|
|
|
useEffect(() => {
|
|
if (!ref.current) {
|
|
return;
|
|
}
|
|
|
|
const chart = echarts.init(ref.current);
|
|
chart.setOption(option);
|
|
|
|
const observer = new ResizeObserver(() => chart.resize());
|
|
observer.observe(ref.current);
|
|
|
|
return () => {
|
|
observer.disconnect();
|
|
chart.dispose();
|
|
};
|
|
}, [option]);
|
|
|
|
return <div ref={ref} className={className} />;
|
|
}
|