echart

src/views/threeViolations/homePage/index.vue

 <template>
   <!-- 外层排版-->
-  <div class="home-page" id="homePageBody" :style="{ height: height + 'px' }">
+  <!-- <div class="home-page" id="homePageBody" :style="{ height: height + 'px' }"> -->
+  <div class="min_full" >
+  <div class="home-page full" ref='homePageBody'  id="homePageBody" style="overflow: hidden;">
   <div class="page-homepage" id="homePage" @dblclick="handleDoubleClick" style="">
     <div class="echarts_nav" id="echarts_nav">
       <div class="iconTable"  v-for="item in gsList" :key="item.id" @click="bindGsid(item)">
@@ -71,7 +73,18 @@
       </div>
       <div class="page-left-b page-left-3">
         <div class="yhzl-big-box">
-          <div id="yjylChart" class="chart-auto"></div>
+          <div  v-echartResize="()=>{
+  fxpcChart.resize();
+  yhclChart.resize();
+  yjylChart.resize();
+  yhzlChart.resize();
+ rfxpcChart.resize();
+  lzglChart.resize();
+  ygzcChart.resize();
+ height=refs('homePageBody').parentNode.clientHeight;
+
+
+}" id="yjylChart" class="chart-auto"></div>
         </div>
       </div>
     </div>
@@ -161,6 +174,8 @@
 
   </div>
 </div>
+  </div>
+
 </template>
 
 <script>
@@ -219,6 +234,12 @@ export default {
       }
     },
     height(value){
+      document.addEventListener('fullscreenchange', (event) => {
+        if (!document.fullscreenElement) {
+          // 全屏已退出
+          console.log('Exited full screen');
+        }
+      });
       // setTimeout(() => {
 
       //     this.fxpcChart.resize();
@@ -238,9 +259,11 @@ export default {
   activated() {
     console.log('activated')
   },
+
   mounted() {
     this.postGs();
     this.$nextTick(() => {
+
         this.height=document.getElementById('homePageBody').parentNode.clientHeight;
         this.carHeight=this.height*0.4-60+'px';
     })