修改

src/views/ProjectScreen/components/rightPage.vue

@@ -4,12 +4,13 @@
       <Title title="项目概况" />
       <div class="content" v-html="generalize"></div>
     </div>
-    <div class="endPage">
+    <div class="midPage">
       <Title title="形象进度" />
-      <div class="chart_container">
-        <div ref="pieChartRef" class="echart" />
-        <div ref="lineChartRef" class="echart" />
-      </div>
+      <div ref="pieChartRef" class="echart" />
+    </div>
+    <div class="endPage">
+      <Title title="土地流转情况" />
+      <div ref="lineChartRef" class="echart" />
     </div>
   </div>
 </template>
@@ -79,12 +80,6 @@ const initLineChart = () => {
   lineChart.setOption(barOption);
 }
 
-// 响应窗口大小变化
-const handleResize = () => {
-  if (pieChart) pieChart.resize();
-  if (lineChart) lineChart.resize();
-};
-
 /**
  * 获取项目土地统计数据
  */
@@ -124,6 +119,12 @@ const getScreenGeneralizeData = async () => {
   }
 }
 
+// 响应窗口大小变化
+const handleResize = () => {
+  if (pieChart) pieChart.resize();
+  if (lineChart) lineChart.resize();
+};
+
 // 组件挂载时初始化图表
 onMounted(() => {
   getScreenLandData()
@@ -137,7 +138,6 @@ onMounted(() => {
 
 // 组件卸载时清理
 onUnmounted(() => {
-  window.removeEventListener('resize', handleResize);
   if (pieChart) {
     pieChart.dispose();
     pieChart = null;
@@ -156,6 +156,7 @@ onUnmounted(() => {
   height: 100%;
 
   .topPage,
+  .midPage,
   .endPage {
     display: flex;
     flex-direction: column;
@@ -166,20 +167,13 @@ onUnmounted(() => {
     box-sizing: border-box;
   }
 
-  .endPage {
+  .endPage,
+  .midPage {
     flex: 1;
     margin-top: 23px;
 
-    .chart_container {
-      display: flex;
-      flex-direction: column;
-      gap: 5px;
-      width: 100%;
-      height: 100%;
-    }
-
     .echart {
-      height: 48%;
+      height: 100%;
       width: 100%;
     }
   }