123

src/App.vue

@@ -94,7 +94,6 @@ export default {
   .main {
     height: 100vh;
     overflow: auto;
-    padding: 10px;
   }
    ::v-deep .el-card__body {
     height: 100%;

src/components/Bindex.vue

@@ -7,12 +7,12 @@
         <div class="one-card">
             <div class="one-card-content">
               <div>
-                <p>生物滞留区域面积</p>
+                <p>区域面积</p>
                 <font class="value">75</font>
                 <font>㎡</font>
               </div>
               <div>
-                <p>滞留系统液位</p>
+                <p>液位</p>
                 <font class="value">323</font>
                 <font>mm</font>
               </div>

src/components/Cindex.vue

@@ -90,7 +90,8 @@
           width: 100%;
           height: 100%;
           box-shadow: 0 0 8px #99ACB0 inset;
-          
+          display: flex;
+          align-items: center;
           h2 {
             padding: 10px;
             text-align: center;

src/components/Gindex.vue

@@ -42,7 +42,7 @@
                 <font>℃</font>
               </div>
               <div>
-                <p>热岛减率</p>
+                <p>热岛消减率</p>
                 <font class="value">21</font>
                 <font>%</font>
               </div>
@@ -90,7 +90,8 @@
           width: 100%;
           height: 100%;
           box-shadow: 0 0 8px #99ACB0 inset;
-          
+          display: flex;
+          align-items: center;
           h2 {
             padding: 10px;
             text-align: center;

src/components/LineEchart.vue

@@ -35,8 +35,8 @@ export default {
       if (store.state.selectTab === 'pure') {
         if (store.state.selectDate === 1) {
           data = {
-            legend: ["月余氯查询"],
+            legend: {},
-            color: ["#62d3ff"],
+            color: props.echartData.color,
             xData: [
               "1",
               "2",
@@ -77,8 +77,8 @@ export default {
           };
         } else if (store.state.selectDate === 2) {
           data = {
-            legend: ["年余氯查询"],
+            legend: {},
-            color: ["#62d3ff"],
+            color: props.echartData.color,
             xData: [
               "1",
               "2",
@@ -100,8 +100,8 @@ export default {
           };
         } else if (store.state.selectDate === 0) {
           var data = {
-            legend: ["日余氯查询"],
+            legend: {},
-            color: ["#62d3ff"],
+            color: props.echartData.color,
             xData: [
               "00",
               "01",
@@ -138,8 +138,8 @@ export default {
       } else {
         if (store.state.selectDate === 1) {
           data = {
-            legend: ["月余氯查询"],
+            legend: {},
-            color: ["#62d3ff"],
+            color: props.echartData.color,
             xData: [
               "1",
               "2",
@@ -179,8 +179,8 @@ export default {
           };
         } else if (store.state.selectDate === 2) {
           data = {
-            legend: ["年余氯查询"],
+            legend: {},
-            color: ["#62d3ff"],
+            color: props.echartData.color,
             xData: [
               "1",
               "2",
@@ -202,8 +202,8 @@ export default {
           };
         } else if (store.state.selectDate === 0) {
           var data = {
-            legend: ["日余氯查询"],
+            legend:  {},
-            color: ["#62d3ff"],
+            color: props.echartData.color,
             xData: [
               "00",
               "01",

src/components/Quality.vue

@@ -22,7 +22,7 @@
           :class="'div' + index"
           class="process-content"
         >
-          <div>{{ item.title }}</div>
+          <!-- <div>{{ item.title }}</div> -->
           <div v-for="(it, i) of item.data" :key="i">
             <Process :itemData="it"></Process>
           </div>
@@ -63,61 +63,65 @@ export default {
         {
           id: "echart0",
           title: "余氯查询",
+          color: ['#6fdbce']
         },
         {
           id: "echart1",
           title: "浊度查询",
+          color: ['#b7e707']
         },
         {
           id: "echart2",
           title: "氨氮查询",
+          color: ['#f58383']
         },
         {
           id: "echart3",
           title: "COD查询",
+          color: ['#00ffff']
         },
       ],
       dataList: [
         {
-          title: "余氯:",
+          title: "余氯",
           data: [
             {
               id: "0",
               color: "#6fdbce",
-              label: "COD1",
+              label: "余氯: ",
               value: "20",
             },
           ],
         },
         {
-          title: "浊度:",
+          title: "浊度",
           data: [
             {
               id: "1",
-              color: "#00baff",
+              color: "#b7e707",
-              label: "COD2",
+              label: "浊度:",
               value: "80",
             }
           ],
         },
         {
-          title: "氨氮:",
+          title: "氨氮",
           data: [
             {
               id: "3",
-              color: "#308286",
+              color: "#f58383",
-              label: "氨氮",
+              label: "氨氮: ",
               value: "80",
             },
           ],
         },
         {
-          title: "COD:",
+          title: "COD",
           data: [
             {
               id: "4",
-              color: "#00baff",
+              color: "#00ffff",
-              label: "COD",
+              label: "COD: ",
               value: "80",
             }
           ],

src/components/Zhibiao1.vue

@@ -1,10 +1,19 @@
 <template>
   <div class="analyse-container">
+    <div>
       <div id="echartDiv1" class="echartDiv100"></div>
       <div id="echartDiv3" class="echartDiv100"></div>
       <div id="echartDiv2" class="echartDiv100"></div>
       <div id="echartDiv4" class="echartDiv100"></div>
     </div>
+    <div>
+      <div id="echartDiv5" class="echartDiv100"></div>
+      <div id="echartDiv6" class="echartDiv100"></div>
+      <div id="echartDiv7" class="echartDiv100"></div>
+      <div id="echartDiv8" class="echartDiv100"></div>
+    </div>
+    
+  </div>
 </template>
 
 <script>
@@ -20,10 +29,14 @@ export default {
   setup() {
     const state = reactive({});
     onMounted(async () => {
-      getChartsZfl("echartDiv1", "蒸腾量");
+      getChartsZfl("echartDiv1", "径流系数");
-      getChartsZf2("echartDiv2", "SS");
+      getChartsZf2("echartDiv2", "蒸腾量");
-      getChartsZf3("echartDiv3", "氨氮");
+      getChartsZf3("echartDiv3", "COD");
-      getChartsZf4("echartDiv4", "热岛减率");
+      getChartsZf4("echartDiv4", "氨氮");
+      getChartsZf2("echartDiv5", "SS");
+      getChartsZf2("echartDiv6", "屋面温度 无绿化");
+      getChartsZf2("echartDiv7", "屋面温度 有绿化");
+      getChartsZf3("echartDiv8", "热岛消减率");
     });
     const getChartsZfl = (id, text) => {
       var dom = document.getElementById(id);
@@ -105,8 +118,8 @@ export default {
               focus: "series",
             },
             data: [
-              140, 232, 101, 264, 90, 340, 250, 140, 232, 101, 264, 90, 340,
+              parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
-              250, 140, 232, 101, 264, 90, 340, 250, 140, 232, 101,
+              parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
             ],
           },
           {
@@ -125,8 +138,8 @@ export default {
               focus: "series",
             },
             data: [
-              120, 700, 600, 500, 900, 282, 111, 120, 700, 600, 500, 900, 282,
+              parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
-              111, 234, 220, 340, 310, 234, 220, 340, 310, 220, 340,
+              parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
             ],
           },
           {
@@ -145,8 +158,8 @@ export default {
               focus: "series",
             },
             data:[
-              320, 132, 201, 334, 190, 130, 320, 132, 201, 334, 190, 130, 220,
+              parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
-              220, 320, 132, 201, 334, 190, 130, 220, 190, 130, 220,
+              parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
             ],
           },
           {
@@ -165,8 +178,8 @@ export default {
               focus: "series",
             },
             data: [
-              220, 402, 231, 134, 190, 230, 120, 200, 500, 800, 600, 700, 220,
+              parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
-              402, 231, 134, 190, 230, 120, 200, 500, 800, 600, 700,
+              parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
             ],
           },
           {
@@ -189,8 +202,8 @@ export default {
               focus: "series",
             },
             data: [
-              220, 302, 181, 30, 120, 200, 500, 800, 600, 700, 220, 402, 231,
+              parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
-              134, 190, 230, 234, 210, 290, 150, 181, 30, 120, 200,
+              parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
             ],
           },
         ],
@@ -263,8 +276,8 @@ export default {
               focus: "series",
             },
             data: [
-              120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90, 230,
+              parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
-              210, 132, 101, 134, 90, 230, 210, 134, 90, 230, 210,
+              parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
             ],
           },
           {
@@ -275,8 +288,8 @@ export default {
               focus: "series",
             },
             data: [
-              220, 182, 191, 234, 290, 330, 310, 132, 101, 134, 90, 230, 210,
+              parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
-              132, 101, 134, 90, 230, 210, 134, 90, 230, 210, 230,
+              parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
             ],
           },
           {
@@ -287,8 +300,8 @@ export default {
               focus: "series",
             },
             data: [
-              150, 232, 201, 154, 190, 330, 410, 150, 232, 201, 154, 190, 330,
+              parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
-              410, 150, 232, 201, 154, 190, 330, 410, 150, 232, 201,
+              parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
             ],
           },
           {
@@ -299,8 +312,8 @@ export default {
               focus: "series",
             },
             data: [
-              150, 232, 201, 154, 190, 330, 410, 150, 232, 201, 154, 190, 330,
+              parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
-              410, 150, 232, 201, 154, 190, 330, 410, 150, 232, 201,
+              parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
             ],
           },
           {
@@ -311,8 +324,8 @@ export default {
               focus: "series",
             },
             data:[
-              150, 232, 201, 154, 190, 330, 410, 150, 232, 201, 154, 190, 330,
+              parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
-              410, 150, 232, 201, 154, 190, 330, 410, 150, 232, 201,
+              parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
             ],
           },
         ],
@@ -384,8 +397,8 @@ export default {
               focus: "series",
             },
             data: [
-              120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90, 230,
+              parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
-              210, 132, 101, 134, 90, 230, 210, 134, 90, 230, 210,
+              parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
             ],
           },
           {
@@ -396,8 +409,8 @@ export default {
               focus: "series",
             },
             data: [
-              220, 182, 191, 234, 290, 330, 310, 132, 101, 134, 90, 230, 210,
+              parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
-              132, 101, 134, 90, 230, 210, 134, 90, 230, 210, 230,
+              parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
             ],
           },
           {
@@ -408,8 +421,8 @@ export default {
               focus: "series",
             },
             data:[
-              150, 232, 201, 154, 190, 330, 410, 150, 232, 201, 154, 190, 330,
+              parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
-              410, 150, 232, 201, 154, 190, 330, 410, 150, 232, 201,
+              parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
             ],
           },
           {
@@ -420,8 +433,8 @@ export default {
               focus: "series",
             },
             data: [
-              150, 232, 201, 154, 190, 330, 410, 150, 232, 201, 154, 190, 330,
+              parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
-              410, 150, 232, 201, 154, 190, 330, 410, 150, 232, 201,
+              parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
             ],
           },
           {
@@ -432,8 +445,8 @@ export default {
               focus: "series",
             },
             data: [
-              150, 232, 201, 154, 190, 330, 410, 150, 232, 201, 154, 190, 330,
+              parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
-              410, 150, 232, 201, 154, 190, 330, 410, 150, 232, 201,
+              parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
             ],
           },
         ],
@@ -505,8 +518,8 @@ export default {
               focus: "series",
             },
             data: [
-              120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90, 230,
+              parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
-              210, 132, 101, 134, 90, 230, 210, 134, 90, 230, 210,
+              parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
             ],
           },
           {
@@ -517,8 +530,8 @@ export default {
               focus: "series",
             },
             data: [
-              220, 182, 191, 234, 290, 330, 310, 132, 101, 134, 90, 230, 210,
+              parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
-              132, 101, 134, 90, 230, 210, 134, 90, 230, 210, 230,
+              parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
             ],
           },
           {
@@ -529,8 +542,8 @@ export default {
               focus: "series",
             },
             data: [
-              150, 232, 201, 154, 190, 330, 410, 150, 232, 201, 154, 190, 330,
+              parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
-              410, 150, 232, 201, 154, 190, 330, 410, 150, 232, 201,
+              parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
             ],
           },
           {
@@ -541,8 +554,8 @@ export default {
               focus: "series",
             },
             data: [
-              150, 232, 201, 154, 190, 330, 410, 150, 232, 201, 154, 190, 330,
+              parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
-              410, 150, 232, 201, 154, 190, 330, 410, 150, 232, 201,
+              parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
             ],
           },
           {
@@ -553,8 +566,8 @@ export default {
               focus: "series",
             },
             data: [
-              150, 232, 201, 154, 190, 330, 410, 150, 232, 201, 154, 190, 330,
+              parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
-              410, 150, 232, 201, 154, 190, 330, 410, 150, 232, 201,
+              parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
             ],
           },
         ],
@@ -586,14 +599,22 @@ export default {
   width: 100%;
   height: 100%;
   display: flex;
-  flex-direction: column;
+  // flex-direction: column;
   justify-content: space-between;
   padding: 10px;
-
+  align-items: center;
+>div {
+  width: 49%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
   .echartDiv100 {
     width: 100%;
     height: 20%;
     margin: 0 auto;
+    border: 1px solid #ddd;
   }
 }
 </style>

src/components/Zhibiao2.vue

@@ -1,9 +1,15 @@
 <template>
   <div class="analyse-container">
+    <div>
       <div id="echartDiv1" class="echartDiv100"></div>
       <div id="echartDiv2" class="echartDiv100"></div>
       <div id="echartDiv3" class="echartDiv100"></div>
+    </div>
+    <div>
       <div id="echartDiv4" class="echartDiv100"></div>
+      <div id="echartDiv5" class="echartDiv100"></div>
+      <div id="echartDiv6" class="echartDiv100"></div>
+    </div>
   </div>
 </template>
 
@@ -24,16 +30,18 @@ export default {
       
     });
     onMounted(async () => { 
-      getChartsZfl("echartDiv1", '渗透量');
+      getChartsZfl("echartDiv1", '区域面积');
-      getChartsZf2("echartDiv2", 'COD');
+      getChartsZf2("echartDiv2", '液位');
-      getChartsZf3("echartDiv3", '氨氮');
+      getChartsZf3("echartDiv3", '渗透量');
-      getChartsZf4("echartDiv4", 'SS');
+      getChartsZf4("echartDiv4", 'COD');
+      getChartsZf3("echartDiv5", '氨氮');
+      getChartsZf2("echartDiv6", 'SS');
      });
     const getChartsZfl = (id, text) => {
       var dom = document.getElementById(id);
       console.log(dom);
       var op = {
-        color: ["#80FFA5", "#00DDFF", "#37A2FF", "#FF0087", "#FFBF00"],
+        color: ["#80FFA5"],
         title: {
           text: text,
         },
@@ -47,7 +55,7 @@ export default {
           },
         },
         legend: {
-          data: ["系统A", "系统B", "系统C", "系统D", "系统E"],
+          data: ["区域面积"],
         },
         grid: {
           left: "3%",
@@ -94,7 +102,7 @@ export default {
         ],
         series: [
           {
-            name: "系统A",
+            name: "区域面积",
             type: "line",
             stack: "Total",
             smooth: true,
@@ -109,94 +117,10 @@ export default {
               focus: "series",
             },
             data:  [
-              140, 232, 101, 264, 90, 340, 250, 140, 232, 101, 264, 90, 340,
+              75, 75, 75, 75, 75, 75, 75, 75, 75, 75, 75, 75, 75,
-              250, 140, 232, 101, 264, 90, 340, 250, 140, 232, 101,
+              75, 75, 75, 75, 75, 75, 75, 75, 75, 75, 75,
             ],
-          },
+          }
-          {
-            name: "系统B",
-            type: "line",
-            stack: "Total",
-            smooth: true,
-            lineStyle: {
-              width: 0,
-            },
-            areaStyle: {
-              color: "#00DDFF"
-            },
-            showSymbol: false,
-            emphasis: {
-              focus: "series",
-            },
-            data: [
-              120, 700, 600, 500, 900, 282, 111, 120, 700, 600, 500, 900, 282,
-              111, 234, 220, 340, 310, 234, 220, 340, 310, 220, 340,
-            ],
-          },
-          {
-            name: "系统C",
-            type: "line",
-            stack: "Total",
-            smooth: true,
-            lineStyle: {
-              width: 0,
-            },
-            showSymbol: false,
-            areaStyle: {
-              color: "#37A2FF"
-            },
-            emphasis: {
-              focus: "series",
-            },
-            data: [
-              320, 132, 201, 334, 190, 130, 320, 132, 201, 334, 190, 130, 220,
-              220, 320, 132, 201, 334, 190, 130, 220, 190, 130, 220,
-            ],
-          },
-          {
-            name: "系统D",
-            type: "line",
-            stack: "Total",
-            smooth: true,
-            lineStyle: {
-              width: 0,
-            },
-            areaStyle: {
-              color: "#FF0087"
-            },
-            showSymbol: false,
-            emphasis: {
-              focus: "series",
-            },
-            data: [
-              220, 402, 231, 134, 190, 230, 120, 200, 500, 800, 600, 700, 220,
-              402, 231, 134, 190, 230, 120, 200, 500, 800, 600, 700,
-            ],
-          },
-          {
-            name: "系统E",
-            type: "line",
-            stack: "Total",
-            smooth: true,
-            lineStyle: {
-              width: 0,
-            },
-            showSymbol: false,
-            label: {
-              show: true,
-              position: "top",
-            },
-            areaStyle: {
-              color: "#FFBF00"
-            },
-            emphasis: {
-              focus: "series",
-            },
-            data: [
-              220, 302, 181, 30, 120, 200, 500, 800, 600, 700, 220, 402, 231,
-              134, 190, 230, 234, 210, 290, 150, 181, 30, 120, 200,
-            ],
-          },
         ],
       };
       getEchart(dom, op);
@@ -267,8 +191,8 @@ export default {
               focus: "series",
             },
             data:  [
-              120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90, 230,
+              parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
-              210, 132, 101, 134, 90, 230, 210, 134, 90, 230, 210,
+              parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
             ],
           },
           {
@@ -279,8 +203,8 @@ export default {
               focus: "series",
             },
             data:  [
-              220, 182, 191, 234, 290, 330, 310, 132, 101, 134, 90, 230, 210,
+              parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
-              132, 101, 134, 90, 230, 210, 134, 90, 230, 210, 230,
+              parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
             ],
           },
           {
@@ -291,8 +215,8 @@ export default {
               focus: "series",
             },
             data:  [
-              150, 232, 201, 154, 190, 330, 410, 150, 232, 201, 154, 190, 330,
+              parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
-              410, 150, 232, 201, 154, 190, 330, 410, 150, 232, 201,
+              parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
             ],
           },
           {
@@ -303,8 +227,8 @@ export default {
               focus: "series",
             },
             data: [
-              150, 232, 201, 154, 190, 330, 410, 150, 232, 201, 154, 190, 330,
+              parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
-              410, 150, 232, 201, 154, 190, 330, 410, 150, 232, 201,
+              parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
             ],
           },
           {
@@ -315,8 +239,8 @@ export default {
               focus: "series",
             },
             data:  [
-              150, 232, 201, 154, 190, 330, 410, 150, 232, 201, 154, 190, 330,
+              parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
-              410, 150, 232, 201, 154, 190, 330, 410, 150, 232, 201,
+              parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
             ],
           },
         ],
@@ -404,8 +328,8 @@ export default {
               focus: "series",
             },
             data:  [
-              140, 232, 101, 264, 90, 340, 250, 140, 232, 101, 264, 90, 340,
+              parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
-              250, 140, 232, 101, 264, 90, 340, 250, 140, 232, 101,
+              parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
             ],
           },
           {
@@ -425,8 +349,8 @@ export default {
               focus: "series",
             },
             data:  [
-              120, 700, 600, 500, 900, 282, 111, 120, 700, 600, 500, 900, 282,
+              parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
-              111, 234, 220, 340, 310, 234, 220, 340, 310, 220, 340,
+              parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
             ],
           },
           {
@@ -446,8 +370,8 @@ export default {
               focus: "series",
             },
             data:  [
-              320, 132, 201, 334, 190, 130, 320, 132, 201, 334, 190, 130, 220,
+              parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
-              220, 320, 132, 201, 334, 190, 130, 220, 190, 130, 220,
+              parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
             ],
           },
           {
@@ -471,8 +395,8 @@ export default {
               focus: "series",
             },
             data: [
-              220, 302, 181, 30, 120, 200, 500, 800, 600, 700, 220, 402, 231,
+              parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
-              134, 190, 230, 234, 210, 290, 150, 181, 30, 120, 200,
+              parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
             ],
           },
           {
@@ -492,8 +416,8 @@ export default {
               focus: "series",
             },
             data:  [
-              220, 402, 231, 134, 190, 230, 120, 200, 500, 800, 600, 700, 220,
+              parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
-              402, 231, 134, 190, 230, 120, 200, 500, 800, 600, 700,
+              parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
             ],
           },
         ],
@@ -567,8 +491,8 @@ export default {
               focus: "series",
             },
             data: [
-              120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90, 230,
+              parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
-              210, 132, 101, 134, 90, 230, 210, 134, 90, 230, 210,
+              parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
             ],
           },
           {
@@ -580,8 +504,8 @@ export default {
               focus: "series",
             },
             data:  [
-              220, 182, 191, 234, 290, 330, 310, 132, 101, 134, 90, 230, 210,
+              parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
-              132, 101, 134, 90, 230, 210, 134, 90, 230, 210, 230,
+              parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
             ],
           },
           {
@@ -593,8 +517,8 @@ export default {
               focus: "series",
             },
             data:  [
-              150, 232, 201, 154, 190, 330, 410, 150, 232, 201, 154, 190, 330,
+              parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
-              410, 150, 232, 201, 154, 190, 330, 410, 150, 232, 201,
+              parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
             ],
           },
           {
@@ -606,8 +530,8 @@ export default {
               focus: "series",
             },
             data:  [
-              150, 232, 201, 154, 190, 330, 410, 150, 232, 201, 154, 190, 330,
+              parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
-              410, 150, 232, 201, 154, 190, 330, 410, 150, 232, 201,
+              parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
             ],
           },
           {
@@ -619,8 +543,8 @@ export default {
               focus: "series",
             },
             data:  [
-              150, 232, 201, 154, 190, 330, 410, 150, 232, 201, 154, 190, 330,
+              parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
-              410, 150, 232, 201, 154, 190, 330, 410, 150, 232, 201,
+              parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
             ],
           },
         ],
@@ -652,14 +576,24 @@ export default {
   width: 100%;
   height: 100%;
   display: flex;
-  flex-direction: column;
   justify-content: space-between;
   padding: 10px;
+  align-items: center;
+  >div {
+  width: 49%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
   
+}
   .echartDiv100 {
     width: 100%;
-    height: 20%;
+    height: 33%;
     margin: 0 auto;
+    border: 1px solid #ddd;
+    display: flex;
+    align-items: center;
   }
 }
 </style>

src/components/Zhibiao3.vue

@@ -1,8 +1,22 @@
 <template>
   <div class="analyse-container">
+    <div>
       <div id="echartDiv1" class="echartDiv100"></div>
       <div id="echartDiv2" class="echartDiv100"></div>
       <div id="echartDiv3" class="echartDiv100"></div>
+      
+      <div id="echartDiv4" class="echartDiv100"></div>
+      <div id="echartDiv5" class="echartDiv100"></div>
+    </div>
+    <div>
+      
+      <div id="echartDiv6" class="echartDiv100"></div>
+      <div id="echartDiv7" class="echartDiv100"></div>
+      <div id="echartDiv8" class="echartDiv100"></div>
+      <div id="echartDiv9" class="echartDiv100"></div>
+      <div id="echartDiv10" class="echartDiv100"></div>
+    </div>
+    
   </div>
 </template>
 
@@ -15,47 +29,50 @@ import Process from "./Process.vue";
 import Date from "@/components/Date.vue";
 export default {
   name: "Analyse",
-  components: {
+  components: {},
-
-  },
   setup() {
-    const state = reactive({
+    const state = reactive({});
-      
-    });
     onMounted(async () => {
-      getChartsZfl("echartDiv1", '渗透量');
+      getChartsZfl("echartDiv1", "透水铺装面积", 500, '#076d46');
-      getChartsZfl("echartDiv2", '透水铺砖表面温度');
+      getChartsZfl("echartDiv2", "入渗系统面积", 437, "#80FFA5");
-      getChartsZfl("echartDiv3", '热岛消减率');
+      getChartsZf3("echartDiv3", "透水系数");
+      getChartsZf4("echartDiv4", "入渗系数");
+      getChartsZf3("echartDiv5", "透水层厚度");
+      getChartsZf4("echartDiv6", "渗透量");
+      getChartsZf2("echartDiv7", "透水铺砖储水量");
+      getChartsZf2("echartDiv8", "透水铺砖表面温度");
+      getChartsZf3("echartDiv9", "热岛消减率");
+      getChartsZf2("echartDiv10", "孔隙率");
     });
-    const getChartsZfl = (id, text) => {
+    const getChartsZfl = (id, text, num, color) => {
       var dom = document.getElementById(id);
       console.log(dom);
       var op = {
-        color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
+        color: ["#80FFA5"],
         title: {
-          text: text
+          text: text,
         },
         tooltip: {
-          trigger: 'axis',
+          trigger: "axis",
           axisPointer: {
-            type: 'cross',
+            type: "cross",
             label: {
-              backgroundColor: '#6a7985'
+              backgroundColor: "#6a7985",
-            }
+            },
-          }
+          },
         },
         legend: {
-          data: ['系统A', '系统B', '系统C', '系统D', '系统E']
+          data: ["区域面积"],
         },
         grid: {
-          left: '3%',
+          left: "3%",
-          right: '4%',
+          right: "4%",
-          bottom: '3%',
+          bottom: "3%",
-          containLabel: true
+          containLabel: true,
         },
         xAxis: [
           {
-            type: 'category',
+            type: "category",
             boundaryGap: false,
             data: [
               "00",
@@ -82,163 +99,408 @@ export default {
               "21",
               "22",
               "23",
-            ]
+            ],
-          }
+          },
         ],
         yAxis: [
           {
-            type: 'value'
+            type: "value",
-          }
+          },
         ],
         series: [
           {
-            name: '系统A',
+            name: "区域面积",
-            type: 'line',
+            type: "line",
-            stack: 'Total',
+            stack: "Total",
             smooth: true,
             lineStyle: {
-              width: 0
+              width: 0,
-            },
-            showSymbol: false,
-            areaStyle: {
-              opacity: 0.8,
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                {
-                  offset: 0,
-                  color: 'rgb(128, 255, 165)'
-                },
-                {
-                  offset: 1,
-                  color: 'rgb(1, 191, 236)'
-                }
-              ])
-            },
-            emphasis: {
-              focus: 'series'
-            },
-            data: [140, 232, 101, 264, 90, 340, 250, 140, 232, 101, 264, 90, 340, 250, 140, 232, 101, 264, 90, 340, 250, 140, 232, 101]
-          },
-          {
-            name: '系统B',
-            type: 'line',
-            stack: 'Total',
-            smooth: true,
-            lineStyle: {
-              width: 0
-            },
-            showSymbol: false,
-            areaStyle: {
-              opacity: 0.8,
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                {
-                  offset: 0,
-                  color: 'rgb(0, 221, 255)'
-                },
-                {
-                  offset: 1,
-                  color: 'rgb(77, 119, 255)'
-                }
-              ])
-            },
-            emphasis: {
-              focus: 'series'
-            },
-            data: [120, 700, 600, 500, 900, 282, 111, 120, 700, 600, 500, 900, 282, 111, 234, 220, 340, 310, 234, 220, 340, 310, 220, 340]
-          },
-          {
-            name: '系统C',
-            type: 'line',
-            stack: 'Total',
-            smooth: true,
-            lineStyle: {
-              width: 0
-            },
-            showSymbol: false,
-            areaStyle: {
-              opacity: 0.8,
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                {
-                  offset: 0,
-                  color: 'rgb(55, 162, 255)'
-                },
-                {
-                  offset: 1,
-                  color: 'rgb(116, 21, 219)'
-                }
-              ])
-            },
-            emphasis: {
-              focus: 'series'
-            },
-            data: [320, 132, 201, 334, 190, 130, 320, 132, 201, 334, 190, 130, 220, 220, 320, 132, 201, 334, 190, 130, 220, 190, 130, 220]
-          },
-          {
-            name: '系统D',
-            type: 'line',
-            stack: 'Total',
-            smooth: true,
-            lineStyle: {
-              width: 0
-            },
-            showSymbol: false,
-            areaStyle: {
-              opacity: 0.8,
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                {
-                  offset: 0,
-                  color: 'rgb(255, 0, 135)'
-                },
-                {
-                  offset: 1,
-                  color: 'rgb(135, 0, 157)'
-                }
-              ])
-            },
-            emphasis: {
-              focus: 'series'
-            },
-            data: [220, 402, 231, 134, 190, 230, 120, 200, 500, 800, 600, 700, 220, 402, 231, 134, 190, 230, 120, 200, 500, 800, 600, 700]
-          },
-          {
-            name: '系统E',
-            type: 'line',
-            stack: 'Total',
-            smooth: true,
-            lineStyle: {
-              width: 0
-            },
-            showSymbol: false,
-            label: {
-              show: true,
-              position: 'top'
             },
             areaStyle: {
-              opacity: 0.8,
+              color: color
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                {
-                  offset: 0,
-                  color: 'rgb(255, 191, 0)'
-                },
-                {
-                  offset: 1,
-                  color: 'rgb(224, 62, 76)'
-                }
-              ])
             },
+            showSymbol: false,
             emphasis: {
-              focus: 'series'
+              focus: "series",
             },
-            data: [220, 302, 181, 30, 120, 200, 500, 800, 600, 700, 220, 402, 231, 134, 190, 230, 234, 210, 290, 150, 181, 30, 120, 200]
+            data:  [
+              num, num, num, num, num, num, num, num, num, num, num, num, num,
+              num, num, num, num, num, num, num, num, num, num, num,
+            ],
           }
-        ]
+        ],
+      };
+      getEchart(dom, op);
+    };
+    const getChartsZf2 = (id, text) => {
+      var dom = document.getElementById(id);
+      console.log(dom);
+      var op = {
+        title: {
+          text: text,
+        },
+        color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+        },
+        legend: {},
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            data: [
+              "00",
+              "01",
+              "02",
+              "03",
+              "04",
+              "05",
+              "06",
+              "07",
+              "08",
+              "09",
+              "10",
+              "11",
+              "12",
+              "13",
+              "14",
+              "15",
+              "16",
+              "17",
+              "18",
+              "19",
+              "20",
+              "21",
+              "22",
+              "23",
+            ],
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+          },
+        ],
+        series: [
+          {
+            name: "系统A",
+            type: "bar",
+            stack: "Ad",
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
+              parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
+            ],
+          },
+          {
+            name: "系统B",
+            type: "bar",
+            stack: "Ad",
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
+              parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
+            ],
+          },
+          {
+            name: "系统C",
+            type: "bar",
+            stack: "Ad",
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
+              parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
+            ],
+          },
+          {
+            name: "系统D",
+            type: "bar",
+            stack: "Ad",
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
+              parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
+            ],
+          },
+          {
+            name: "系统E",
+            type: "bar",
+            stack: "Ad",
+            emphasis: {
+              focus: "series",
+            },
+            data:[
+              parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
+              parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
+            ],
+          },
+        ],
+      };
+      getEchart(dom, op);
+    };
+    const getChartsZf3 = (id, text) => {
+      var dom = document.getElementById(id);
+      console.log(dom);
+      var op = {
+        title: {
+          text: text,
+        },
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+        },
+        legend: {},
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            data: [
+              "00",
+              "01",
+              "02",
+              "03",
+              "04",
+              "05",
+              "06",
+              "07",
+              "08",
+              "09",
+              "10",
+              "11",
+              "12",
+              "13",
+              "14",
+              "15",
+              "16",
+              "17",
+              "18",
+              "19",
+              "20",
+              "21",
+              "22",
+              "23",
+            ],
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+          },
+        ],
+        series: [
+          {
+            name: "系统A",
+            type: "bar",
+            stack: "Ad",
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
+              parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
+            ],
+          },
+          {
+            name: "系统B",
+            type: "bar",
+            stack: "Ad",
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
+              parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
+            ],
+          },
+          {
+            name: "系统C",
+            type: "bar",
+            stack: "Ad",
+            emphasis: {
+              focus: "series",
+            },
+            data:[
+              parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
+              parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
+            ],
+          },
+          {
+            name: "系统D",
+            type: "bar",
+            stack: "Ad",
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
+              parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
+            ],
+          },
+          {
+            name: "系统E",
+            type: "line",
+            stack: "Ad",
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
+              parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
+            ],
+          },
+        ],
+      };
+      getEchart(dom, op);
+    };
+    const getChartsZf4 = (id, text) => {
+      var dom = document.getElementById(id);
+      console.log(dom);
+      var op = {
+        title: {
+          text: text,
+        },
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+        },
+        legend: {},
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            data: [
+              "00",
+              "01",
+              "02",
+              "03",
+              "04",
+              "05",
+              "06",
+              "07",
+              "08",
+              "09",
+              "10",
+              "11",
+              "12",
+              "13",
+              "14",
+              "15",
+              "16",
+              "17",
+              "18",
+              "19",
+              "20",
+              "21",
+              "22",
+              "23",
+            ],
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+          },
+        ],
+        series: [
+          {
+            name: "系统A",
+            type: "line",
+            stack: "Ad",
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
+              parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
+            ],
+          },
+          {
+            name: "系统B",
+            type: "line",
+            stack: "Ad",
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
+              parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
+            ],
+          },
+          {
+            name: "系统C",
+            type: "line",
+            stack: "Ad",
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
+              parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
+            ],
+          },
+          {
+            name: "系统D",
+            type: "line",
+            stack: "Ad",
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
+              parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
+            ],
+          },
+          {
+            name: "系统E",
+            type: "line",
+            stack: "Ad",
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
+              parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
+            ],
+          },
+        ],
+      };
+      getEchart(dom, op);
     };
