驾驶舱对接

src/views/copilot/components/LineChartBase.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="elsChart" :style="{ height: '100%',width: width}"></div>
+    <div ref="elsChart" :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: {
@@ -84,19 +84,16 @@ export default {
         // },
         grid: {
           left: '3%',
-          right: '4%',
+          right: '2%',
           bottom: '3%',
           containLabel: true
         },
-        xAxis: [
-          {
+        xAxis:{
             type: 'category',
             boundaryGap: false,
             data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
-          }
-        ],
-        yAxis: [
-          {
+          },
+        yAxis: {
             min: function () { // 取最小值向下取整为最小刻度
               return 0
             },
@@ -143,7 +140,6 @@ export default {
             //   }
             // },
           },
-        ],
         series: [
           {
             name: '瑞昌',
@@ -367,22 +363,31 @@ export default {
   watch: {
     isOpen(val) {
       if (val === true) {
-        this.width = '99%'
+        this.width = 97 + '%'
         this.canvasReset()
         console.log(this.width)
       } else {
         this.watch = 100 + '%'
         this.canvasReset()
+
       }
     },
     /** 全屏状态切换时，对柱子粗细和字体大小进行相应调整 */
     isFullscreen(val) {
-      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;
+      if (val === false && this.isOpen === true) {
+        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.initChart(this.actualOptions);
     },
     series(val) {
@@ -391,21 +396,26 @@ export default {
         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 || "";
+      actualOptions.xAxis.data = val.times
+      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];
+
       this.actualOptions = actualOptions;
       this.initChart(actualOptions);
     },
   },
 
   mounted() {
-    // if (screenfull.isEnabled) {
-    //   screenfull.on("change", () => {
-    //     this.isFullscreen = screenfull.isFullscreen;
-    //   });
-    // }
+    if (screenfull.isEnabled) {
+      screenfull.on("change", () => {
+        this.isFullscreen = screenfull.isFullscreen;
+      });
+    }
     this.actualOptions = this.options
     this.canvasReset();
     window.addEventListener("resize", this.canvasReset);