echarts自动响应大小

src/views/index_v1.vue

@@ -44,27 +44,6 @@
       </el-col>
     </el-row> 
 
-    <!-- <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
-      <line-chart :chart-data="lineChartData" />
-    </el-row> 
-    <el-row :gutter="32">
-      <el-col :xs="24" :sm="24" :lg="8">
-        <div class="chart-wrapper">
-          <raddar-chart />
-        </div>
-      </el-col>
-      <el-col :xs="24" :sm="24" :lg="8">
-        <div class="chart-wrapper">
-          <pie-chart />
-        </div>
-      </el-col>
-      <el-col :xs="24" :sm="24" :lg="8">
-        <div class="chart-wrapper">
-          <bar-chart />
-        </div>
-      </el-col>
-    </el-row> -->
-
 
   </div>
 </template>
@@ -88,25 +67,6 @@ import RaddarChart from './dashboard/RaddarChart'
 import PieChart from './dashboard/PieChart'
 import BarChart from './dashboard/BarChart' 
 
-const lineChartData = {
-  newVisitis: {
-    expectedData: [100, 120, 161, 134, 105, 160, 165],
-    actualData: [120, 82, 91, 154, 162, 140, 145]
-  },
-  messages: {
-    expectedData: [200, 192, 120, 144, 160, 130, 140],
-    actualData: [180, 160, 151, 106, 145, 150, 130]
-  },
-  purchases: {
-    expectedData: [80, 100, 121, 104, 105, 90, 100],
-    actualData: [120, 90, 100, 138, 142, 130, 130]
-  },
-  shoppings: {
-    expectedData: [130, 140, 141, 142, 145, 150, 160],
-    actualData: [120, 82, 91, 154, 162, 140, 130]
-  }
-}
-
 export default {
   mixins: [resize],
   name: 'Index',
@@ -158,7 +118,10 @@ export default {
       ],
       type1:1,
       type2:1,
-      lineChartData: lineChartData.newVisitis
+      myCharts1:null,
+      myCharts2:null,
+      myCharts3:null,
+      myCharts4:null,
     }
   },
   mounted(){
@@ -167,8 +130,18 @@ export default {
     this.InitEChartsTwo()
     this.InitEChartsThree()
     this.InitEChartsFour()
+    window.addEventListener('transitionend', this.$_sidebarResizeHandler)
   },
   methods: {
+    $_sidebarResizeHandler(e) {
+      if (e.propertyName === 'width') {
+        console.log(e)
+        this.myCharts1.resize();
+        this.myCharts2.resize();
+        this.myCharts3.resize();
+        this.myCharts4.resize();
+      }
+    },
     getTopData(){ 
       getDataScreeningModelApi({}).then((response) => {
           this.topAreaOptions = response.data.data; 
@@ -294,12 +267,12 @@ export default {
               },
             ],
           };
-          let myCharts = echarts.init(document.querySelector('#lineChartOne'));
+          this.myCharts1 = echarts.init(document.querySelector('#lineChartOne'));
-          myCharts.setOption(option)  
+          this.myCharts1.setOption(option)  
           // 根据页面大小自动响应图表大小
-          window.addEventListener("resize", function () {
+          // window.addEventListener("resize1", function () {
-              myCharts.resize(); 
+          //     this.myCharts1.resize(); 
-          });
+          // });
       }); 
     },
     changType2(e){
@@ -422,13 +395,13 @@ export default {
               },
             ],
           };
-          let myCharts = echarts.init(document.querySelector('#lineChartTwo'));
+          this.myCharts2 = echarts.init(document.querySelector('#lineChartTwo'));
-          myCharts.setOption(option) 
+          this.myCharts2.setOption(option) 
 
-          // 根据页面大小自动响应图表大小
+          // // 根据页面大小自动响应图表大小
-          window.addEventListener("resize", function () {
+          // window.addEventListener("resize2", function () {
-              myCharts.resize(); 
+          //     myCharts2.resize(); 
-          });
+          // });
       }); 
     },
     InitEChartsThree() { 
@@ -633,12 +606,12 @@ export default {
               },
             ],
           }; 
-          let myCharts = echarts.init(document.querySelector('#lineChartThree'));
+          this.myCharts3 = echarts.init(document.querySelector('#lineChartThree'));
-          myCharts.setOption(option)  
+          this.myCharts3.setOption(option)  
-          // 根据页面大小自动响应图表大小
+          // // 根据页面大小自动响应图表大小
-          window.addEventListener("resize", function () {
+          // window.addEventListener("resize3", function () {
-              myCharts.resize();
+          //     myCharts3.resize();
-          });
+          // });
       }); 
     },
     InitEChartsFour() {
@@ -774,16 +747,13 @@ export default {
               },
             ],
           }; 
-          let myCharts = echarts.init(document.querySelector('#barChartFour'));
+          this.myCharts4 = echarts.init(document.querySelector('#barChartFour'));
-          myCharts.setOption(option)  
+          this.myCharts4.setOption(option)  
           // 根据页面大小自动响应图表大小
-          window.addEventListener("resize", function () {
+          // window.addEventListener("resize4", function () {
-              myCharts.resize();
+          //     myCharts4.resize();
-          });
+          // });
       });
-    },
-    handleSetLineChartData(type) {
-      this.lineChartData = lineChartData[type]
     }
   }
 }