37 lines
1.0 KiB
TypeScript
37 lines
1.0 KiB
TypeScript
import { useEffect, useRef } from 'react';
|
|
import type { EChartsOption } from 'echarts';
|
|
import { BarChart, LineChart, PieChart } from 'echarts/charts';
|
|
import { GridComponent, LegendComponent, TooltipComponent } from 'echarts/components';
|
|
import { init, use } from 'echarts/core';
|
|
import { CanvasRenderer } from 'echarts/renderers';
|
|
|
|
use([BarChart, LineChart, PieChart, GridComponent, LegendComponent, TooltipComponent, CanvasRenderer]);
|
|
|
|
type ChartProps = {
|
|
option: EChartsOption;
|
|
height?: number;
|
|
};
|
|
|
|
export function Chart({ option, height = 280 }: ChartProps) {
|
|
const chartRef = useRef<HTMLDivElement | null>(null);
|
|
|
|
useEffect(() => {
|
|
if (!chartRef.current) {
|
|
return undefined;
|
|
}
|
|
|
|
const chart = init(chartRef.current);
|
|
chart.setOption(option);
|
|
|
|
const resizeObserver = new ResizeObserver(() => chart.resize());
|
|
resizeObserver.observe(chartRef.current);
|
|
|
|
return () => {
|
|
resizeObserver.disconnect();
|
|
chart.dispose();
|
|
};
|
|
}, [option]);
|
|
|
|
return <div className="ui-chart" ref={chartRef} style={{ height }} />;
|
|
}
|