From a371b2163c1ecbffe495e0786a90220372c68dd0 Mon Sep 17 00:00:00 2001
From: jiminglei <836545853@qq.com>
Date: Thu, 11 May 2023 11:21:08 +0800
Subject: [PATCH] 11

---
 psdc-ui/src/views/emonitor/drgl/index.vue | 184 ++++++++++++++++++++--
 1 file changed, 168 insertions(+), 16 deletions(-)

diff --git a/psdc-ui/src/views/emonitor/drgl/index.vue b/psdc-ui/src/views/emonitor/drgl/index.vue
index f48f08b..a660c78 100644
--- a/psdc-ui/src/views/emonitor/drgl/index.vue
+++ b/psdc-ui/src/views/emonitor/drgl/index.vue
@@ -42,33 +42,25 @@
         <div class="bottom1-1">
           日用电量
         </div>
-        <div id="myEcharts" style="width: 100%; height: 86.7%">
-          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>
@@ -82,33 +74,193 @@ export default {
   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: {
-          nameTextStyle: {
-            color: 'white'
+          type: 'value',
+          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',
+          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.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',
+          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',
+          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 () {//自适应大小
+        myChart4.resize();
       };
     });
   },