src/App.vue

@@ -94,6 +94,7 @@ 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,8 +90,7 @@
           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,8 +90,7 @@
           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: props.echartData.color,
+            color: ["#62d3ff"],
             xData: [
               "1",
               "2",
@@ -77,8 +77,8 @@ export default {
           };
         } else if (store.state.selectDate === 2) {
           data = {
-            legend: {},
+            legend: ["年余氯查询"],
-            color: props.echartData.color,
+            color: ["#62d3ff"],
             xData: [
               "1",
               "2",
@@ -100,8 +100,8 @@ export default {
           };
         } else if (store.state.selectDate === 0) {
           var data = {
-            legend: {},
+            legend: ["日余氯查询"],
-            color: props.echartData.color,
+            color: ["#62d3ff"],
             xData: [
               "00",
               "01",
@@ -138,8 +138,8 @@ export default {
       } else {
         if (store.state.selectDate === 1) {
           data = {
-            legend: {},
+            legend: ["月余氯查询"],
-            color: props.echartData.color,
+            color: ["#62d3ff"],
             xData: [
               "1",
               "2",
@@ -179,8 +179,8 @@ export default {
           };
         } else if (store.state.selectDate === 2) {
           data = {
-            legend: {},
+            legend: ["年余氯查询"],
-            color: props.echartData.color,
+            color: ["#62d3ff"],
             xData: [
               "1",
               "2",
@@ -202,8 +202,8 @@ export default {
           };
         } else if (store.state.selectDate === 0) {
           var data = {
-            legend:  {},
+            legend: ["日余氯查询"],
-            color: props.echartData.color,
+            color: ["#62d3ff"],
             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,65 +63,61 @@ 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: "余氯: ",
+              label: "COD1",
               value: "20",
             },
           ],
         },
         {
-          title: "浊度",
+          title: "浊度:",
           data: [
             {
               id: "1",
-              color: "#b7e707",
+              color: "#00baff",
-              label: "浊度:",
+              label: "COD2",
               value: "80",
             }
           ],
         },
         {
-          title: "氨氮",
+          title: "氨氮:",
           data: [
             {
               id: "3",
-              color: "#f58383",
+              color: "#308286",
-              label: "氨氮: ",
+              label: "氨氮",
               value: "80",
             },
           ],
         },
         {
-          title: "COD",
+          title: "COD:",
           data: [
             {
               id: "4",
-              color: "#00ffff",
+              color: "#00baff",
-              label: "COD: ",
+              label: "COD",
               value: "80",
             }
           ],

src/components/Zhibiao1.vue

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

src/components/Zhibiao2.vue

@@ -1,15 +1,9 @@
 <template>
   <div class="analyse-container">
-    <div>
+    <div id="echartDiv1" class="echartDiv100"></div>
-      <div id="echartDiv1" class="echartDiv100"></div>
+    <div id="echartDiv2" class="echartDiv100"></div>
-      <div id="echartDiv2" class="echartDiv100"></div>
+    <div id="echartDiv3" class="echartDiv100"></div>
-      <div id="echartDiv3" class="echartDiv100"></div>
+    <div id="echartDiv4" 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>
 
@@ -30,18 +24,16 @@ export default {
       
     });
     onMounted(async () => { 
-      getChartsZfl("echartDiv1", '区域面积');
+      getChartsZfl("echartDiv1", '渗透量');
-      getChartsZf2("echartDiv2", '液位');
+      getChartsZf2("echartDiv2", 'COD');
-      getChartsZf3("echartDiv3", '渗透量');
+      getChartsZf3("echartDiv3", '氨氮');
-      getChartsZf4("echartDiv4", 'COD');
+      getChartsZf4("echartDiv4", 'SS');
-      getChartsZf3("echartDiv5", '氨氮');
-      getChartsZf2("echartDiv6", 'SS');
      });
     const getChartsZfl = (id, text) => {
       var dom = document.getElementById(id);
       console.log(dom);
       var op = {
-        color: ["#80FFA5"],
+        color: ["#80FFA5", "#00DDFF", "#37A2FF", "#FF0087", "#FFBF00"],
         title: {
           text: text,
         },
@@ -55,7 +47,7 @@ export default {
           },
         },
         legend: {
-          data: ["区域面积"],
+          data: ["系统A", "系统B", "系统C", "系统D", "系统E"],
         },
         grid: {
           left: "3%",
@@ -102,7 +94,7 @@ export default {
         ],
         series: [
           {
-            name: "区域面积",
+            name: "系统A",
             type: "line",
             stack: "Total",
             smooth: true,
@@ -116,11 +108,95 @@ export default {
             emphasis: {
               focus: "series",
             },
-            data:  [
+            data: [
-              75, 75, 75, 75, 75, 75, 75, 75, 75, 75, 75, 75, 75,
+              140, 232, 101, 264, 90, 340, 250, 140, 232, 101, 264, 90, 340,
-              75, 75, 75, 75, 75, 75, 75, 75, 75, 75, 75,
+              250, 140, 232, 101, 264, 90, 340, 250, 140, 232, 101,
             ],
-          }
+          },
+          {
+            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);
@@ -190,9 +266,9 @@ export default {
             emphasis: {
               focus: "series",
             },
-            data:  [
+            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),
+              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),
+              210, 132, 101, 134, 90, 230, 210, 134, 90, 230, 210,
             ],
           },
           {
@@ -202,9 +278,9 @@ export default {
             emphasis: {
               focus: "series",
             },
-            data:  [
+            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),
+              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),
+              132, 101, 134, 90, 230, 210, 134, 90, 230, 210, 230,
             ],
           },
           {
@@ -214,9 +290,9 @@ export default {
             emphasis: {
               focus: "series",
             },
-            data:  [
+            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),
+              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),
+              410, 150, 232, 201, 154, 190, 330, 410, 150, 232, 201,
             ],
           },
           {
@@ -227,8 +303,8 @@ export default {
               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),
+              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),
+              410, 150, 232, 201, 154, 190, 330, 410, 150, 232, 201,
             ],
           },
           {
@@ -238,9 +314,9 @@ export default {
             emphasis: {
               focus: "series",
             },
-            data:  [
+            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),
+              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),
+              410, 150, 232, 201, 154, 190, 330, 410, 150, 232, 201,
             ],
           },
         ],
@@ -327,9 +403,9 @@ export default {
             emphasis: {
               focus: "series",
             },
-            data:  [
+            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),
+              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),
+              250, 140, 232, 101, 264, 90, 340, 250, 140, 232, 101,
             ],
           },
           {
@@ -348,9 +424,9 @@ export default {
             emphasis: {
               focus: "series",
             },
-            data:  [
+            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),
+              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),
+              111, 234, 220, 340, 310, 234, 220, 340, 310, 220, 340,
             ],
           },
           {
@@ -369,9 +445,9 @@ export default {
             emphasis: {
               focus: "series",
             },
-            data:  [
+            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),
+              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),
+              220, 320, 132, 201, 334, 190, 130, 220, 190, 130, 220,
             ],
           },
           {
@@ -395,8 +471,8 @@ export default {
               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),
+              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),
+              134, 190, 230, 234, 210, 290, 150, 181, 30, 120, 200,
             ],
           },
           {
@@ -415,9 +491,9 @@ export default {
             emphasis: {
               focus: "series",
             },
-            data:  [
+            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),
+              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),
+              402, 231, 134, 190, 230, 120, 200, 500, 800, 600, 700,
             ],
           },
         ],