-      getEchart(dom, op)
-    }
     const getEchart = (dom, op) => {
       if (dom) {
         // 图表的dom属性中发现了一个特殊的属性：_echarts_instance_，对应的值是一个id，可能是由于再次渲染时这个id未发生改变导致ehcarts认为不需要重新渲染
         // 手动移除该属性
-        dom.removeAttribute('_echarts_instance_')
+        dom.removeAttribute("_echarts_instance_");
         var myChart = echarts.init(dom);
         var option = op;
 
@@ -248,7 +510,7 @@ export default {
     return {
       ...toRefs(state),
       getChartsZfl,
-      getEchart
+      getEchart,
     };
   },
 };
@@ -259,14 +521,22 @@ export default {
   width: 100%;
   height: 100%;
   display: flex;
-  flex-direction: column;
+  // flex-direction: column;
   justify-content: space-between;
   padding: 10px;
-
+  align-items: center;
+>div {
+  width: 49%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
   .echartDiv100 {
     width: 100%;
-    height: 30%;
+    height: 20%;
     margin: 0 auto;
+    border: 1px solid #ddd;
   }
 }
 </style>

src/components/Zhibiao4.vue

@@ -1,10 +1,17 @@
 <template>
   <div class="analyse-container">
+    <div>
       <div id="echartDiv1" class="echartDiv100"></div>
-    <div id="echartDiv2" class="echartDiv100"></div>
       <div id="echartDiv3" class="echartDiv100"></div>
+      <div id="echartDiv2" class="echartDiv100"></div>
       <div id="echartDiv4" class="echartDiv100"></div>
+    </div>
+    <div>
       <div id="echartDiv5" class="echartDiv100"></div>
+      <div id="echartDiv6" class="echartDiv100"></div>
+      <div id="echartDiv7" class="echartDiv100"></div>
+      <div id="echartDiv8" class="echartDiv100"></div>
+    </div>
   </div>
 </template>
 
@@ -25,41 +32,44 @@ export default {
       
     });
     onMounted(async () => { 
-      getChartsZfl("echartDiv1", '蒸腾量');
+      getChartsZfl("echartDiv1", "地块面积", 730, "#80FFA5");
-      getChartsZfl("echartDiv2", 'COD');
+      getChartsZf2("echartDiv2", '地块调蓄容积');
-      getChartsZfl("echartDiv3", '氨氮');
+      getChartsZf3("echartDiv3", '调蓄池液位');
-      getChartsZfl("echartDiv4", 'SS');
+      getChartsZf4("echartDiv4", '溢流量');
-      getChartsZfl("echartDiv5", '屋面温度');
+      getChartsZf2("echartDiv5", 'COD');
+      getChartsZf3("echartDiv6", '氨氮');
+      getChartsZf4("echartDiv7", 'SS');
+      getChartsZf2("echartDiv8", '地块剩余调蓄容积');
      });
-    const getChartsZfl = (id, text) => {
+    const getChartsZfl = (id, text, num, color) => {
       var dom = document.getElementById(id);
       console.log(dom);
       var op = {
-        color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
+        color: ["#80FFA5"],
         title: {
-          text: text
+          text: text,
         },
         tooltip: {
-          trigger: 'axis',
+          trigger: "axis",
           axisPointer: {
-            type: 'cross',
+            type: "cross",
             label: {
-              backgroundColor: '#6a7985'
+              backgroundColor: "#6a7985",
-            }
+            },
-          }
+          },
         },
         legend: {
-          data: ['系统A', '系统B', '系统C', '系统D', '系统E']
+          data: ["区域面积"],
         },
         grid: {
-          left: '3%',
+          left: "3%",
-          right: '4%',
+          right: "4%",
-          bottom: '3%',
+          bottom: "3%",
-          containLabel: true
+          containLabel: true,
         },
         xAxis: [
           {
-            type: 'category',
+            type: "category",
             boundaryGap: false,
             data: [
               "00",
@@ -86,158 +96,403 @@ export default {
               "21",
               "22",
               "23",
-            ]
+            ],
-          }
+          },
         ],
         yAxis: [
           {
-            type: 'value'
+            type: "value",
-          }
+          },
         ],
         series: [
           {
-            name: '系统A',
+            name: "区域面积",
-            type: 'line',
+            type: "line",
-            stack: 'Total',
+            stack: "Total",
             smooth: true,
             lineStyle: {
-              width: 0
+              width: 0,
-            },
-            showSymbol: false,
-            areaStyle: {
-              opacity: 0.8,
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                {
-                  offset: 0,
-                  color: 'rgb(128, 255, 165)'
-                },
-                {
-                  offset: 1,
-                  color: 'rgb(1, 191, 236)'
-                }
-              ])
-            },
-            emphasis: {
-              focus: 'series'
-            },
-            data: [140, 232, 101, 264, 90, 340, 250, 140, 232, 101, 264, 90, 340, 250, 140, 232, 101, 264, 90, 340, 250, 140, 232, 101]
-          },
-          {
-            name: '系统B',
-            type: 'line',
-            stack: 'Total',
-            smooth: true,
-            lineStyle: {
-              width: 0
-            },
-            showSymbol: false,
-            areaStyle: {
-              opacity: 0.8,
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                {
-                  offset: 0,
-                  color: 'rgb(0, 221, 255)'
-                },
-                {
-                  offset: 1,
-                  color: 'rgb(77, 119, 255)'
-                }
-              ])
-            },
-            emphasis: {
-              focus: 'series'
-            },
-            data: [120, 700, 600, 500, 900, 282, 111, 120, 700, 600, 500, 900, 282, 111, 234, 220, 340, 310, 234, 220, 340, 310, 220, 340]
-          },
-          {
-            name: '系统C',
-            type: 'line',
-            stack: 'Total',
-            smooth: true,
-            lineStyle: {
-              width: 0
-            },
-            showSymbol: false,
-            areaStyle: {
-              opacity: 0.8,
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                {
-                  offset: 0,
-                  color: 'rgb(55, 162, 255)'
-                },
-                {
-                  offset: 1,
-                  color: 'rgb(116, 21, 219)'
-                }
-              ])
-            },
-            emphasis: {
-              focus: 'series'
-            },
-            data: [320, 132, 201, 334, 190, 130, 320, 132, 201, 334, 190, 130, 220, 220, 320, 132, 201, 334, 190, 130, 220, 190, 130, 220]
-          },
-          {
-            name: '系统D',
-            type: 'line',
-            stack: 'Total',
-            smooth: true,
-            lineStyle: {
-              width: 0
-            },
-            showSymbol: false,
-            areaStyle: {
-              opacity: 0.8,
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                {
-                  offset: 0,
-                  color: 'rgb(255, 0, 135)'
-                },
-                {
-                  offset: 1,
-                  color: 'rgb(135, 0, 157)'
-                }
-              ])
-            },
-            emphasis: {
-              focus: 'series'
-            },
-            data: [220, 402, 231, 134, 190, 230, 120, 200, 500, 800, 600, 700, 220, 402, 231, 134, 190, 230, 120, 200, 500, 800, 600, 700]
-          },
-          {
-            name: '系统E',
-            type: 'line',
-            stack: 'Total',
-            smooth: true,
-            lineStyle: {
-              width: 0
-            },
-            showSymbol: false,
-            label: {
-              show: true,
-              position: 'top'
             },
             areaStyle: {
-              opacity: 0.8,
+              color: color
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                {
-                  offset: 0,
-                  color: 'rgb(255, 191, 0)'
-                },
-                {
-                  offset: 1,
-                  color: 'rgb(224, 62, 76)'
-                }
-              ])
             },
