From b3f86390d4bfad2cb5ad00dc179533f773ba5bb0 Mon Sep 17 00:00:00 2001
From: jiminglei <836545853@qq.com>
Date: Thu, 11 May 2023 16:39:40 +0800
Subject: [PATCH] 11

---
 psdc-ui/src/views/emonitor/db/index.vue    | 180 +++++++++++++++-
 psdc-ui/src/views/emonitor/drgl/index.vue  |  32 ++-
 psdc-ui/src/views/emonitor/frdl/index.vue  | 224 +++++++++++++++++--
 psdc-ui/src/views/emonitor/kqyrb/index.vue | 239 +++++++++++++++++++--
 psdc-ui/src/views/emonitor/wdcgq/index.vue |  73 ++++++-
 psdc-ui/src/views/emonitor/xrgl/index.vue  | 239 +++++++++++++++++++--
 6 files changed, 923 insertions(+), 64 deletions(-)

diff --git a/psdc-ui/src/views/emonitor/db/index.vue b/psdc-ui/src/views/emonitor/db/index.vue
index f49338e..f48ef9e 100644
--- a/psdc-ui/src/views/emonitor/db/index.vue
+++ b/psdc-ui/src/views/emonitor/db/index.vue
@@ -35,17 +35,13 @@
         <div class="mid1-1">
           当前功率
         </div>
-        <div>
-          pic
-        </div>
+        <div id="myEcharts" style="width: 100%; height: 88.6%"></div>
       </div>
       <div class="mid2">
         <div class="mid2-1">
           当前功率总览
         </div>
-        <div>
-          pic
-        </div>
+        <div id="myEcharts2" style="width: 100%; height: 88.6%"></div>
       </div>
     </div>
     <div class="bottom">
@@ -53,16 +49,178 @@
         <div class="bottom1-1">
           今日用电量总览
         </div>
-        <div>
-          pic
-        </div>
+        <div id="myEcharts3" style="width: 100%; height: 88.6%"></div>
       </div>
     </div>
   </div>
 </template>
 
-<script setup name="Index">
-
+<script  name="Index">
+import { onMounted } from "vue";
+import * as echarts from 'echarts';
+export default {
+  name: "db",
+  setup() {
+    onMounted(() => {//需要获取到element,所以是onMounted的Hook
+      let myChart = echarts.init(document.getElementById("myEcharts"));
+      let myChart2 = echarts.init(document.getElementById("myEcharts2"));
+      let myChart3 = echarts.init(document.getElementById("myEcharts3"));
+      // 绘制图表
+      myChart.setOption({
+        series: [
+          {
+            type: 'gauge',
+            axisLine: {
+              lineStyle: {
+                width: 10,
+                color: [
+                  [0.3, '#67e0e3'],
+                  [0.7, '#37a2da'],
+                  [1, '#fd666d']
+                ]
+              }
+            },
+            pointer: {
+              itemStyle: {
+                color: 'inherit'
+              }
+            },
+            // axisTick: {
+            //   distance: -30,
+            //   length: 8,
+            //   lineStyle: {
+            //     color: '#fff',
+            //     width: 2
+            //   }
+            // },
+            // splitLine: {
+            //   distance: -30,
+            //   length: 30,
+            //   lineStyle: {
+            //     color: '#fff',
+            //     width: 4
+            //   }
+            // },
+            axisLabel: {
+              color: 'inherit',
+              distance: 10,
+              fontSize: 10
+            },
+            detail: {
+              valueAnimation: true,
+              formatter: '{value} kW',
+              color: 'inherit'
+            },
+            data: [
+              {
+                value: 70
+              }
+            ]
+          }
+        ]
+      });
+      window.onresize = function () {//自适应大小
+        myChart.resize();
+      };
+      myChart3.setOption({
+        title: {},
+        tooltip: {},
+        textStyle:{
+          color:'#BEC3DA'
+        },
+        xAxis: {
+          data: ["12-3", "12-4", "12-5", "12-6", "12-7", "12-8"],
+          axisLine:{
+            lineStyle:{
+              color:'#BEC3DA',
+              type:'dashed'
+            }
+          }
+        },
+        yAxis: {
+          type: 'value',
+          name: "kWh",
+          splitLine:{
+            show:true,
+            lineStyle:{
+              type:'dashed',
+              color:'#BEC3DA'
+            }
+          },
+          axisLine: {
+            show: true,
+            lineStyle:{
+              type:'dashed',
+              color:'#BEC3DA'
+            }
+          },
+        },
+        series: [
+          {
+            name: "今日用电量",
+            type: "bar",
+            data: [5, 20, 36, 10, 10, 20],
+            itemStyle:{
+              color:'#2F8EE0'
+            },
+          },
+        ],
+      });
+      window.onresize = function () {//自适应大小
+        myChart3.resize();
+      };
+      myChart2.setOption({
+        title: {},
+        tooltip: {},
+        textStyle:{
+          color:'#BEC3DA'
+        },
+        xAxis: {
+          data: ["12-3", "12-4", "12-5", "12-6", "12-7", "12-8"],
+          axisLine:{
+            lineStyle:{
+              color:'#BEC3DA',
+              type:'dashed'
+            }
+          }
+        },
+        yAxis: {
+          type: 'value',
+          name: "kW",
+          splitLine:{
+            show:true,
+            lineStyle:{
+              type:'dashed',
+              color:'#BEC3DA'
+            }
+          },
+          axisLine: {
+            show: true,
+            lineStyle:{
+              type:'dashed',
+              color:'#BEC3DA'
+            }
+          },
+        },
+        series: [
+          {
+            name: "当前功率",
+            type: "line",
+            data: [5, 20, 36, 10, 10, 20],
+            itemStyle:{
+              color:'#2F8EE0'
+            },
+          },
+        ],
+      });
+      window.onresize = function () {//自适应大小
+        myChart2.resize();
+      };
+    });
+  },
+  components: {},
+  mounted() {},
+};
 
 
 </script>
