修改bug

src/views/OperationalOverview/components/doubleYChart .vue

@@ -1,13 +1,13 @@
 <!--
  * @Author: zhp
  * @Date: 2023-09-21 09:06:28
- * @LastEditTime: 2024-01-29 15:14:40
+ * @LastEditTime: 2024-02-01 15:52:41
  * @LastEditors: zhp
  * @Description:
 -->
 <template>
-  <div>
-    <div :id="id" class="productChart" :style="{ height:   '390px', width: width }" />
+  <div style="height: 400px;">
+    <div :id="id" class="productChart" :style="{ height:   '420px', width: width }" />
   </div>
 </template>
 
@@ -15,7 +15,7 @@
 import * as echarts from 'echarts';
 import 'echarts/theme/macarons' // echarts theme
 import resize from './mixins/resize'
-
+// import resize from './../mixins/resize'
 export default {
   name: 'OverviewBar',
   mixins: [resize],
@@ -67,12 +67,18 @@ export default {
       }]
     }
   },
+  // mounted() {
+  //   console.log('mounted')
+  //   console.log('borderRadius: ', this.borderRadius)
+  //   // this.$nextTick(() => {
+  //   //   this.initChart()
+  //   // })
+  // },
   mounted() {
-    console.log('mounted')
-    console.log('borderRadius: ', this.borderRadius)
-    // this.$nextTick(() => {
-    //   this.initChart()
-    // })
+    this.$el.addEventListener('resize', () => {
+      console.log('resziing.....');
+    });
+    this.initChart()
   },
   beforeDestroy() {
     if (!this.chart) {
@@ -148,15 +154,11 @@ export default {
             type: 'cross'
           }
         },
-        grid: {
-          left: "6%",
-          right: "6%",
-          bottom: "3%",
-          containLabel: true
-        },
+        grid: { top: 90, right: 60, bottom: 20, left: 90 },
         legend: {
           itemWidth: 10,
           itemHeight: 10,
+          top: '0%',
           right: '20px',
           data: ['产线产量', '产线良品率'],
           textStyle: {
@@ -174,9 +176,12 @@ export default {
             }
           },
           axisLabel: {
-            textStyle: {
-              color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色
-            }
+            color: "#fff",
+            fontSize: 12,
+            // formatter: '{value}'
+            // textStyle: {
+            //   color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色
+            // }
           },
           splitLine: {
             lineStyle: {
@@ -214,10 +219,11 @@ export default {
               }
             },
             axisLabel: {
-              textStyle: {
-                color: '#ced1d5', // 坐标值得具体的颜色
-                formatter: '{value}%'
-              }
+              color: "#fff",
+              fontSize: 12,
+              // formatter: '{value}'
+              formatter: '{value}%'
+              // }
             },
             splitLine: {
               lineStyle: {
@@ -241,7 +247,7 @@ export default {
             // },
             scale: true,
             type: 'value',
-            name: '产量/㎡', // y轴上方的单位
+            name: '产量/片', // y轴上方的单位
             nameTextStyle: {
               color: "#fff",
               // fontSize: 10,
@@ -258,10 +264,13 @@ export default {
               }
             },
             axisLabel: {
-              textStyle: {
-                color: 'rgba(255,255,255,0.5)', // 坐标值得具体的颜色
-                formatter: '{value} 片'
-              }
+              // textStyle: {
+              // color: 'rgba(255,255,255,0.5)', // 坐标值得具体的颜色
+              color: "#fff",
+              fontSize: 12,
+              // formatter: '{value}'
+              formatter: '{value} 片'
+              // }
             },
             splitLine: {
               lineStyle: {
@@ -285,6 +294,9 @@ export default {
 </script>
 <style>
 .productChart{
-  top: -40px;
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  top: -30px;
 }
 </style>