@@ -491,8 +567,8 @@ export default {
               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),
+              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),
+              210, 132, 101, 134, 90, 230, 210, 134, 90, 230, 210,
             ],
           },
           {
@@ -503,9 +579,9 @@ export default {
             emphasis: {
               focus: "series",
             },
-            data:  [
+            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),
+              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),
+              132, 101, 134, 90, 230, 210, 134, 90, 230, 210, 230,
             ],
           },
           {
@@ -516,9 +592,9 @@ export default {
             emphasis: {
               focus: "series",
             },
-            data:  [
+            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),
+              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),
+              410, 150, 232, 201, 154, 190, 330, 410, 150, 232, 201,
             ],
           },
           {
@@ -529,9 +605,9 @@ export default {
             emphasis: {
               focus: "series",
             },
-            data:  [
+            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),
+              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),
+              410, 150, 232, 201, 154, 190, 330, 410, 150, 232, 201,
             ],
           },
           {
@@ -542,9 +618,9 @@ export default {
             emphasis: {
               focus: "series",
             },
-            data:  [
+            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),
+              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),
+              410, 150, 232, 201, 154, 190, 330, 410, 150, 232, 201,
             ],
           },
         ],
@@ -576,24 +652,14 @@ export default {
   width: 100%;
   height: 100%;
   display: flex;
-  justify-content: space-between;
-  padding: 10px;
-  align-items: center;
-  >div {
-  width: 49%;
-  height: 100%;
-  display: flex;
   flex-direction: column;
   justify-content: space-between;
-  
+  padding: 10px;
-}
+
   .echartDiv100 {
     width: 100%;
-    height: 33%;
+    height: 20%;
     margin: 0 auto;
-    border: 1px solid #ddd;
-    display: flex;
-    align-items: center;
   }
 }
 </style>