+            showSymbol: false,
             emphasis: {
-              focus: 'series'
+              focus: "series",
             },
-            data: [220, 302, 181, 30, 120, 200, 500, 800, 600, 700, 220, 402, 231, 134, 190, 230, 234, 210, 290, 150, 181, 30, 120, 200]
+            data:  [
+              num, num, num, num, num, num, num, num, num, num, num, num, num,
+              num, num, num, num, num, num, num, num, num, num, num,
+            ],
           }
-        ]
+        ],
+      };
+      getEchart(dom, op);
+    };
+    const getChartsZf2 = (id, text) => {
+      var dom = document.getElementById(id);
+      console.log(dom);
+      var op = {
+        title: {
+          text: text,
+        },
+        color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+        },
+        legend: {},
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            data: [
+              "00",
+              "01",
+              "02",
+              "03",
+              "04",
+              "05",
+              "06",
+              "07",
+              "08",
+              "09",
+              "10",
+              "11",
+              "12",
+              "13",
+              "14",
+              "15",
+              "16",
+              "17",
+              "18",
+              "19",
+              "20",
+              "21",
+              "22",
+              "23",
+            ],
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+          },
+        ],
+        series: [
+          {
+            name: "系统A",
+            type: "bar",
+            stack: "Ad",
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
+              parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
+            ],
+          },
+          {
+            name: "系统B",
+            type: "bar",
+            stack: "Ad",
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
+              parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
+            ],
+          },
+          {
+            name: "系统C",
+            type: "bar",
+            stack: "Ad",
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
+              parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
+            ],
+          },
+          {
+            name: "系统D",
+            type: "bar",
+            stack: "Ad",
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
+              parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
+            ],
+          },
+          {
+            name: "系统E",
+            type: "bar",
+            stack: "Ad",
+            emphasis: {
+              focus: "series",
+            },
+            data:[
+              parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
+              parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
+            ],
+          },
+        ],
+      };
+      getEchart(dom, op);
+    };
+    const getChartsZf3 = (id, text) => {
+      var dom = document.getElementById(id);
+      console.log(dom);
+      var op = {
+        title: {
+          text: text,
+        },
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+        },
+        legend: {},
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            data: [
+              "00",
+              "01",
+              "02",
+              "03",
+              "04",
+              "05",
+              "06",
+              "07",
+              "08",
+              "09",
+              "10",
+              "11",
+              "12",
+              "13",
+              "14",
+              "15",
+              "16",
+              "17",
+              "18",
+              "19",
+              "20",
+              "21",
+              "22",
+              "23",
+            ],
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+          },
+        ],
+        series: [
+          {
+            name: "系统A",
+            type: "bar",
+            stack: "Ad",
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
+              parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
+            ],
+          },
+          {
+            name: "系统B",
+            type: "bar",
+            stack: "Ad",
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
+              parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
+            ],
+          },
+          {
+            name: "系统C",
+            type: "bar",
+            stack: "Ad",
+            emphasis: {
+              focus: "series",
+            },
+            data:[
+              parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
+              parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
+            ],
+          },
+          {
+            name: "系统D",
+            type: "bar",
+            stack: "Ad",
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
+              parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
+            ],
+          },
+          {
+            name: "系统E",
+            type: "line",
+            stack: "Ad",
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
+              parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
+            ],
+          },
+        ],
+      };
+      getEchart(dom, op);
+    };
+    const getChartsZf4 = (id, text) => {
+      var dom = document.getElementById(id);
+      console.log(dom);
+      var op = {
+        title: {
+          text: text,
+        },
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+        },
+        legend: {},
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            data: [
+              "00",
+              "01",
+              "02",
+              "03",
+              "04",
+              "05",
+              "06",
+              "07",
+              "08",
+              "09",
+              "10",
+              "11",
+              "12",
+              "13",
+              "14",
+              "15",
+              "16",
+              "17",
+              "18",
+              "19",
+              "20",
+              "21",
+              "22",
+              "23",
+            ],
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+          },
+        ],
+        series: [
+          {
+            name: "系统A",
+            type: "line",
+            stack: "Ad",
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
+              parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
+            ],
+          },
+          {
+            name: "系统B",
+            type: "line",
+            stack: "Ad",
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
+              parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
+            ],
+          },
+          {
+            name: "系统C",
+            type: "line",
+            stack: "Ad",
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
+              parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
+            ],
+          },
+          {
+            name: "系统D",
+            type: "line",
+            stack: "Ad",
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
+              parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
+            ],
+          },
+          {
+            name: "系统E",
+            type: "line",
+            stack: "Ad",
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
+              parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
+            ],
+          },
+        ],
+      };
+      getEchart(dom, op);
     };
