驾驶舱对接

src/views/copilot/components/LineChartWater.vue

@@ -11,7 +11,7 @@
       <span v-for="item in legend" :key="item.label" class="legend-item"
         :style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }">{{ item.label }}</span>
     </div>
-    <div ref="waterChart" :style="{ height: '100%',width: width}"></div>
+    <div ref="waterChart" :style="{ height: '95%',width: width}"></div>
   </chart-container>
 </template>
 
@@ -36,12 +36,12 @@ export default {
       type: Array,
       required: true,
     },
-    xAxis: {
-      type: Array,
-      required: true,
-    },
+    // xAxis: {
+    //   type: Array,
+    //   required: true,
+    // },
     series: {
-      type: Array,
+      type: Object,
       required: true,
     },
     in: {
@@ -56,8 +56,8 @@ export default {
       actualOptions: null,
       options: {
         grid: {
-          left: "1%",
-          right: "4%",
+          left: "3%",
+          right: "2%",
           bottom: "3%",
           top: "15%",
           containLabel: true,
@@ -88,15 +88,12 @@ export default {
           bottom: '3%',
           containLabel: true
         },
-        xAxis: [
-          {
+        xAxis:{
             type: 'category',
-            boundaryGap: false,
-            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
-          }
-        ],
-        yAxis: [
-          {
+            // boundaryGap: false,
+            data: []
+          },
+        yAxis: {
             min: function () { // 取最小值向下取整为最小刻度
               return 0
             },
@@ -143,7 +140,6 @@ export default {
             //   }
             // },
           },
-        ],
         series: [
           {
             name: '瑞昌',
@@ -173,7 +169,7 @@ export default {
             // emphasis: {
             //   focus: 'series'
             // },
-            data: [120, 132, 101, 134, 90, 230, 210]
+            data: []
           },
           {
             name: '邯郸',
@@ -203,7 +199,7 @@ export default {
             // emphasis: {
             //   focus: 'series'
             // },
-            data: [120, 132, 101, 134, 90, 230, 210]
+            data: []
           },
           {
             name: '株洲',
@@ -233,7 +229,7 @@ export default {
             // emphasis: {
             //   focus: 'series'
             // },
-            data: [120, 132, 101, 134, 90, 230, 210]
+            data: []
           },
           {
             name: '佳木斯',
@@ -263,7 +259,7 @@ export default {
             // emphasis: {
             //   focus: 'series'
             // },
-            data: [120, 132, 101, 134, 90, 230, 210]
+            data: []
           },
           {
             name: '成都',
@@ -293,7 +289,7 @@ export default {
             // emphasis: {
             //   focus: 'series'
             // },
-            data: [120, 132, 101, 134, 90, 230, 210]
+            data: []
           },
           {
             name: '凯盛',
@@ -323,7 +319,7 @@ export default {
             // emphasis: {
             //   focus: 'series'
             // },
-            data: [120, 132, 101, 134, 90, 230, 210]
+            data: []
           },
           {
             name: '蚌埠',
@@ -353,7 +349,7 @@ export default {
             // emphasis: {
             //   focus: 'series'
             // },
-            data: [120, 132, 101, 134, 90, 230, 210]
+            data: []
           },
         ]
       },
@@ -364,8 +360,9 @@ export default {
       // console.log(val)
       if (val === true) {
         console.log('ztl')
-        this.width = '99%'
+        this.width = 97 + '%'
         this.canvasReset()
+
         console.log(this.width)
       } else {
         this.watch = 100 + '%'
@@ -374,15 +371,20 @@ export default {
     },
     /** 全屏状态切换时，对柱子粗细和字体大小进行相应调整 */
     isFullscreen(val) {
-      if (val === true && this.isOpen === true) {
-        this.width = '99%'
+      if (val === false && this.isOpen === true) {
+        console.log(val)
+        this.width = 97 + '%'
+        this.canvasReset()
+      } else if(val === false && this.isOpen === false) {
+        this.watch = 100 + '%'
+        this.canvasReset()
       }
-      this.actualOptions.series.map((item) => {
-        item.barWidth = val ? 18 : 12;
-      });
-      this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
-      this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
-      this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
+      // this.actualOptions.series.map((item) => {
+      //   item.barWidth = val ? 18 : 12;
+      // });
+      // this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
+      // this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
+      // this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
       this.initChart(this.actualOptions);
     },
     series(val) {
@@ -390,11 +392,22 @@ export default {
         this.initChart(this.options);
         return;
       }
-      const actualOptions = JSON.parse(JSON.stringify(this.options));
-      actualOptions.series[0].data = val[0].data;
-      actualOptions.series[0].name = val[0].name;
-      actualOptions.series[1].data = val?.[1]?.data || [];
-      actualOptions.series[1].name = val?.[1]?.name || "";
+      const actualOptions = JSON.parse(JSON.stringify(this.options))
+      // console.log(actualOptions)
+      actualOptions.xAxis.data = val.times
+      // actualOptions.series.forEach((ele,index) => {
+      //   ele.data = val.index
+      // })
+      actualOptions.series[0].data = val[0]
+      actualOptions.series[1].data = val[1];
+      actualOptions.series[2].data = val[2];
+      actualOptions.series[3].data = val[3];
+      actualOptions.series[4].data = val[4];
+      actualOptions.series[5].data = val[5];
+      actualOptions.series[6].data = val[6];
+
+      // actualOptions.series[1].data = val?.[1]?.data || [];
+      // actualOptions.series[1].name = val?.[1]?.name || "";
       this.actualOptions = actualOptions;
       this.initChart(actualOptions);
     },