src/components/Zhibiao3.vue

@@ -1,22 +1,8 @@
 <template>
   <div class="analyse-container">
-    <div>
+    <div id="echartDiv1" class="echartDiv100"></div>
-      <div id="echartDiv1" class="echartDiv100"></div>
+    <div id="echartDiv2" class="echartDiv100"></div>
-      <div id="echartDiv2" class="echartDiv100"></div>
+    <div id="echartDiv3" 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>
 
@@ -29,26 +15,23 @@ 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", "透水铺装面积", 500, '#80FFA5');
-      getChartsZfl("echartDiv2", "入渗系统面积", 437, '#027a1c');
-      getChartsZf3("echartDiv3", "透水系数");
-      getChartsZf4("echartDiv4", "入渗系数");
-      getChartsZf3("echartDiv5", "透水层厚度");
-      getChartsZf4("echartDiv6", "渗透量");
-      getChartsZf2("echartDiv7", "透水铺砖储水量");
-      getChartsZf2("echartDiv8", "透水铺砖表面温度");
-      getChartsZf3("echartDiv9", "热岛消减率");
-      getChartsZf2("echartDiv10", "孔隙率");
     });
-    const getChartsZfl = (id, text, num, color) => {
+    onMounted(async () => { 
+      getChartsZfl("echartDiv1", '渗透量');
+      getChartsZf2("echartDiv2", '透水铺砖表面温度');
+      getChartsZf3("echartDiv3", '热岛消减率');
+     });
+    const getChartsZfl = (id, text) => {
       var dom = document.getElementById(id);
       console.log(dom);
       var op = {
-        color: ["#80FFA5"],
+        color: ["#80FFA5", "#00DDFF", "#37A2FF", "#FFBF00", "#FF0087"],
         title: {
           text: text,
         },
@@ -62,7 +45,7 @@ export default {
           },
         },
         legend: {
-          data: ["区域面积"],
+          data: ["系统A", "系统B", "系统C", "系统D", "系统E"],
         },
         grid: {
           left: "3%",
@@ -109,7 +92,7 @@ export default {
         ],
         series: [
           {
-            name: "区域面积",
+            name: "系统A",
             type: "line",
             stack: "Total",
             smooth: true,
@@ -117,17 +100,106 @@ export default {
               width: 0,
             },
             areaStyle: {
-              color: color
+              opacity: 0.5,
+              color: "#80FFA5"
             },
             showSymbol: false,
             emphasis: {
               focus: "series",
             },
-            data:  [
+            data: [
-              num, num, num, num, num, num, num, num, num, num, num, num, num,
+              140, 232, 101, 264, 90, 340, 250, 140, 232, 101, 264, 90, 340,
-              num, num, num, num, num, num, num, num, num, num, num,
+              250, 140, 232, 101, 264, 90, 340, 250, 140, 232, 101,
             ],
-          }
+          },
+          {
+            name: "系统B",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 0,
+            },
+            areaStyle: {
+              opacity: 0.5,
+              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: {
+              opacity: 0.5,
+              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,
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            areaStyle: {
+              opacity: 0.5,
+              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,
+            ],
+          },
+          {
+            name: "系统E",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 0,
+            },
+            areaStyle: {
+              opacity: 0.5,
+              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,
+            ],
+          },
         ],
       };
       getEchart(dom, op);
@@ -193,61 +265,66 @@ export default {
           {
             name: "系统A",
             type: "bar",
-            stack: "Ad",
+            // stack: "Ad",
+            barWidth: "8",
             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),
+              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),
+              210, 132, 101, 134, 90, 230, 210, 134, 90, 230, 210,
             ],
           },
           {
             name: "系统B",
             type: "bar",
-            stack: "Ad",
+            // stack: "Ad",
+            barWidth: "8",
             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),
