生产驾驶舱和设备驾驶舱

src/main/webapp/HG/BI/HGBI002.jsp

@@ -188,6 +188,7 @@
             "manage-echarts": "url:${ctx}/HG/BI/components/hipi/002/manage-echarts.vue",
             "right-manage-cockpit": "url:${ctx}/HG/BI/components/hipi/002/right-manage-cockpit.vue",
         },
+
         data() {
             return {
                 date: new Date(),

src/main/webapp/HG/BI/components/hipi/001/manage-echarts.vue

 <template>
-  <div ref="chartContainer" :style="{ width: '100%', height: '40vh' }"></div>
+  <div ref="chartContainer" :style="{ width: width+'vw', height: height + 'vh' }"></div>
 </template>
 
 <script>
 module.exports = {
   props: {
-    option: Object
+    option: {
+      type: Object,
+      required: true,
+    },
+    height: {
+      type: Number,
+      default: 35
+    },
+    width: {
+      type: Number,
+      default: 52
+    }
+  },
+  data() {
+    return {
+      chart: null,
+    };
+  },
+  watch: {
+    option: {
+      handler(newVal) {
+        if (this.chart) {
+          this.chart.setOption(newVal);
+        }
+      },
+      deep: true, // 监听对象内部属性的变化
+      immediate: true, // 在绑定时立即执行一次监听器
+    },
   },
   mounted() {
     this.initChart();
@@ -26,7 +53,7 @@ module.exports = {
       if (this.chart) {
         this.chart.resize();
       }
-    }
-  }
+    },
+  },
 };
 </script>