解决echarts双Y周不对称和resize报错

src/views/modules_guAn/visualization/components/common.js

@@ -0,0 +1,33 @@
+ // 取最大值
+const setMax = (num) => {
+  console.log(num)
+  // 1.判断是否小数：  //判断是否含有小数点：要检索的字符串值没有出现，则该方法返回 -1。
+  if (num.toString().indexOf(".") != -1) {//有小数点
+    num = Math.ceil(num);//向上取整 
+  }
+  // 2.向上取整数倍
+  if (num.toString().length < 2) {
+    // 一位数1
+    num = 10;
+  } else if (num.toString().length < 3) {
+    // 2位数
+    num = Math.ceil(num / 5) * 5;// 变成最近的5的倍数
+  } else {
+    // 位数--先判断是不是1000...的倍数
+    var t = '';
+    for (let i = 0; i < num.toString().length - 1; i++) {
+      t += '0';//'0000...'
+    }
+    if ((num % Number(1 + t)) != 0) {//不是100的倍数
+      num = (Number(num.toString().substr(0, 1)) + 1) * Number(1 + t);
+    }
+  }
+  return num
+}
+
+export { setMax }
+
+// export function xxx (){
+//   xxx
+//   return xxx
+// }

src/views/modules_guAn/visualization/index.vue