-      getEchart(dom, op)
-    }
     const getEchart = (dom, op) => {
       if (dom) {
         // 图表的dom属性中发现了一个特殊的属性：_echarts_instance_，对应的值是一个id，可能是由于再次渲染时这个id未发生改变导致ehcarts认为不需要重新渲染
@@ -263,14 +518,21 @@ export default {
   width: 100%;
   height: 100%;
   display: flex;
-  flex-direction: column;
+  // flex-direction: column;
   justify-content: space-between;
   padding: 10px;
-
+  >div {
+  width: 49%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
   .echartDiv100 {
     width: 100%;
     height: 20%;
     margin: 0 auto;
+    border: 1px solid #ddd;
   }
 }
 </style>

src/css/index.scss

@@ -73,6 +73,7 @@ s {
 }
 .font26 {
   font-size: 26px;
+  color: #02f7c2;
 }
 .btns {
   text-align: center;

src/views/Biology.vue

@@ -73,7 +73,7 @@ export default {
       }
       .content {
         width: 96%;
-        height:100%;
+        height: 99%;
         // border: 1px solid red;
       }
     

src/views/Chuxu.vue

@@ -62,7 +62,7 @@ export default {
   }
   .cl-hy {
     width: 100%;
-    height:100%;
+    height: 99%;
     display: flex;
     justify-content: space-between;
     // border: 1px solid red;
@@ -73,7 +73,7 @@ export default {
       }
       .content {
         width: 96%;
-        height:100%;
+        height: 99%;
         // border: 1px solid red;
       }
     

src/views/Green.vue

@@ -62,7 +62,7 @@ export default {
   }
   .cl-hy {
     width: 100%;
-    height:100%;
+    height: 99%;
     display: flex;
     justify-content: space-between;
     // border: 1px solid red;
@@ -73,7 +73,7 @@ export default {
       }
       .content {
         width: 96%;
-        height:100%;
+        height: 99%;
         // border: 1px solid red;
       }
     

src/views/Home.vue

@@ -7,7 +7,15 @@
     <ul class="menus">
       <li class="one-card" v-for="(item, i) in menus" :key="i" @click="go(item)">
         <div class="one-card-left" :class="'menu' + i" >{{ item.name }}</div>
-        <div class="one-card-right" :class="'color' + i"></div>
+        <div class="one-card-right" :class="'color' + i">
+          <div class="parm">
+              <p>{{ item.parms && item.parms[0].name }}</p>
+              <font><span class="font28">{{ item.parms && item.parms[0].value }}</span></font>
+              <font>
+                {{  item.parms && item.parms[0].dw }}
+              </font>
+            </div>
+        </div>
       </li>
     </ul>
   </div>
@@ -25,22 +33,52 @@ export default {
     const state = reactive({
       menus: [{
         name: '处理&回用系统',
-        url: 'page'
+        url: 'page',
+        parms: [{
+          name: '节水量',
+          value: '4.00',
+          dw: 'm³'
+        }]
       }, {
         name: '屋顶绿化系统',
-        url: 'green'
+        url: 'green',
+        parms: [{
+          name: '热岛消减率',
+          value: '21',
+          dw: '%'
+        }]
       }, {
         name: '生物滞留&净化系统',
-        url: 'biology'
+        url: 'biology',
+        parms: [{
+          name: '液位',
+          value: '323',
+          dw: 'mm'
+        }]
       }, {
         name: '透水铺装&入渗系统',
-        url: 'shentou'
+        url: 'shentou',
+        parms: [{
+          name: '热岛消减率',
+          value: '19.6',
+          dw: '%'
+        }]
       }, {
         name: '调蓄系统&逆流监测系统',
-        url: 'chuxu'
+        url: 'chuxu',
+        parms: [{
+          name: '溢流量',
+          value: '1.25',
+          dw: 'L/s'
+        }]
       }, {
         name: '气象监测系统',
-        url: 'weather'
+        url: 'weather',
+        parms: [{
+          name: '天气',
+          value: '晴',
+          dw: ''
+        }]
       }]
     })
 
@@ -62,8 +100,8 @@ export default {
 .home {
   width: 100%;
   height: 100%;
-  // background: url(../assets/bg2.png) left top no-repeat;
+  background: url(../assets/index-bg1.jpg) left top no-repeat;
-  // background-size: 100% 100%;
+  background-size: 100% 100%;
   // border: 1px solid rgb(180, 20, 180);
   display: flex;
   justify-content: space-between;
@@ -131,6 +169,7 @@ export default {
       justify-content: space-between;
       box-shadow: 0 0 8px #99ACB0 inset;
       cursor: pointer;
+      color: #fff;
       .one-card-left {
         width: 80%;
         padding: 10px;
@@ -181,6 +220,20 @@ export default {
       }
       .one-card-right {
         width: 20%;
+        color: #043b8d;
+        .parm {
+          display: flex;
+          flex-direction: column;
+          height: 100%;
+          padding: 10px;
+          align-items: center;
+          justify-content: space-around;
+          .font28 {
+            font-size: 28px;
+            color: #0866f3;
+            font-size: 800;
+          }
+        }
       }
     }
     

src/views/Level.vue

@@ -73,7 +73,7 @@ export default {
       }
       .content {
         width: 96%;
-        height:100%;
+        height: 99%;
         // border: 1px solid red;
       }
     

src/views/Shentou.vue

@@ -73,7 +73,7 @@ export default {
       }
       .content {
         width: 96%;
-        height:100%;
+        height: 99%;
         // border: 1px solid red;
       }
     

src/views/Weather.vue

@@ -73,7 +73,7 @@ export default {
       }
       .content {
         width: 96%;
-        height:100%;
+        height: 99%;
         // border: 1px solid red;
       }
     

src/views/page.vue

@@ -73,7 +73,7 @@ export default {
       }
       .content {
         width: 96%;
-        height:100%;
+        height: 99%;
         // border: 1px solid red;
       }