fix echart

frontend/src/components/common/EChart.tsx

@@ -29,7 +29,9 @@ export function EChart({ option, className = "h-80 w-full" }: EChartProps) {
       return;
     }
 
-    chartRef.current.setOption(option, { notMerge: false, lazyUpdate: true });
+    chartRef.current.clear();
+    chartRef.current.setOption(option, { notMerge: true, lazyUpdate: false });
+    chartRef.current.resize();
   }, [option]);
 
   useEffect(() => {

frontend/src/components/common/EChart.tsx.bak2

@@ -0,0 +1,49 @@
+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);
+  const chartRef = useRef<echarts.EChartsType | null>(null);
+
+  useEffect(() => {
+    if (!ref.current || chartRef.current) {
+      return;
+    }
+
+    chartRef.current = echarts.init(ref.current);
+
+    return () => {
+      chartRef.current?.dispose();
+      chartRef.current = null;
+    };
+  }, []);
+
+  useEffect(() => {
+    if (!chartRef.current) {
+      return;
+    }
+
+    chartRef.current.setOption(option, { notMerge: false, lazyUpdate: true });
+  }, [option]);
+
+  useEffect(() => {
+    if (!ref.current || !chartRef.current) {
+      return;
+    }
+
+    const observer = new ResizeObserver(() => chartRef.current?.resize());
+    observer.observe(ref.current);
+
+    return () => {
+      observer.disconnect();
+    };
+  }, []);
+
+  return <div ref={ref} className={className} />;
+}