@@ -190,7 +190,7 @@ export default {
       padding: 60px 20px 20px;
       box-sizing: border-box;
       .left-container{
-        flex: 1;
+        width: 25%;
         height: 100%;
         .left-top-con{
           height: 35%;
@@ -205,7 +205,7 @@ export default {
         }
       }
       .center-container{
-        flex: 1.8;
+        width: 50%;
         height: 100%;
         .important{
           width: 100%;
@@ -228,7 +228,7 @@ export default {
         }
       }
       .right-container{
-        flex: 1;
+        width: 25%;
         .right-top-con{
           height: 35%;
           padding-bottom: 12px;

src/views/modules_guAn/visualization/modules/FullCurve.vue

@@ -11,6 +11,7 @@
 <script>
 import * as echarts from "echarts"
 import commonTitle from '../components/commonTitle.vue'
+import { setMax } from "../components/common.js";
 
 export default {
   components: { commonTitle },
@@ -23,7 +24,10 @@ export default {
         { name: '辐射强度值', value: 9000 },
         { name: '温度实值', value: 50 },
         { name: '湿度实值', value: 60.3 },
-      ]
+      ],
+      fusheData: [150, 230, 224, 218, 135, 147, 260],
+      wenduData: [120, 132, 101, 134, 90, 230, 210],
+      shiduData: [220, 182, 191, 234, 290, 330, 310],
     }
   },
   created () {
@@ -36,6 +40,8 @@ export default {
   methods: {
     initDataCurve(){
       var _this = this
+      var maxa = Math.max.apply(null, this.fusheData)
+      var maxb = Math.max.apply(null, [...this.wenduData, ...this.shiduData])
       this.uEcharts = echarts.init(this.$refs.dataCurve);
       this.uOption = {
         color: ['#07D626', '#E30106', '#E39106'], // legend对应颜色
@@ -81,6 +87,9 @@ export default {
               color: '#fff',
               padding: [0, 0, 0, 20],
             },
+            min: 0,
+            max: setMax(maxa),
+            interval: setMax(maxa) / 5,
           },
           {
             type: 'value',
@@ -102,6 +111,9 @@ export default {
               color: '#fff',
               // padding: [0, 0, 0, 20],
             },
+            min: 0,
+            max: setMax(maxb),
+            interval: setMax(maxb) / 5,
           },
         ],
         legend: {
@@ -211,7 +223,7 @@ export default {
         ]
       };
       this.uOption && this.uEcharts.setOption(this.uOption)
-      window.addEventListener("resize",function (){
+      window.addEventListener("resize", ()=>{
         this.uEcharts.resize();
       });
     }

src/views/modules_guAn/visualization/modules/RealTimeCurve.vue

@@ -10,6 +10,7 @@
 <script>
 import * as echarts from "echarts"
 import commonTitle from '../components/commonTitle.vue'
+import { setMax } from "../components/common.js";
 
 export default {
   components: { commonTitle },
@@ -22,7 +23,10 @@ export default {
         { name: '辐射强度值', value: 9000 },
         { name: '温度实值', value: 50 },
         { name: '湿度实值', value: 60.3 },
-      ]
+      ],
+      fusheData: [150, 230, 224, 218, 135, 147, 260],
+      wenduData: [120, 132, 101, 134, 90, 230, 210],
+      shiduData: [220, 182, 191, 234, 290, 330, 310],
     }
   },
   created () {
@@ -35,6 +39,8 @@ export default {
   methods: {
     initDataCurve(){
       var _this = this
+      var maxa = Math.max.apply(null, this.fusheData)
+      var maxb = Math.max.apply(null, [...this.wenduData, ...this.shiduData])
       this.uEcharts = echarts.init(this.$refs.dataCurve);
       this.uOption = {
         color: ['rgb(255, 0, 255)', 'rgb(255, 105, 5)', 'rgb(91, 255, 255)'], // legend对应颜色
@@ -80,6 +86,9 @@ export default {
               color: '#fff',
               padding: [0, 0, 0, 20],
             },
+            min: 0,
+            max: setMax(maxa),
+            interval: setMax(maxa) / 5,
           },
           {
             type: 'value',
@@ -101,6 +110,9 @@ export default {
               color: '#fff',
               // padding: [0, 0, 0, 20],
             },
+            min: 0,
+            max: setMax(maxb),
+            interval: setMax(maxb) / 5,
           },
         ],
         legend: {
@@ -210,7 +222,7 @@ export default {
         ]
       };
       this.uOption && this.uEcharts.setOption(this.uOption)
-      window.addEventListener("resize",function (){
+      window.addEventListener("resize", ()=>{
         this.uEcharts.resize();
       });
     }

src/views/modules_guAn/visualization/modules/YuzhiCurve.vue

@@ -10,6 +10,7 @@
 <script>
 import * as echarts from "echarts"
 import commonTitle from '../components/commonTitle.vue'
+import { setMax } from "../components/common.js";
 
 export default {
   components: { commonTitle },
@@ -22,7 +23,10 @@ export default {
         { name: '辐射强度值', value: 9000 },
         { name: '温度实值', value: 50 },
         { name: '湿度实值', value: 60.3 },
-      ]
+      ],
+      fusheData: [150, 230, 224, 218, 135, 147, 260],
+      wenduData: [120, 132, 101, 134, 90, 230, 210],
+      shiduData: [220, 182, 191, 234, 290, 330, 310],
     }
   },
   created () {
@@ -35,6 +39,8 @@ export default {
   methods: {
     initYuzhiCurve(){
       var _this = this
+      var maxa = Math.max.apply(null, this.fusheData)
+      var maxb = Math.max.apply(null, [...this.wenduData, ...this.shiduData])
       this.uEcharts = echarts.init(this.$refs.yuzhiCurve);
       this.uOption = {
         color: ['#0102c8', '#cfa809', '#49e4e9'], // legend对应颜色
@@ -80,6 +86,9 @@ export default {
               color: '#fff',
               padding: [0, 0, 0, 20],
             },
+            min: 0,
+            max: setMax(maxa),
+            interval: setMax(maxa) / 5,
           },
           {
             type: 'value',
@@ -101,6 +110,9 @@ export default {
               color: '#fff',
               // padding: [0, 0, 0, 20],
             },
+            min: 0,
+            max: setMax(maxb),
+            interval: setMax(maxb) / 5,
           },
         ],
         legend: {
@@ -123,7 +135,6 @@ export default {
         series: [
           {
             name: '辐射强度值',
-            data: [150, 230, 224, 218, 135, 147, 260],
             type: 'line',
             // symbol: 'circle',
             // symbolSize: 2,
@@ -153,7 +164,8 @@ export default {
                   }
                 ])
               }
-            }
+            },
+            data: _this.fusheData,
           },
           {
             name: '温度实值',
@@ -179,7 +191,7 @@ export default {
                 ])
               }
             },
-            data: [120, 132, 101, 134, 90, 230, 210],
+            data: _this.wenduData,
           },
           {
             name: '湿度实值',
@@ -205,15 +217,40 @@ export default {
                 ])
               }
             },
-            data: [220, 182, 191, 234, 290, 330, 310],
+            data: _this.shiduData,
           }
         ]
       };
       this.uOption && this.uEcharts.setOption(this.uOption)
-      window.addEventListener("resize",function (){
+      window.addEventListener("resize", ()=>{
         this.uEcharts.resize();
       });
-    }
+    },
+    // // 取最大值
+    // setMax(num) {
+    //   // 1.判断是否小数：  //判断是否含有小数点：要检索的字符串值没有出现，则该方法返回 -1。
+    //   if (num.toString().indexOf(".") != -1) {//有小数点
+    //     num = Math.ceil(num);//向上取整 
+    //   }
+    //   // 2.向上取整数倍
+    //   if (num.toString().length < 2) {
+    //     // 一位数1
+    //     num = 10;
+    //   } else if (num.toString().length < 3) {
+    //     // 2位数
+    //     num = Math.ceil(num / 5) * 5;// 变成最近的5的倍数
+    //   } else {
+    //     // 位数--先判断是不是1000...的倍数
+    //     var t = '';
+    //     for (let i = 0; i < num.toString().length - 1; i++) {
+    //       t += '0';//'0000...'
+    //     }
+    //     if ((num % Number(1 + t)) != 0) {//不是100的倍数
+    //       num = (Number(num.toString().substr(0, 1)) + 1) * Number(1 + t);
+    //     }
+    //   }
+    //   return num
+    // }
   }
 }
 </script>