+              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),
+              132, 101, 134, 90, 230, 210, 134, 90, 230, 210, 230,
             ],
           },
           {
             name: "系统C",
             type: "bar",
-            stack: "Ad",
+            barWidth: "8",
+            // 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),
+              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),
+              410, 150, 232, 201, 154, 190, 330, 410, 150, 232, 201,
             ],
           },
           {
             name: "系统D",
             type: "bar",
-            stack: "Ad",
+            // stack: "Ad",
+            barWidth: "8",
             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),
+              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),
+              410, 150, 232, 201, 154, 190, 330, 410, 150, 232, 201,
             ],
           },
           {
             name: "系统E",
             type: "bar",
-            stack: "Ad",
+            barWidth: "8",
+            // stack: "Ad",
             emphasis: {
               focus: "series",
             },
-            data:[
+            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),
+              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),
+              410, 150, 232, 201, 154, 190, 330, 410, 150, 232, 201,
             ],
           },
         ],
@@ -258,137 +335,22 @@ export default {
       var dom = document.getElementById(id);
       console.log(dom);
       var op = {
+        color: ["#eceff7", "#fff2f9", "#8bc4f8", "#fd9d48", "#9485be"],
         title: {
           text: text,
         },
         tooltip: {
           trigger: "axis",
           axisPointer: {
-            type: "shadow",
+            type: "cross",
+            label: {
+              backgroundColor: "#6a7985",
+            },
           },
         },
-        legend: {},
+        legend: {
-        grid: {
+          data: ["系统A", "系统B", "系统C", "系统D", "系统E"],
-          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%",
@@ -398,6 +360,7 @@ export default {
         xAxis: [
           {
             type: "category",
+            boundaryGap: false,
             data: [
               "00",
               "01",
@@ -435,61 +398,110 @@ export default {
           {
             name: "系统A",
             type: "line",
-            stack: "Ad",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 0,
+            },
+            areaStyle: {
+              opacity: 0.5,
+              color: "#eceff7"
+            },
+            showSymbol: false,
             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),
+              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),
+              250, 140, 232, 101, 264, 90, 340, 250, 140, 232, 101,
             ],
           },
           {
             name: "系统B",
             type: "line",
-            stack: "Ad",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 0,
+            },
+            areaStyle: {
+              opacity: 0.5,
+              color: "#fff2f9"
+            },
+            showSymbol: false,
             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),
+              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),
+              111, 234, 220, 340, 310, 234, 220, 340, 310, 220, 340,
             ],
           },
           {
             name: "系统C",
             type: "line",
-            stack: "Ad",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 0,
+            },
+            showSymbol: false,
+            areaStyle: {
+              opacity: 0.5,
+              color: "#8bc4f8"
+            },
             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),
+              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),
+              220, 320, 132, 201, 334, 190, 130, 220, 190, 130, 220,
             ],
           },
           {
             name: "系统D",
             type: "line",
-            stack: "Ad",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 0,
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            areaStyle: {
+              opacity: 0.5,
+              color: "#fd9d48"
+            },
             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),
+              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),
+              134, 190, 230, 234, 210, 290, 150, 181, 30, 120, 200,
             ],
           },
           {
             name: "系统E",
             type: "line",
-            stack: "Ad",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 0,
+            },
+            areaStyle: {
+              opacity: 0.5,
+              color: "#9485be"
+            },
+            showSymbol: false,
             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),
+              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),
+              402, 231, 134, 190, 230, 120, 200, 500, 800, 600, 700,
             ],
           },
         ],
@@ -500,7 +512,7 @@ export default {
       if (dom) {
         // 图表的dom属性中发现了一个特殊的属性：_echarts_instance_，对应的值是一个id，可能是由于再次渲染时这个id未发生改变导致ehcarts认为不需要重新渲染
         // 手动移除该属性
-        dom.removeAttribute("_echarts_instance_");
+        dom.removeAttribute('_echarts_instance_')
         var myChart = echarts.init(dom);
         var option = op;
 
@@ -510,7 +522,7 @@ export default {
     return {
       ...toRefs(state),
       getChartsZfl,
-      getEchart,
+      getEchart
     };
   },
 };
@@ -521,22 +533,14 @@ 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;
-}
+  padding: 10px;
+
   .echartDiv100 {
     width: 100%;
-    height: 20%;
+    height: 30%;
     margin: 0 auto;
-    border: 1px solid #ddd;
   }
 }
 </style>

