响应式优化

src/views/learning/item-crowd-analysis.vue

@@ -58,6 +58,11 @@ export default {
       projectId: "",
       crowdData: {},
       showData: false,
+      echartsData: {
+        chart1: {},
+        chart2: {},
+        chart3: {},
+      },
     };
   },
   created() {
@@ -83,7 +88,6 @@ export default {
       this.crowdData = {};
     });
     if (this.activeName == "second") {
-      // this.updateResize();
     }
   },
   methods: {
@@ -129,13 +133,10 @@ export default {
     },
     updateResize() {
       this.$nextTick(function() {
-        let chartEducation = echarts.init(document.getElementById("education"));
-        let chartJob = echarts.init(document.getElementById("job"));
-        let chartAge = echarts.init(document.getElementById("age"));
         window.onresize = function() {
-          chartEducation.resize();
-          chartJob.resize();
-          chartAge.resize();
+          vm.echartsData.chart1.resize();
+          vm.echartsData.chart2.resize();
+          vm.echartsData.chart3.resize();
         };
       });
     },
@@ -197,9 +198,8 @@ export default {
         seriesData
       );
       myChart.setOption(option);
-      window.onresize = function() {
-        myChart.resize();
-      }
+      vm.echartsData.chart1 = myChart;
+      vm.updateResize();
     },
     jobDivision(data) {
       let myChart2 = echarts.init(this.$refs.job);
@@ -218,9 +218,8 @@ export default {
         seriesData
       );
       myChart2.setOption(option);
-      window.onresize = function() {
-        myChart2.resize();
-      }
+      vm.echartsData.chart2 = myChart2;
+      vm.updateResize();
     },
     ageDivision(data) {
       let myChart3 = echarts.init(this.$refs.age);
@@ -242,9 +241,8 @@ export default {
       let option = operationData.getBarOption(xAxisData, seriesData);
 
       myChart3.setOption(option);
-      window.onresize = function() {
-        myChart3.resize();
-      }
+      vm.echartsData.chart3 = myChart3;
+      vm.updateResize();
     }
   }
 };