图表增加了适配窗口大小

app/app/(admin)/admin/ana/usage-by-model-chart.tsx

@@ -146,6 +146,20 @@ function EchartsComponent({ currentDate, setCurrentDate }: ComponentProps) {
     };
   }, [currentDate, searchDate]); // 空数组作为第二个参数，表示仅在组件挂载和卸载时执行
 
+  useEffect(() => {
+    const handleResize = () => {
+      console.log("窗口大小变化");
+      let chartDom = document.getElementById("usage-by-model-chart");
+      if (!chartDom) return;
+      const myChart = echarts.getInstanceByDom(chartDom);
+      myChart?.resize();
+    };
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+
   return (
     <div
       id="usage-by-model-chart"

app/app/(admin)/admin/ana/user-by-map.tsx

@@ -12,8 +12,9 @@ import Script from "next/script";
 
 import * as echarts from "echarts";
 // var echarts = require('echarts');
-require("echarts");
-require("echarts/extension/bmap/bmap");
+import "echarts/extension/bmap/bmap";
+// require("echarts");
+// require("echarts/extension/bmap/bmap");
 
 interface DataItem {
   name: string;
@@ -21,6 +22,10 @@ interface DataItem {
 }
 
 export default function UserByMap() {
+  const userByMapChart = useRef(null);
+
+  useEffect(() => {
+    if (!userByMapChart.current) return;
     const data: DataItem[] = [
       { name: "海门", value: 9 },
       { name: "鄂尔多斯", value: 12 },
@@ -609,18 +614,32 @@ export default function UserByMap() {
         },
       ],
     };
-  useEffect(() => {
     const loadEcharts = () => {
       let chartDom = document.getElementById("userByMapChart");
+      if (!chartDom) return;
       let myChart = echarts.init(chartDom, "default", {
         renderer: "canvas",
         useDirtyRect: false,
       });
-      option && myChart.setOption(option);
+      option && myChart?.setOption(option);
     };
 
     loadEcharts();
-  }, [option]);
+  }, []);
+
+  useEffect(() => {
+    const handleResize = () => {
+      let chartDom = document.getElementById("userByMapChart");
+      if (!chartDom) return;
+      const myChart = echarts.getInstanceByDom(chartDom);
+      myChart?.resize();
+    };
+    handleResize();
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
 
   return (
     <div>
@@ -636,8 +655,9 @@ export default function UserByMap() {
       {/*/>*/}
 
       <div
+        ref={userByMapChart}
         id="userByMapChart"
-        style={{ width: "960px", height: "500px" }}
+        style={{ width: "1080px", height: "600px" }}
       ></div>
       <Script
         src="https://api.map.baidu.com/api?v=3.0&ak=19e9FKQC49u5uQe4CBqan9ER2mYhQ3ip&callback=onBMapCallback"