src/components/Zhibiao4.vue

@@ -1,17 +1,10 @@
 <template>
   <div class="analyse-container">
-    <div>
+    <div id="echartDiv1" class="echartDiv100"></div>
-      <div id="echartDiv1" class="echartDiv100"></div>
+    <div id="echartDiv2" class="echartDiv100"></div>
-      <div id="echartDiv3" class="echartDiv100"></div>
+    <div id="echartDiv3" class="echartDiv100"></div>
-      <div id="echartDiv2" class="echartDiv100"></div>
+    <div id="echartDiv4" class="echartDiv100"></div>
-      <div id="echartDiv4" class="echartDiv100"></div>
+    <div id="echartDiv5" 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>
 
@@ -32,104 +25,13 @@ export default {
       
     });
     onMounted(async () => { 
-      getChartsZfl("echartDiv1", "地块面积", 730, "#80FFA5");
+      getChartsZfl("echartDiv1", '调蓄池液位');
-      getChartsZf2("echartDiv2", '地块调蓄容积');
+      getChartsZf2("echartDiv2", 'COD');
-      getChartsZf3("echartDiv3", '调蓄池液位');
+      getChartsZf3("echartDiv3", '氨氮');
-      getChartsZf4("echartDiv4", '溢流量');
+      getChartsZfl("echartDiv4", 'SS');
-      getChartsZf2("echartDiv5", 'COD');
+      getChartsZf4("echartDiv5", '溢流量');
-      getChartsZf3("echartDiv6", '氨氮');
-      getChartsZf4("echartDiv7", 'SS');
-      getChartsZf2("echartDiv8", '地块剩余调蓄容积');
      });
-    const getChartsZfl = (id, text, num, color) => {
+    const getChartsZfl = (id, text) => {
-      var dom = document.getElementById(id);
-      console.log(dom);
-      var op = {
-        color: ["#80FFA5"],
-        title: {
-          text: text,
-        },
-        tooltip: {
-          trigger: "axis",
-          axisPointer: {
-            type: "cross",
-            label: {
-              backgroundColor: "#6a7985",
-            },
-          },
-        },
-        legend: {
-          data: ["地块面积"],
-        },
-        grid: {
-          left: "3%",
-          right: "4%",
-          bottom: "3%",
-          containLabel: true,
-        },
-        xAxis: [
-          {
-            type: "category",
-            boundaryGap: false,
-            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: "区域面积",
-            type: "line",
-            stack: "Total",
-            smooth: true,
-            lineStyle: {
-              width: 0,
-            },
-            areaStyle: {
-              color: color
-            },
-            showSymbol: false,
-            emphasis: {
-              focus: "series",
-            },
-            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 = {
@@ -190,61 +92,238 @@ export default {
           {
             name: "系统A",
             type: "bar",
-            stack: "Ad",
+            // stack: "Ad",
+            barWidth: "8",
             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),
+              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),
+              210, 132, 101, 134, 90, 230, 210, 134, 90, 230, 210,
             ],
           },
           {
             name: "系统B",
             type: "bar",
-            stack: "Ad",
+            // stack: "Ad",
+            barWidth: "8",
             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),
+              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),
+              132, 101, 134, 90, 230, 210, 134, 90, 230, 210, 230,
             ],
           },
           {
             name: "系统C",
             type: "bar",
-            stack: "Ad",
+            barWidth: "8",
+            // 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),
+              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),
+              410, 150, 232, 201, 154, 190, 330, 410, 150, 232, 201,
             ],
           },
           {
             name: "系统D",
             type: "bar",
-            stack: "Ad",
+            // stack: "Ad",
+            barWidth: "8",
             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),
+              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),
+              410, 150, 232, 201, 154, 190, 330, 410, 150, 232, 201,
             ],
           },
           {
             name: "系统E",
             type: "bar",
-            stack: "Ad",
+            barWidth: "8",
+            // stack: "Ad",
             emphasis: {
               focus: "series",
             },
-            data:[
+            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),
+              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),
+              410, 150, 232, 201, 154, 190, 330, 410, 150, 232, 201,
+            ],
+          },
+        ],
+      };
+      getEchart(dom, op);
+    };
+    const getChartsZf2 = (id, text) => {
+      var dom = document.getElementById(id);
+      console.log(dom);
+      var op = {
+        color: ["#80FFA5", "#00DDFF", "#37A2FF", "#FF0087", "#FFBF00"],
+        title: {
+          text: text,
+        },
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "cross",
+            label: {
+              backgroundColor: "#6a7985",
+            },
+          },
+        },
+        legend: {
+          data: ["系统A", "系统B", "系统C", "系统D", "系统E"],
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            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: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 0,
+            },
+            areaStyle: {
+              color: "#80FFA5"
+            },
+            showSymbol: false,
+            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,
+            },
+            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,
             ],
           },
         ],
