修改ui

src/views/OperationalOverview/components/coldDoubleYChart.vue

@@ -2,13 +2,13 @@
 <!--
  * @Author: zhp
  * @Date: 2023-09-21 09:06:28
- * @LastEditTime: 2024-03-29 16:25:59
+ * @LastEditTime: 2024-04-01 09:12:56
  * @LastEditors: zhp
  * @Description:
 -->
 <template>
   <div>
-    <div :id="id" class="productChart" :style="{ height:   '390px', width: width }" />
+    <div :id="id" class="coldProductChart" :style="{ height:   '390px', width: width }" />
   </div>
 </template>
 
@@ -166,25 +166,25 @@ export default {
           bottom: "3%",
           containLabel: true
         },
-        legend: {
-          itemWidth: 10,
-          itemHeight: 10,
-          top: '5',
-          right: '20px',
-          data: [
-            // { icon: 'rect', name: '直接访问' },
-            { icon: 'roundRect', name: '产线产量' },
-            {
-              icon: 'circle', name: '产线良品率',
-              itemWidth: 7,
-              itemHeight: 7,
-             },
-          ],
-          textStyle: {
-            fontSize: 12 * this.beilv,
-            color: '#ced1d5'
-          }
-        },
+        // legend: {
+        //   itemWidth: 10,
+        //   itemHeight: 10,
+        //   top: '5',
+        //   right: '20px',
+        //   data: [
+        //     // { icon: 'rect', name: '直接访问' },
+        //     { icon: 'roundRect', name: '产线产量' },
+        //     // {
+        //     //   icon: 'circle', name: '产线良品率',
+        //     //   itemWidth: 7,
+        //     //   itemHeight: 7,
+        //     //  },
+        //   ],
+        //   textStyle: {
+        //     fontSize: 12 * this.beilv,
+        //     color: '#ced1d5'
+        //   }
+        // },
         xAxis: {
           axisTick: {
             show: false
@@ -308,7 +308,8 @@ export default {
 }
 </script>
 <style>
-.productChart{
+
+.coldProductChart{
   top: -10px;
 }
 </style>

src/views/OperationalOverview/components/doubleYChart .vue

@@ -173,7 +173,7 @@ export default {
             itemHeight: 10,
             top: '0%',
             right: '20px',
-            data: ['产线产量', '产线良品率'],
+            data: ['产线良品率', '产线产量'],
             textStyle: {
               fontSize: 12 * this.beilv,
               color: '#ced1d5',

src/views/OperationalOverview/components/pileBarChart.vue

@@ -1,13 +1,13 @@
 <!--
  * @Author: zhp
  * @Date: 2023-12-27 13:54:52
- * @LastEditTime: 2024-03-29 17:01:16
+ * @LastEditTime: 2024-04-01 09:14:45
  * @LastEditors: zhp
  * @Description:
 -->
 <template>
   <div>
-    <div :id="id" class="productChart" :style="{ height:'75px', width: width }" />
+    <div :id="id" :style="{ height:'75px', width: width }" />
   </div>
 </template>
 
@@ -71,7 +71,10 @@ export default {
     }
   },
   mounted() {
-    console.log('mounted')
+    // console.log('mounted')
+    window.addEventListener('resize', () => {
+      this.resize()
+    })
     // console.log('borderRadius: ', this.borderRadius)
     // console.log('33333', this.dataList)
     // let arr = []
@@ -91,6 +94,12 @@ export default {
     this.chart = null
   },
   methods: {
+    resize() {
+      this.chart.resize({
+        width: 'auto',
+        height: 90
+      });;
+    },
     initChart(nameList, topNameList, nameWasteList, passRateList, wasteList) {
       let rawData = []
       let colors = ['#0fdedb', '#2359ec']
@@ -239,10 +248,15 @@ export default {
         },
         series:series
       })
-      this.chart.resize({
-        width: 'auto',
-        height: 90
-      });;
+      this.$nextTick(() => {
+        setTimeout(() => {
+          this.resize()
+        },1000);
+      })
+      // this.chart.resize({
+      //   width: 'auto',
+      //   height: 90
+      // });;
     }
   }
 }