降雨量 趋势图 屏幕更改自适应

src/components/MineMonitor/LeftRainfallTrend.vue

@@ -10,7 +10,7 @@
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted, nextTick } from "vue";
 import * as echarts from "echarts";
-import { ChevronUp } from "@vicons/ionicons5";
+import { debounce } from "lodash-es"; // 防抖函数，避免频繁触发resize
 
 const chartRef = ref<HTMLDivElement | null>(null);
 let chartInstance: echarts.ECharts | null = null;
@@ -35,18 +35,6 @@ const initChart = () => {
      tooltip: {
     trigger: 'axis'
   },
-  //  toolbox: {
-  //   show: true,
-  //   feature: {
-  //     dataZoom: {
-  //       yAxisIndex: 'none'
-  //     },
-  //     dataView: { readOnly: false },
-  //     magicType: { type: ['line', 'bar'] },
-  //     restore: {},
-  //     saveAsImage: {}
-  //   }
-  // },
     xAxis: {
       type: "category",
       data: hours,
@@ -55,27 +43,15 @@ const initChart = () => {
     },
     yAxis: {
       name:'mm',
-      // nameLocation:'end',
-      // nameGap: 10, // 单位与Y轴轴线的间距
-      // nameAlign:'left',
-      // axisLabel: {
-      //       offset: 200 // 向左移动10像素
-      //   },
-      // nameTextStyle: { padding: [-30, 0, 0, 0] },
       nameTextStyle: {
-      color: "white", //颜色
-      padding: [0, 30, 0, 0], //间距分别是 上 右 下 左
-  },
+        color: "white",
+        padding: [0, 38, 0, 0],
+      },
       type: "value",
       max: 300,
       axisLine: { lineStyle: { color: "#4f6b95" } },
       axisLabel: { color: "white"},
       splitLine: { lineStyle: { color: "rgba(79, 107, 149, 0.2)" } },
-      // // 添加警戒线标记
-      // axisTick: {
-      //   show: false
-      // }
-
     },
     
     series: [
@@ -83,7 +59,7 @@ const initChart = () => {
         data,
         type: "line",
         smooth: true,
-        showSymbol: false, // 显示数据点显示
+        showSymbol: false,
         areaStyle: {
           color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
             { offset: 0, color: "rgba(54, 162, 235, 0.4)" },
@@ -91,45 +67,69 @@ const initChart = () => {
           ]),
         },
         lineStyle: { color: "rgba(54, 162, 235, 1)", width: 2 },
-      //    markPoint: {// 气泡
-      //   data: [
-      //     { type: 'max', name: 'Max' },
-      //     { type: 'min', name: 'Min' }
-      //   ]
-      // },
-      markLine: {
-         symbol: 'none',
-        // data: [{ type: 'average', name: 'Avg' }]
-        data: warningLines.map(line => ({
-          label: {
-            show: false
-          },
+        markLine: {
+          symbol: 'none',
+          data: warningLines.map(line => ({
+            label: {
+              show: false
+            },
             name: line.name,
             yAxis: line.value,
             lineStyle: {
               color: line.color,
               width: 1,
               type: 'dashed',
-             
-              
             }
           }))
-      }
+        }
       },
     ],
   });
 };
 
-// 窗口缩放适配
-const resizeChart = () => chartInstance?.resize();
+// 使用防抖优化resize性能
+const resizeChart = debounce(() => {
+  if (chartInstance) {
+    chartInstance.resize({
+      animation: {
+        duration: 300
+      }
+    });
+  }
+}, 300);
+
+// 监听容器尺寸变化（更精确的自适应）
+const observeContainerResize = () => {
+  if (!chartRef.value) return;
+  
+  const resizeObserver = new ResizeObserver(entries => {
+    // 使用防抖函数处理尺寸变化
+    resizeChart();
+  });
+  
+  resizeObserver.observe(chartRef.value);
+  
+  // 返回清理函数
+  return () => resizeObserver.disconnect();
+};
+
+let cleanupObserver: (() => void) | null = null;
 
 onMounted(() => {
-  nextTick(initChart);
-  window.addEventListener("resize", resizeChart);
+  nextTick(() => {
+    initChart();
+    // 添加窗口大小改变事件监听器
+    window.addEventListener("resize", resizeChart);
+    // 添加容器尺寸观察器
+    cleanupObserver = observeContainerResize();
+  });
 });
 
 onUnmounted(() => {
   window.removeEventListener("resize", resizeChart);
+  if (cleanupObserver) {
+    cleanupObserver();
+  }
   chartInstance?.dispose();
 });
 </script>
@@ -141,8 +141,12 @@ onUnmounted(() => {
   height: 3rem;
   position: relative;
   padding: 0.15rem;
-  // padding-top: 0.45rem;
-
+  width: 100%;
+  margin-top: 0.3rem;
+  background-image: url("@/assets/jinrun/module-bg.png");
+  background-size: cover;
+  background-repeat: no-repeat;
+  
   .card-title {
     position: absolute;
     left: 0.25rem;
@@ -152,11 +156,7 @@ onUnmounted(() => {
     color: #ffffff;
     text-shadow: 0rem 0rem 0rem rgba(5, 38, 68, 0.5);
   }
-  width: 100%;
-  margin-top: 0.3rem;
-  background-image: url("@/assets/jinrun/module-bg.png");
-background-size: cover;
-  background-repeat: no-repeat;
+  
   .chart-wrapper {
     display: flex;
     align-items: center;
@@ -164,10 +164,10 @@ background-size: cover;
     width: 100%;
     height: 100%;
   }
-  .chart-container{
+  
+  .chart-container {
     width: 100%;
     height: 100%;
   }
-
 }
 </style>
\ No newline at end of file