@@ -310,50 +389,50 @@ export default {
         series: [
           {
             name: "系统A",
-            type: "bar",
+            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),
+              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),
+              210, 132, 101, 134, 90, 230, 210, 134, 90, 230, 210,
             ],
           },
           {
             name: "系统B",
-            type: "bar",
+            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),
+              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),
+              132, 101, 134, 90, 230, 210, 134, 90, 230, 210, 230,
             ],
           },
           {
             name: "系统C",
-            type: "bar",
+            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: "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),
+              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),
+              410, 150, 232, 201, 154, 190, 330, 410, 150, 232, 201,
+            ],
+          },
+          {
+            name: "系统D",
+            type: "line",
+            stack: "Ad",
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              150, 232, 201, 154, 190, 330, 410, 150, 232, 201, 154, 190, 330,
+              410, 150, 232, 201, 154, 190, 330, 410, 150, 232, 201,
             ],
           },
           {
@@ -364,8 +443,8 @@ export default {
               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),
+              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),
+              410, 150, 232, 201, 154, 190, 330, 410, 150, 232, 201,
             ],
           },
         ],
@@ -379,6 +458,7 @@ export default {
         title: {
           text: text,
         },
+        color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
         tooltip: {
           trigger: "axis",
           axisPointer: {
@@ -431,50 +511,50 @@ export default {
         series: [
           {
             name: "系统A",
-            type: "line",
+            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),
+              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),
+              210, 132, 101, 134, 90, 230, 210, 134, 90, 230, 210,
             ],
           },
           {
             name: "系统B",
-            type: "line",
+            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),
+              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),
+              132, 101, 134, 90, 230, 210, 134, 90, 230, 210, 230,
             ],
           },
           {
             name: "系统C",
-            type: "line",
+            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),
+              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),
+              410, 150, 232, 201, 154, 190, 330, 410, 150, 232, 201,
             ],
           },
           {
             name: "系统D",
-            type: "line",
+            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),
+              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),
+              410, 150, 232, 201, 154, 190, 330, 410, 150, 232, 201,
             ],
           },
           {
@@ -485,8 +565,8 @@ export default {
               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),
+              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),
+              410, 150, 232, 201, 154, 190, 330, 410, 150, 232, 201,
             ],
           },
         ],
@@ -518,21 +598,14 @@ export default {
   width: 100%;
   height: 100%;
   display: flex;
-  // flex-direction: column;
-  justify-content: space-between;
-  padding: 10px;
-  >div {
-  width: 49%;
-  height: 100%;
-  display: flex;
   flex-direction: column;
   justify-content: space-between;
-}
+  padding: 10px;
+
   .echartDiv100 {
     width: 100%;
     height: 20%;
     margin: 0 auto;
-    border: 1px solid #ddd;
   }
 }
 </style>

src/css/index.scss

@@ -73,7 +73,6 @@ 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: 99%;
+        height:100%;
         // border: 1px solid red;
       }
     

src/views/Chuxu.vue

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

src/views/Green.vue

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

src/views/Home.vue

@@ -7,15 +7,7 @@
     <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 class="one-card-right" :class="'color' + i"></div>
-          <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>
@@ -33,52 +25,22 @@ 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: ''
-        }]
       }]
     })
 
@@ -100,8 +62,8 @@ export default {
 .home {
   width: 100%;
   height: 100%;
-  background: url(../assets/index-bg1.jpg) left top no-repeat;
+  // background: url(../assets/bg2.png) 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;
@@ -169,7 +131,6 @@ export default {
       justify-content: space-between;
       box-shadow: 0 0 8px #99ACB0 inset;
       cursor: pointer;
-      color: #fff;
       .one-card-left {
         width: 80%;
         padding: 10px;
@@ -220,20 +181,6 @@ 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: 99%;
+        height:100%;
         // border: 1px solid red;
       }
     

src/views/Shentou.vue

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

src/views/Weather.vue

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

src/views/page.vue

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