调整布局

src/views/dashboard/overview/components/AlarnTypeBar/index.vue

@@ -83,8 +83,8 @@ function initPicture() {
             fontFamily: 'PingFang',
             fontWeight: '400',
           },
-          top: '210',
+          top: '50%',
-          left: '4%',
+          left: '6%',
         },
       ],
 
@@ -93,13 +93,12 @@ function initPicture() {
           top: '55%',
           left: '15%',
           right: '25%',
-          bottom: '3%',
+          bottom:'3%',
         },
       ],
       legend: {
         orient: 'vertical',
-        left: '65%',
+        left: '75%',
-        right: 'right',
         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 () {
+  // 创建 ResizeObserver 实例
-    // echarts 窗口缩放自适应 随着div--echarts-records的大小来适应
+  var observer = new ResizeObserver(entries => {
-    alarmTypeBarChart.value.resize();
+    if (alarmTypeBarChart.value) {
-  };
+      alarmTypeBarChart.value.resize();
+    }
+  });
+  // 监听元素大小变化
+  observer.observe(container);
+
+
 }
 
 onMounted(() => {

src/views/dashboard/overview/css/index.css

@@ -207,7 +207,7 @@
 /* 告警统计 */
 .alarmType {
   min-height: 22rem;
-  height: 60%;
+  height: 58%;
 }
 .alarmType .inner .chart {
   width: 100%;