From acf4a946e8139587dab8a6a5b2e9f4c1466bac61 Mon Sep 17 00:00:00 2001
From: lai <371757574@qq.com>
Date: Tue, 30 Jan 2024 18:21:20 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/AlarnTypeBar/index.vue         | 25 +++++++++++--------
 src/views/dashboard/overview/css/index.css    |  2 +-
 2 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/src/views/dashboard/overview/components/AlarnTypeBar/index.vue b/src/views/dashboard/overview/components/AlarnTypeBar/index.vue
index f74a1f20..d9c4ab73 100644
--- a/src/views/dashboard/overview/components/AlarnTypeBar/index.vue
+++ b/src/views/dashboard/overview/components/AlarnTypeBar/index.vue
@@ -83,8 +83,8 @@ function initPicture() {
             fontFamily: 'PingFang',
             fontWeight: '400',
           },
-          top: '210',
-          left: '4%',
+          top: '50%',
+          left: '6%',
         },
       ],
 
@@ -93,13 +93,12 @@ function initPicture() {
           top: '55%',
           left: '15%',
           right: '25%',
-          bottom: '3%',
+          bottom:'3%',
         },
       ],
       legend: {
         orient: 'vertical',
-        left: '65%',
-        right: 'right',
+        left: '75%',
         top: '10%',
         data: pieArr.map((item: any) => item.name), //label数组
         textStyle: {
@@ -121,7 +120,7 @@ function initPicture() {
           labelLine: {
             show: false,
           },
-          center: ['40%', '25%'],
+          center: ['45%', '25%'],
           data: pieArr.sort((a: any, b: any) => {
             return a.value - b.value;
           }),
@@ -225,10 +224,16 @@ function fnDesign(container: HTMLElement | undefined, option: any) {
   alarmTypeBarChart.value = markRaw(echarts.init(container, 'light'));
   option && alarmTypeBarChart.value.setOption(option);
 
-  window.onresize = function () {
-    // echarts 窗口缩放自适应 随着div--echarts-records的大小来适应
-    alarmTypeBarChart.value.resize();
-  };
+  // 创建 ResizeObserver 实例
+  var observer = new ResizeObserver(entries => {
+    if (alarmTypeBarChart.value) {
+      alarmTypeBarChart.value.resize();
+    }
+  });
+  // 监听元素大小变化
+  observer.observe(container);
+
+
 }
 
 onMounted(() => {
diff --git a/src/views/dashboard/overview/css/index.css b/src/views/dashboard/overview/css/index.css
index 03ebb166..91bbb521 100644
--- a/src/views/dashboard/overview/css/index.css
+++ b/src/views/dashboard/overview/css/index.css
@@ -207,7 +207,7 @@
 /* 告警统计 */
 .alarmType {
   min-height: 22rem;
-  height: 60%;
+  height: 58%;
 }
 .alarmType .inner .chart {
   width: 100%;