diff --git a/psdc-ui/src/views/emonitor/drgl/index.vue b/psdc-ui/src/views/emonitor/drgl/index.vue
index a660c78..9a84059 100644
--- a/psdc-ui/src/views/emonitor/drgl/index.vue
+++ b/psdc-ui/src/views/emonitor/drgl/index.vue
@@ -95,6 +95,7 @@ export default {
         },
         yAxis: {
           type: 'value',
+          name: "kWh",
           splitLine:{
             show:true,
             lineStyle:{
@@ -112,7 +113,7 @@ export default {
           },
         series: [
           {
-            name: "用户量",
+            name: "日用电量",
             type: "bar",
             data: [5, 20, 36, 10, 10, 20],
             itemStyle:{
@@ -141,6 +142,7 @@ export default {
         },
         yAxis: {
           type: 'value',
+          name: "kWh",
           splitLine:{
             show:true,
             lineStyle:{
@@ -158,7 +160,7 @@ export default {
         },
         series: [
           {
-            name: "用户量",
+            name: "月用电量",
             type: "bar",
             data: [5, 20, 36, 10, 10, 20],
             itemStyle:{
@@ -187,6 +189,7 @@ export default {
         },
         yAxis: {
           type: 'value',
+          name: "kW",
           splitLine:{
             show:true,
             lineStyle:{
@@ -204,7 +207,7 @@ export default {
         },
         series: [
           {
-            name: "用户量",
+            name: "当前功率",
             type: "line",
             data: [5, 20, 36, 10, 10, 20],
             itemStyle:{
@@ -219,6 +222,12 @@ export default {
       myChart4.setOption({
         title: {},
         tooltip: {},
+        legend: {
+          data: ['进水', '出水'],
+          textStyle:{
+            color:'#BEC3DA'
+          }
+        },
         textStyle:{
           color:'#BEC3DA'
         },
@@ -233,6 +242,7 @@ export default {
         },
         yAxis: {
           type: 'value',
+          name: "℃",
           splitLine:{
             show:true,
             lineStyle:{
@@ -250,12 +260,22 @@ export default {
         },
         series: [
           {
-            name: "用户量",
-            type: "line",
-            data: [5, 20, 36, 10, 10, 20],
+            name: '进水',
+            type: 'line',
+            stack: 'Total',
+            itemStyle:{
+              color:'#2F8EE0'
+            },
+            data: [120, 132, 101, 134, 90, 230, 210]
+          },
+          {
+            name: '出水',
+            type: 'line',
+            stack: 'Total',
             itemStyle:{
               color:'#2F8EE0'
             },
+            data: [220, 182, 191, 234, 290, 330, 310]
           },
         ],
       });
diff --git a/psdc-ui/src/views/emonitor/frdl/index.vue b/psdc-ui/src/views/emonitor/frdl/index.vue
index b76f813..a14818e 100644
--- a/psdc-ui/src/views/emonitor/frdl/index.vue
+++ b/psdc-ui/src/views/emonitor/frdl/index.vue
@@ -38,40 +38,236 @@
         <div class="bottom1-1">
           日用电量
         </div>
-        <div>
-          pic
-        </div>
+        <div id="myEcharts" style="width: 100%; height: 86.7%"></div>
       </div>
       <div class="bottom1">
         <div class="bottom1-1">
           月用电量
         </div>
-        <div>
-          pic
-        </div>
+        <div id="myEcharts2" style="width: 100%; height: 86.7%"></div>
       </div>
       <div class="bottom1">
         <div class="bottom1-1">
           当前功率
         </div>
-        <div>
-          pic
-        </div>
+        <div id="myEcharts3" style="width: 100%; height: 86.7%"></div>
       </div>
       <div class="bottom1">
         <div class="bottom1-1">
           当前温度
         </div>
-        <div>
-          pic
-        </div>
+        <div id="myEcharts4" style="width: 100%; height: 86.7%"></div>
       </div>
     </div>
   </div>
 </template>
 
-<script setup name="Index">
-
+<script name="Index">
+import { onMounted } from "vue";
+import * as echarts from 'echarts';
+export default {
+  name: "frdl",
+  setup() {
+    onMounted(() => {//需要获取到element,所以是onMounted的Hook
+      let myChart = echarts.init(document.getElementById("myEcharts"));
+      let myChart2 = echarts.init(document.getElementById("myEcharts2"));
+      let myChart3 = echarts.init(document.getElementById("myEcharts3"));
+      let myChart4 = echarts.init(document.getElementById("myEcharts4"));
+      // 绘制图表
+      myChart.setOption({
+        title: {},
+        tooltip: {},
+        textStyle:{
+          color:'#BEC3DA'
+        },
+        xAxis: {
+          data: ["12-3", "12-4", "12-5", "12-6", "12-7", "12-8"],
+          axisLine:{
+            lineStyle:{
+              color:'#BEC3DA',
+              type:'dashed'
+            }
+          }
+        },
+        yAxis: {
+          type: 'value',
+          name: "kWh",
+          splitLine:{
+            show:true,
+            lineStyle:{
+              type:'dashed',
+              color:'#BEC3DA'
+            }
+          },
+          axisLine: {
+            show: true,
+            lineStyle:{
+              type:'dashed',
+              color:'#BEC3DA'
+            }
+          },
+        },
+        series: [
+          {
+            name: "日用电量",
+            type: "bar",
+            data: [5, 20, 36, 10, 10, 20],
+            itemStyle:{
+              color:'#2F8EE0'
+            },
+          },
+        ],
+      });
+      window.onresize = function () {//自适应大小
+        myChart.resize();
+      };
+      myChart2.setOption({
+        title: {},
+        tooltip: {},
+        textStyle:{
+          color:'#BEC3DA'
+        },
+        xAxis: {
+          data: ["12-3", "12-4", "12-5", "12-6", "12-7", "12-8"],
+          axisLine:{
+            lineStyle:{
+              color:'#BEC3DA',
+              type:'dashed'
+            }
+          }
+        },
+        yAxis: {
+          type: 'value',
+          name: "kWh",
+          splitLine:{
+            show:true,
+            lineStyle:{
+              type:'dashed',
+              color:'#BEC3DA'
+            }
+          },
+          axisLine: {
+            show: true,
+            lineStyle:{
+              type:'dashed',
+              color:'#BEC3DA'
+            }
+          },
+        },
+        series: [
+          {
+            name: "月用电量",
+            type: "bar",
+            data: [5, 20, 36, 10, 10, 20],
+            itemStyle:{
+              color:'#2F8EE0'
+            },
+          },
+        ],
+      });
+      window.onresize = function () {//自适应大小
+        myChart2.resize();
+      };
+      myChart3.setOption({
+        title: {},
+        tooltip: {},
+        textStyle:{
+          color:'#BEC3DA'
+        },
+        xAxis: {
+          data: ["12-3", "12-4", "12-5", "12-6", "12-7", "12-8"],
+          axisLine:{
+            lineStyle:{
+              color:'#BEC3DA',
+              type:'dashed'
+            }
+          }
+        },
+        yAxis: {
+          type: 'value',
+          name: "kW",
+          splitLine:{
+            show:true,
+            lineStyle:{
+              type:'dashed',
+              color:'#BEC3DA'
+            }
+          },
+          axisLine: {
+            show: true,
+            lineStyle:{
+              type:'dashed',
+              color:'#BEC3DA'
+            }
+          },
+        },
+        series: [
+          {
+            name: "当前功率",
+            type: "line",
+            data: [5, 20, 36, 10, 10, 20],
+            itemStyle:{
+              color:'#2F8EE0'
+            },
+          },
+        ],
+      });
+      window.onresize = function () {//自适应大小
+        myChart3.resize();
+      };
+      myChart4.setOption({
+        title: {},
+        tooltip: {},
+        textStyle:{
+          color:'#BEC3DA'
+        },
+        xAxis: {
+          data: ["12-3", "12-4", "12-5", "12-6", "12-7", "12-8"],
+          axisLine:{
+            lineStyle:{
+              color:'#BEC3DA',
+              type:'dashed'
+            }
+          }
+        },
+        yAxis: {
+          type: 'value',
+          name: "℃",
+          splitLine:{
+            show:true,
+            lineStyle:{
+              type:'dashed',
+              color:'#BEC3DA'
+            }
+          },
+          axisLine: {
+            show: true,
+            lineStyle:{
+              type:'dashed',
+              color:'#BEC3DA'
+            }
+          },
+        },
+        series: [
+          {
+            name: '当前温度',
+            type: 'line',
+            stack: 'Total',
+            itemStyle:{
+              color:'#2F8EE0'
+            },
+            data: [120, 132, 101, 134, 90, 230, 210]
+          },
+        ],
+      });
+      window.onresize = function () {//自适应大小
+        myChart4.resize();
+      };
+    });
+  },
+  components: {},
+  mounted() {},
+};
 
 
 </script>
diff --git a/psdc-ui/src/views/emonitor/kqyrb/index.vue b/psdc-ui/src/views/emonitor/kqyrb/index.vue
index d6f00b6..3dcb56c 100644
--- a/psdc-ui/src/views/emonitor/kqyrb/index.vue
+++ b/psdc-ui/src/views/emonitor/kqyrb/index.vue
@@ -42,40 +42,251 @@
         <div class="bottom1-1">
           日用电量
         </div>
-        <div>
-          pic
-        </div>
+        <div id="myEcharts" style="width: 100%; height: 86.7%"></div>
       </div>
       <div class="bottom1">
         <div class="bottom1-1">
           月用电量
         </div>
-        <div>
-          pic
-        </div>
+        <div id="myEcharts2" style="width: 100%; height: 86.7%"></div>
       </div>
       <div class="bottom1">
         <div class="bottom1-1">
           当前功率
         </div>
-        <div>
-          pic
-        </div>
+        <div id="myEcharts3" style="width: 100%; height: 86.7%"></div>
       </div>
       <div class="bottom1">
         <div class="bottom1-1">
           当前温度
         </div>
-        <div>
-          pic
-        </div>
+        <div id="myEcharts4" style="width: 100%; height: 86.7%"></div>
       </div>
     </div>
   </div>
 </template>
 
-<script setup name="Index">
-
+<script  name="Index">
+import { onMounted } from "vue";
+import * as echarts from 'echarts';
+export default {
+  name: "kqyrb",
+  setup() {
+    onMounted(() => {//需要获取到element,所以是onMounted的Hook
+      let myChart = echarts.init(document.getElementById("myEcharts"));
+      let myChart2 = echarts.init(document.getElementById("myEcharts2"));
+      let myChart3 = echarts.init(document.getElementById("myEcharts3"));
+      let myChart4 = echarts.init(document.getElementById("myEcharts4"));
+      // 绘制图表
+      myChart.setOption({
+        title: {},
+        tooltip: {},
+        textStyle:{
+          color:'#BEC3DA'
+        },
+        xAxis: {
+          data: ["12-3", "12-4", "12-5", "12-6", "12-7", "12-8"],
+          axisLine:{
+            lineStyle:{
+              color:'#BEC3DA',
+              type:'dashed'
+            }
+          }
+        },
+        yAxis: {
+          type: 'value',
+          name: "kWh",
+          splitLine:{
+            show:true,
+            lineStyle:{
+              type:'dashed',
+              color:'#BEC3DA'
+            }
+          },
+          axisLine: {
+            show: true,
+            lineStyle:{
+              type:'dashed',
+              color:'#BEC3DA'
+            }
+          },
+        },
+        series: [
+          {
+            name: "日用电量",
+            type: "bar",
+            data: [5, 20, 36, 10, 10, 20],
+            itemStyle:{
+              color:'#2F8EE0'
+            },
+          },
+        ],
+      });
+      window.onresize = function () {//自适应大小
+        myChart.resize();
+      };
+      myChart2.setOption({
+        title: {},
+        tooltip: {},
+        textStyle:{
+          color:'#BEC3DA'
+        },
+        xAxis: {
+          data: ["12-3", "12-4", "12-5", "12-6", "12-7", "12-8"],
+          axisLine:{
+            lineStyle:{
+              color:'#BEC3DA',
+              type:'dashed'
+            }
+          }
+        },
+        yAxis: {
+          type: 'value',
+          name: "kWh",
+          splitLine:{
+            show:true,
+            lineStyle:{
+              type:'dashed',
+              color:'#BEC3DA'
+            }
+          },
+          axisLine: {
+            show: true,
+            lineStyle:{
+              type:'dashed',
+              color:'#BEC3DA'
+            }
+          },
+        },
+        series: [
+          {
+            name: "月用电量",
+            type: "bar",
+            data: [5, 20, 36, 10, 10, 20],
+            itemStyle:{
+              color:'#2F8EE0'
+            },
+          },
+        ],
+      });
+      window.onresize = function () {//自适应大小
+        myChart2.resize();
+      };
+      myChart3.setOption({
+        title: {},
+        tooltip: {},
+        textStyle:{
+          color:'#BEC3DA'
+        },
+        xAxis: {
+          data: ["12-3", "12-4", "12-5", "12-6", "12-7", "12-8"],
+          axisLine:{
+            lineStyle:{
+              color:'#BEC3DA',
+              type:'dashed'
+            }
+          }
+        },
+        yAxis: {
+          type: 'value',
+          name: "kW",
+          splitLine:{
+            show:true,
+            lineStyle:{
+              type:'dashed',
+              color:'#BEC3DA'
+            }
+          },
+          axisLine: {
+            show: true,
+            lineStyle:{
+              type:'dashed',
+              color:'#BEC3DA'
+            }
+          },
+        },
+        series: [
+          {
+            name: "当前功率",
+            type: "line",
+            data: [5, 20, 36, 10, 10, 20],
+            itemStyle:{
+              color:'#2F8EE0'
+            },
+          },
+        ],
+      });
+      window.onresize = function () {//自适应大小
+        myChart3.resize();
+      };
+      myChart4.setOption({
+        title: {},
+        tooltip: {},
+        legend: {
+          data: ['进水', '出水'],
+          textStyle:{
+            color:'#BEC3DA'
+          }
+        },
+        textStyle:{
+          color:'#BEC3DA'
+        },
+        xAxis: {
+          data: ["12-3", "12-4", "12-5", "12-6", "12-7", "12-8"],
+          axisLine:{
+            lineStyle:{
+              color:'#BEC3DA',
+              type:'dashed'
+            }
+          }
+        },
+        yAxis: {
+          type: 'value',
+          name: "℃",
+          splitLine:{
+            show:true,
+            lineStyle:{
+              type:'dashed',
+              color:'#BEC3DA'
+            }
+          },
+          axisLine: {
+            show: true,
+            lineStyle:{
+              type:'dashed',
+              color:'#BEC3DA'
+            }
+          },
+        },
+        series: [
+          {
+            name: '进水',
+            type: 'line',
+            stack: 'Total',
+            itemStyle:{
+              color:'#2F8EE0'
+            },
+            data: [120, 132, 101, 134, 90, 230, 210]
+          },
+          {
+            name: '出水',
+            type: 'line',
+            stack: 'Total',
+            itemStyle:{
+              color:'#2F8EE0'
+            },
+            data: [220, 182, 191, 234, 290, 330, 310]
+          },
+        ],
+      });
+      window.onresize = function () {//自适应大小
+        myChart4.resize();
+      };
+    });
+  },
+  components: {},
+  mounted() {},
+};
 
 
 </script>
diff --git a/psdc-ui/src/views/emonitor/wdcgq/index.vue b/psdc-ui/src/views/emonitor/wdcgq/index.vue
index e6a39cb..289628b 100644
--- a/psdc-ui/src/views/emonitor/wdcgq/index.vue
+++ b/psdc-ui/src/views/emonitor/wdcgq/index.vue
@@ -64,16 +64,79 @@
         <div class="bottom1-1">
           实时温度总览
         </div>
-        <div>
-         pic
-        </div>
+        <div id="myEcharts" style="width: 100%; height: 91%"></div>
       </div>
     </div>
   </div>
 </template>
 
-<script setup name="Index">
-
+<script  name="Index">
+import { onMounted } from "vue";
+import * as echarts from 'echarts';
+export default {
+  name: "wdcgq",
+  setup() {
+    onMounted(() => {//需要获取到element,所以是onMounted的Hook
+      let myChart = echarts.init(document.getElementById("myEcharts"));
+      // 绘制图表
+      myChart.setOption({
+        title: {},
+        tooltip: {},
+        legend: {
+          data: ['温度传感器1','温度传感器2'],
+          textStyle:{
+            color:'#BEC3DA'
+          }
+        },
+        textStyle:{
+          color:'#BEC3DA'
+        },
+        xAxis: {
+          data: ["12-3", "12-4", "12-5", "12-6", "12-7", "12-8"],
+          axisLine:{
+            lineStyle:{
+              color:'#BEC3DA',
+              type:'dashed'
+            }
+          }
+        },
+        yAxis: {
+          type: 'value',
+          name: "℃",
+          splitLine:{
+            show:true,
+            lineStyle:{
+              type:'dashed',
+              color:'#BEC3DA'
+            }
+          },
+          axisLine: {
+            show: true,
+            lineStyle:{
+              type:'dashed',
+              color:'#BEC3DA'
+            }
+          },
+        },
+        series: [
+          {
+            name: "温度传感器1",
+            type: "line",
+            data: [5, 20, 36, 10, 10, 20],
+            itemStyle:{
+              color:'#2F8EE0'
+            },
+          },
+        ],
+      });
+      window.onresize = function () {//自适应大小
+        myChart.resize();
+      };
+    });
+  },
+  components: {},
+  mounted() {},
+};
 
 
 </script>
diff --git a/psdc-ui/src/views/emonitor/xrgl/index.vue b/psdc-ui/src/views/emonitor/xrgl/index.vue
index d6f00b6..b9f77d5 100644
--- a/psdc-ui/src/views/emonitor/xrgl/index.vue
+++ b/psdc-ui/src/views/emonitor/xrgl/index.vue
@@ -42,40 +42,251 @@
         <div class="bottom1-1">
           日用电量
         </div>
-        <div>
-          pic
-        </div>
+        <div id="myEcharts" style="width: 100%; height: 86.7%"></div>
       </div>
       <div class="bottom1">
         <div class="bottom1-1">
           月用电量
         </div>
-        <div>
-          pic
-        </div>
+        <div id="myEcharts2" style="width: 100%; height: 86.7%"></div>
       </div>
       <div class="bottom1">
         <div class="bottom1-1">
           当前功率
         </div>
-        <div>
-          pic
-        </div>
+        <div id="myEcharts3" style="width: 100%; height: 86.7%"></div>
       </div>
       <div class="bottom1">
         <div class="bottom1-1">
           当前温度
         </div>
-        <div>
-          pic
-        </div>
+        <div id="myEcharts4" style="width: 100%; height: 86.7%"></div>
       </div>
     </div>
   </div>
 </template>
 
-<script setup name="Index">
-
+<script name="Index">
+import { onMounted } from "vue";
+import * as echarts from 'echarts';
+export default {
+  name: "xrgl",
+  setup() {
+    onMounted(() => {//需要获取到element,所以是onMounted的Hook
+      let myChart = echarts.init(document.getElementById("myEcharts"));
+      let myChart2 = echarts.init(document.getElementById("myEcharts2"));
+      let myChart3 = echarts.init(document.getElementById("myEcharts3"));
+      let myChart4 = echarts.init(document.getElementById("myEcharts4"));
+      // 绘制图表
+      myChart.setOption({
+        title: {},
+        tooltip: {},
+        textStyle:{
+          color:'#BEC3DA'
+        },
+        xAxis: {
+          data: ["12-3", "12-4", "12-5", "12-6", "12-7", "12-8"],
+          axisLine:{
+            lineStyle:{
+              color:'#BEC3DA',
+              type:'dashed'
+            }
+          }
+        },
+        yAxis: {
+          type: 'value',
+          name: "kWh",
+          splitLine:{
+            show:true,
+            lineStyle:{
+              type:'dashed',
+              color:'#BEC3DA'
+            }
+          },
+          axisLine: {
+            show: true,
+            lineStyle:{
+              type:'dashed',
+              color:'#BEC3DA'
+            }
+          },
+        },
+        series: [
+          {
+            name: "日用电量",
+            type: "bar",
+            data: [5, 20, 36, 10, 10, 20],
+            itemStyle:{
+              color:'#2F8EE0'
+            },
+          },
+        ],
+      });
+      window.onresize = function () {//自适应大小
+        myChart.resize();
+      };
+      myChart2.setOption({
+        title: {},
+        tooltip: {},
+        textStyle:{
+          color:'#BEC3DA'
+        },
+        xAxis: {
+          data: ["12-3", "12-4", "12-5", "12-6", "12-7", "12-8"],
+          axisLine:{
+            lineStyle:{
+              color:'#BEC3DA',
+              type:'dashed'
+            }
+          }
+        },
+        yAxis: {
+          type: 'value',
+          name: "kWh",
+          splitLine:{
+            show:true,
+            lineStyle:{
+              type:'dashed',
+              color:'#BEC3DA'
+            }
+          },
+          axisLine: {
+            show: true,
+            lineStyle:{
+              type:'dashed',
+              color:'#BEC3DA'
+            }
+          },
+        },
+        series: [
+          {
+            name: "月用电量",
+            type: "bar",
+            data: [5, 20, 36, 10, 10, 20],
+            itemStyle:{
+              color:'#2F8EE0'
+            },
+          },
+        ],
+      });
+      window.onresize = function () {//自适应大小
+        myChart2.resize();
+      };
+      myChart3.setOption({
+        title: {},
+        tooltip: {},
+        textStyle:{
+          color:'#BEC3DA'
+        },
+        xAxis: {
+          data: ["12-3", "12-4", "12-5", "12-6", "12-7", "12-8"],
+          axisLine:{
+            lineStyle:{
+              color:'#BEC3DA',
+              type:'dashed'
+            }
+          }
+        },
+        yAxis: {
+          type: 'value',
+          name: "kW",
+          splitLine:{
+            show:true,
+            lineStyle:{
+              type:'dashed',
+              color:'#BEC3DA'
+            }
+          },
+          axisLine: {
+            show: true,
+            lineStyle:{
+              type:'dashed',
+              color:'#BEC3DA'
+            }
+          },
+        },
+        series: [
+          {
+            name: "当前功率",
+            type: "line",
+            data: [5, 20, 36, 10, 10, 20],
+            itemStyle:{
+              color:'#2F8EE0'
+            },
+          },
+        ],
+      });
+      window.onresize = function () {//自适应大小
+        myChart3.resize();
+      };
+      myChart4.setOption({
+        title: {},
+        tooltip: {},
+        legend: {
+          data: ['进水', '出水'],
+          textStyle:{
+            color:'#BEC3DA'
+          }
+        },
+        textStyle:{
+          color:'#BEC3DA'
+        },
+        xAxis: {
+          data: ["12-3", "12-4", "12-5", "12-6", "12-7", "12-8"],
+          axisLine:{
+            lineStyle:{
+              color:'#BEC3DA',
+              type:'dashed'
+            }
+          }
+        },
+        yAxis: {
+          type: 'value',
+          name: "℃",
+          splitLine:{
+            show:true,
+            lineStyle:{
+              type:'dashed',
+              color:'#BEC3DA'
+            }
+          },
+          axisLine: {
+            show: true,
+            lineStyle:{
+              type:'dashed',
+              color:'#BEC3DA'
+            }
+          },
+        },
+        series: [
+          {
+            name: '进水',
+            type: 'line',
+            stack: 'Total',
+            itemStyle:{
+              color:'#2F8EE0'
+            },
+            data: [120, 132, 101, 134, 90, 230, 210]
+          },
+          {
+            name: '出水',
+            type: 'line',
+            stack: 'Total',
+            itemStyle:{
+              color:'#2F8EE0'
+            },
+            data: [220, 182, 191, 234, 290, 330, 310]
+          },
+        ],
+      });
+      window.onresize = function () {//自适应大小
+        myChart4.resize();
+      };
+    });
+  },
+  components: {},
+  mounted() {},
+};
 
 
 </script>