Browse Source

图表resize

gcz 2 years ago
parent
commit
ab86f47b6e
2 changed files with 45 additions and 5 deletions
  1. 14 5
      src/components/echarts.vue
  2. 31 0
      src/views/index.vue

+ 14 - 5
src/components/echarts.vue

@@ -94,17 +94,26 @@ export default {
       echarts.init(document.getElementById(charUuid)).clear();
       this.myChart = echarts.init(document.getElementById(charUuid));
       this.myChart.setOption(this.option);
+    },
+    resizeChar(charUuid){
+      console.log('charUuid',charUuid);
+      this.myChart = echarts.init(document.getElementById(charUuid));
+      let obj = this.$refs.wrap;
+      let h = window.getComputedStyle(obj).height;
+      this.myChart.resize({height:h.slice(0, -2)-67+'px'})
+      console.log('this.myChart h',h);
+
     }
   },
   mounted() {
-    console.log('height',this.height);
+    // console.log('height',this.height);
     let obj = this.$refs.wrap;
     let h = window.getComputedStyle(obj).height;
-    console.log('h',h);
+    // console.log('h',h);
     this.domHeight = h.slice(0, -2);
-     console.log('domHeight',this.domHeight);
-     console.log('style',this.style);
-    console.log('echarts mounted');
+    // console.log('domHeight',this.domHeight);
+    // console.log('style',this.style);
+    // console.log('echarts mounted');
     // echarts.init(document.getElementById('echarts')).dispose();//销毁前一个实例
     this.$nextTick(()=>{
       this.myChart = echarts.init(document.getElementById(this.mid));

+ 31 - 0
src/views/index.vue

@@ -234,6 +234,37 @@ export default {
     setInterval(() => {
       this.getPageData();
     }, 60000);
+    window.onresize=()=>{
+      //图表resize
+      if (this.$store.state.addr.page == 'forest') {
+        let page1Char1Uuid = this.$refs.page1Char1.mid;
+        this.$refs.page1Char1.resizeChar(page1Char1Uuid);
+
+        let page1Char2Uuid = this.$refs.page1Char2.mid;
+        this.$refs.page1Char2.resizeChar(page1Char2Uuid);
+      } else if (this.$store.state.addr.page == 'treeSpecies') {
+        let page2Char2Uuid = this.$refs.page2Char2.mid;
+        this.$refs.page2Char2.resizeChar(page2Char2Uuid);
+
+        let page2Char3Uuid = this.$refs.page2Char3.mid;
+        this.$refs.page2Char3.resizeChar(page2Char3Uuid);
+
+      } else if (this.$store.state.addr.page == 'economics') {
+        let page5Char1Uuid = this.$refs.page5Char1.mid;
+        this.$refs.page5Char1.resizeChar(page5Char1Uuid);
+
+        let page5Char2Uuid = this.$refs.page5Char2.mid;
+        this.$refs.page5Char2.resizeChar(page5Char2Uuid);
+
+      } else if (this.$store.state.addr.page == 'event') {
+        let page6Char1Uuid = this.$refs.page6Char1.mid;
+        this.$refs.page6Char1.resizeChar(page6Char1Uuid);
+
+        let page6Char2Uuid = this.$refs.page6Char2.mid;
+        this.$refs.page6Char2.resizeChar(page6Char2Uuid);
+
+      }
+    }
   },
   watch: {
     xiaobaninput: {