全屏放大

echarts-screen/src/components/CityRank.vue

@@ -1,7 +1,14 @@
 <template>
-    <div class="CityRank-container" id="cityrank">
+    <div class="wrap-container sn-container" id="cityrank">
+      <div class="sn-content">
+        <div class="sn-title">柱状图</div>
+        <div class="sn-body">
+      <div class="wrap-container">
         <div class="chart" id="chart_left1"></div>
     </div>
+    </div>
+      </div>
+    </div>
 </template>
 
 <script>
@@ -197,9 +204,14 @@
 </script>
 
 <style lang="scss" scoped>
-.CityRank-container {
+.sn-container {
+  width: 99%;
+  height: 99%;
   .chart {
-    height: 3rem;
+    height: 99%;
+    width: 99%;
+    //margin-bottom: 4%;
+    margin-right: 1%;
   }
 }
 </style>

echarts-screen/src/components/Newly.vue

@@ -1,4 +1,9 @@
 <template>
+  <div class="wrap-container sn-container">
+    <div class="sn-content">
+<!--      <div class="sn-title"></div>-->
+      <div class="sn-body">
+        <div class="wrap-container">
   <div class="Newly-container">
       <div class="tabs">
           <ul class="tab-tilte">
@@ -19,6 +24,10 @@
           </div>
       </div>
   </div>
+  </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
@@ -90,6 +99,18 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.sn-container {
+  width: 99%;
+  height: 99%;
+  //position: relative;
+
+  .chart {
+    height: 90%;
+    width: 90%;
+    //margin-bottom: 1%;
+    //margin-left: 7%;
+  }
+}
 .Newly-container {
   margin: 0 0.125rem;
   .tabs {

echarts-screen/src/components/RoseCon.vue

@@ -1,7 +1,14 @@
 <template>
-  <div class="RoseCon-container">
+  <div class="wrap-container sn-container">
+    <div class="sn-content">
+      <div class="sn-title">玫瑰图</div>
+      <div class="sn-body">
+        <div class="wrap-container">
     <div class="chart" id="chart_right2"></div>
   </div>
+  </div>
+    </div>
+  </div>
 </template>
 
 <script>
@@ -224,13 +231,16 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.RoseCon-container {
-  width: 100%;
-  position: relative;
+  .sn-container {
+    width: 99%;
+    height: 99%;
+    //position: relative;
 
-  .chart {
-    display: block;
-    height: 3rem;
+    .chart {
+      height: 90%;
+      width: 90%;
+      margin-bottom: 1%;
+      margin-left: 7%;
+    }
   }
-}
 </style>

echarts-screen/src/components/TrendCon.vue

@@ -1,29 +1,36 @@
 <template>
-  <div class="TrendCon-container">
-    <div class="chart" id="chart_left3"></div>
+  <div class="wrap-container sn-container">
+    <div class="sn-content">
+      <div class="sn-title">线状图</div>
+      <div class="sn-body">
+        <div class="wrap-container">
+          <div class="chart" id="chart_left3"></div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
-  import screenfull from "screenfull";
+import screenfull from "screenfull";
 
-  export default {
-    name: "TrendCon",
-    data() {
-      return {}
-    },
-    mounted() {
-      this.getEchartLeft3();
-    },
-    methods: {
-      getEchartLeft3() {
-        let myChart = echarts.init(document.getElementById('chart_left3'));
-        let dataC1 = [2630, 16402, 26343, 38874, 43352, 55475, 22263, 19097, 1872, 140, 1836, 936,];
-        let dataC2 = [5794, 21558, 24702, 16067, 2358, 5206, 502, 421, 62, 7, 1, 1,]
-        let dataC3 = [2761, 17238, 28060, 44730, 78630, 75993, 80813, 80904, 83824, 84507, 87457, 90271,]
+export default {
+  name: "TrendCon",
+  data() {
+    return {}
+  },
+  mounted() {
+    this.getEchartLeft3();
+  },
+  methods: {
+    getEchartLeft3() {
+      let myChart = echarts.init(document.getElementById('chart_left3'));
+      let dataC1 = [2630, 16402, 26343, 38874, 43352, 55475, 22263, 19097, 1872, 140, 1836, 936,];
+      let dataC2 = [5794, 21558, 24702, 16067, 2358, 5206, 502, 421, 62, 7, 1, 1,]
+      let dataC3 = [2761, 17238, 28060, 44730, 78630, 75993, 80813, 80904, 83824, 84507, 87457, 90271,]
 
-        var xData = function () {
-          var data = [];
+      var xData = function () {
+        var data = [];
         for (var i = 1; i < 12; i++) {
           data.push(i + "月");
         }
@@ -244,9 +251,14 @@
 </script>
 
 <style lang="scss" scoped>
-.TrendCon-container {
+.sn-container {
+  width: 99%;
+  height: 99%;
   .chart {
-    height: 3rem;
+    height: 99%;
+    width: 98.4%;
+    //margin-top: 1%;
+    margin-right: 1%;
   }
 }
 </style>

echarts-screen/src/components/wordCloud.vue

@@ -1,6 +1,13 @@
 <template>
-  <div class="word-container" id="wordcloud">
+  <div class="wrap-container sn-container" id="wordcloud">
+    <div class="sn-content">
+<!--      <div class="sn-title"></div>-->
+      <div class="sn-body">
+    <div class="wrap-container">
     <div class="chart" id="chart_right1"></div>
+    </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -193,9 +200,14 @@
 </script>
 
 <style lang="scss" scoped>
-.word-container {
+.sn-container {
+  width: 99%;
+  height: 98.4%;
   .chart {
-    height: 3rem;
+    height: 99%;
+    width: 98.4%;
+    //margin-top: 1%;
+    //margin-right: 1%;
   }
 }
 </style>

echarts-screen/src/views/Brand.vue

@@ -8,12 +8,12 @@
                     <span class="wea">{{ weatcherData.wea }}</span>
                 </div>
                 <h2>疫情数据分析</h2>
-                <div class="showTime">
-                  <span class="upDate">数据更新至 {{ date }}</span>
-                </div>
+              <div class="showTime">
+                <span class="time">数据更新至 {{ date }}</span>
+              </div>
               <div class="showTime1">
                     <span class="date">
-                      <span class="time">当前时间: {{ nowTime }}</span>
+                      <span class="time1">当前时间: {{ nowTime }}</span>
                       <span>{{ week }}</span>
           </span>
                 </div>
@@ -9932,33 +9932,51 @@
                     }
                 }
 
-                .showTime {
-                    position: absolute;
-                    right: 1.375rem;
-                    top: 0.5rem;
-                    color: rgba(126, 240, 255, 0.7);
-                    display: flex;
+              .showTime {
+                position: absolute;
+                right: 4rem;
+                top: 0.8rem;
+                color: rgba(126, 240, 255, 0.7);
+                display: flex;
 
-                    .time {
-                        font-size: .28rem;
-                        margin-right: .18rem;
-                    }
 
-                    .date {
-                        span {
-                            display: block;
+                .time {
+                  font-size: .18rem;
+                  margin-right: .18rem;
+                }
 
-                            &:nth-child(1) {
-                                font-size: .12rem;
-                                text-align: right;
-                            }
+              }
 
-                            &:nth-child(2) {
-                                font-size: .14rem;
-                            }
-                        }
+              .showTime1 {
+                position: absolute;
+                right: 1rem;
+                top: 0.3rem;
+                color: rgba(126, 240, 255, 0.7);
+                display: flex;
+                .date {
+                  span {
+                    display: block;
+
+
+                    //
+                    //&:nth-child(1) {
+                    //  font-size: .20rem;
+                    //  text-align: right;
+                    //}
+                    //
+                    &:nth-child(2) {
+                      font-size: .28rem;
+                      text-align: right;
+                      //right: 1rem;
                     }
+
+                  }
+                }
+                .time1 {
+                  font-size: .28rem;
                 }
+
+              }
             }
 
             .mainbox {