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)">
-        <div  class="dv-border-box-10 nav_border" 
+        <div  class="dv-border-box-10 nav_border"
         :style="{color:queryParams1.gsid==item.id?activeStyle.color:'', boxShadow:queryParams1.gsid==item.id?'#00bfff 0px 0px 25px 3px inset':'#204b85 0px 0px 25px 3px inset'}">
         <svg width="131" height="37" class="dv-border-svg-container">
           <polygon fill="transparent" points="
@@ -67,18 +69,29 @@
             </div>
             </div>
         </div>
-        
+
       </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>
     <div class="page-center">
       <div class="page-center-t">
-         
-          <div class="gs-picture" style="width: 100%;height: 100%;"> 
+
+          <div class="gs-picture" style="width: 100%;height: 100%;">
             <div  class="dv-border-box-1">
               <svg width="682" height="379" class="border">
                 <polygon fill="transparent" points="10, 27 10, 352 13, 355 13, 358 24, 368
@@ -130,7 +143,7 @@
             <div id="yhzlChart" class="chart-auto"></div>
           <!-- </div> -->
         </div>
-       
+
       </div>
     </div>
     <div class="page-right">
@@ -140,7 +153,7 @@
           <div class="echarts">
             <div id="rfxpcChart" class="chart-auto"></div>
           </div>
-        
+
          </div>
       </div>
       <div class="page-right-c">
@@ -158,9 +171,11 @@
       </div>
     </div>
     </div>
-  
+
   </div>
 </div>
+  </div>
+
 </template>
 
 <script>
@@ -219,8 +234,14 @@ export default {
       }
     },
     height(value){
+      document.addEventListener('fullscreenchange', (event) => {
+        if (!document.fullscreenElement) {
+          // 全屏已退出
+          console.log('Exited full screen');
+        }
+      });
       // setTimeout(() => {
-           
+
       //     this.fxpcChart.resize();
       //     this.yhclChart.resize();
       //     this.yjylChart.resize();
@@ -238,14 +259,16 @@ 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';
     })
     window.addEventListener('resize',function (params) {
-      
+
     })
     this.fxpcChart = echarts.init(document.getElementById('fxpcChart'))
     this.yhclChart = echarts.init(document.getElementById('yhclChart'))
@@ -263,7 +286,7 @@ doQueryWithFile({}).then(res => {
       // this.showList=[]
     })
     this.postYjyl();//应急演练
- 
+
   },
   data() {
     return {
@@ -326,7 +349,7 @@ doQueryWithFile({}).then(res => {
               this.carHeight=this.height*0.4-60+'px';
           })
         }, 50);
-       
+
     },
     fullScreen(element) {
         const elem = element || document.documentElement;
@@ -434,7 +457,7 @@ doQueryWithFile({}).then(res => {
             xAxis.push(element.bmName || "");
             seriesData.push(Number(parseFloat((element.wcl || 0) * 100).toFixed(2)));
           });
-        
+
           this.setBarhart(this.yjylChart, {
             title: "应急演练",
             xAxis: xAxis,
@@ -442,7 +465,7 @@ doQueryWithFile({}).then(res => {
             yAxis:[
             {
               type: 'value',
-             
+
               axisTick: {
                 color:"white"
               },
@@ -499,8 +522,8 @@ doQueryWithFile({}).then(res => {
                 label: {
                     normal: {
                       show: true,
-                      position: 'top',   
-                      color:"white"   
+                      position: 'top',
+                      color:"white"
                   }
                 }
           }
@@ -595,7 +618,7 @@ doQueryWithFile({}).then(res => {
                     normal: {
                       show: true,
                       position: 'top',
-                      color:'white'  
+                      color:'white'
                   }
                 }
           }
@@ -637,7 +660,7 @@ doQueryWithFile({}).then(res => {
           value.forEach(element => {
               xAxis.push(lx[element.lx]);
               seriesData[0]["data"].push(element.allCount||0);
-              seriesData[1]["data"].push(element.wcCount||0);      
+              seriesData[1]["data"].push(element.wcCount||0);
           });
           this.setBarhart(this.rfxpcChart, {
             title: "风险排查",
@@ -658,7 +681,7 @@ doQueryWithFile({}).then(res => {
                 label: {
                     normal: {
                       show: true,
-                      position: 'top',      
+                      position: 'top',
                   }
                 }
           }
@@ -667,10 +690,10 @@ doQueryWithFile({}).then(res => {
                 label: {
                     normal: {
                       show: true,
-                      position: 'top',      
+                      position: 'top',
                       formatter:"{c}%"
                   },
-             
+
                 }
           }
           let seriesData = [
@@ -736,7 +759,7 @@ doQueryWithFile({}).then(res => {
               seriesData[1]["data"].push(element.wcCount||0);
               let percent=element.allCount?(element.wcCount/element.allCount):0;
               seriesData[2]["data"].push(Number(parseFloat(percent*100).toFixed(2)));
-        
+
           });
           this.setBarhart(this.lzglChart, {
             title: "履职管理",
@@ -758,8 +781,8 @@ doQueryWithFile({}).then(res => {
                 label: {
                     normal: {
                       show: true,
-                      position: 'top',   
-                      color:'white'   
+                      position: 'top',
+                      color:'white'
                   }
                 }
           };
@@ -788,7 +811,7 @@ doQueryWithFile({}).then(res => {
           value.forEach(element => {
               xAxis.push(element.flName);
               seriesData[0]["data"].push(element.allCount-element.dqCount||0);
-              seriesData[1]["data"].push(element.dqCount||0);      
+              seriesData[1]["data"].push(element.dqCount||0);
           });
           this.setBarhart(this.ygzcChart, {
             title: "员工持证",
@@ -820,9 +843,9 @@ doQueryWithFile({}).then(res => {
           text: setting.title || "",
           bottom: 0,
           left: "center",
-          textStyle: {   
-            fontSize: 14,  
-            fontWeight: 400,   
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 400,
             align: 'center',
             verticalAlign: 'middle',
             color:'white'
@@ -881,9 +904,9 @@ doQueryWithFile({}).then(res => {
           text: setting.title || "",
           top: 20,
           left: "center",
-          textStyle: {  
-            fontSize: 18,  
-            fontWeight: 600,   
+          textStyle: {
+            fontSize: 18,
+            fontWeight: 600,
             align: 'center',
             verticalAlign: 'middle',
             color:'white'
@@ -906,7 +929,7 @@ doQueryWithFile({}).then(res => {
           {
             type: 'category',
             data: setting.xAxis,
-            
+
             axisTick: {
               alignWithLabel: true,
               color:"white"
@@ -952,7 +975,7 @@ doQueryWithFile({}).then(res => {
       chartDom.setOption(option);
       chartDom.resize();
     },
-  
+
 
   }
 }
@@ -1140,7 +1163,7 @@ doQueryWithFile({}).then(res => {
          .border {
               position: absolute;
               display: block;
-           } 
+           }
            .right-top {
               right: 0;
               transform: rotateY(180deg);
@@ -1171,7 +1194,7 @@ doQueryWithFile({}).then(res => {
             .realImg {
                   width: 100%;
                   height: 100%;
-                
+
                   background-repeat: no-repeat;
                   display: block;
                   background: url('~@/assets/images/gs.jpg');