46 lines
1.2 KiB
TypeScript
46 lines
1.2 KiB
TypeScript
import { useEffect, useRef } from "react";
|
|
import * as echarts from "echarts/core";
|
|
import { BarChart, LineChart, HeatmapChart } from "echarts/charts";
|
|
import {
|
|
GridComponent,
|
|
TooltipComponent,
|
|
LegendComponent,
|
|
VisualMapComponent,
|
|
AriaComponent,
|
|
} from "echarts/components";
|
|
import { CanvasRenderer } from "echarts/renderers";
|
|
echarts.use([
|
|
BarChart,
|
|
LineChart,
|
|
HeatmapChart,
|
|
GridComponent,
|
|
TooltipComponent,
|
|
LegendComponent,
|
|
VisualMapComponent,
|
|
AriaComponent,
|
|
CanvasRenderer,
|
|
]);
|
|
export function Chart({
|
|
option,
|
|
label,
|
|
onClick,
|
|
}: {
|
|
option: echarts.EChartsCoreOption;
|
|
label: string;
|
|
onClick?: (name: string) => void;
|
|
}) {
|
|
const ref = useRef<HTMLDivElement>(null);
|
|
useEffect(() => {
|
|
const chart = echarts.init(ref.current!);
|
|
chart.setOption({ ...option, aria: { enabled: true }, animation: false });
|
|
if (onClick) chart.on("click", (p) => onClick(p.name));
|
|
const observer = new ResizeObserver(() => chart.resize());
|
|
observer.observe(ref.current!);
|
|
return () => {
|
|
observer.disconnect();
|
|
chart.dispose();
|
|
};
|
|
}, [option, onClick]);
|
|
return <div className="chart" ref={ref} role="img" aria-label={label} />;
|
|
}
|