52 lines
1.2 KiB
TypeScript
52 lines
1.2 KiB
TypeScript
import { useEffect, useRef } from "react";
|
|
import * as echarts from "echarts/core";
|
|
import { BarChart, LineChart, PieChart } from "echarts/charts";
|
|
import {
|
|
GridComponent,
|
|
TooltipComponent,
|
|
LegendComponent,
|
|
AriaComponent,
|
|
DataZoomComponent,
|
|
} from "echarts/components";
|
|
import { SVGRenderer } from "echarts/renderers";
|
|
import type { EChartsCoreOption } from "echarts/core";
|
|
echarts.use([
|
|
BarChart,
|
|
LineChart,
|
|
PieChart,
|
|
GridComponent,
|
|
TooltipComponent,
|
|
LegendComponent,
|
|
AriaComponent,
|
|
DataZoomComponent,
|
|
SVGRenderer,
|
|
]);
|
|
export default function Chart({
|
|
option,
|
|
label,
|
|
}: {
|
|
option: EChartsCoreOption;
|
|
label: string;
|
|
}) {
|
|
const ref = useRef<HTMLDivElement>(null);
|
|
useEffect(() => {
|
|
if (!ref.current) return;
|
|
const chart = echarts.init(ref.current, undefined, { renderer: "svg" });
|
|
chart.setOption({ ...option, aria: { enabled: true } });
|
|
const observer = new ResizeObserver(() => chart.resize());
|
|
observer.observe(ref.current);
|
|
return () => {
|
|
observer.disconnect();
|
|
chart.dispose();
|
|
};
|
|
}, [option]);
|
|
return (
|
|
<div
|
|
ref={ref}
|
|
role="img"
|
|
aria-label={label}
|
|
className="h-64 min-w-0 w-full"
|
|
/>
|
|
);
|
|
}
|