。。

src/components/Ganalyse3.vue

@@ -21,8 +21,7 @@ export default {
 
     });
     onMounted(async () => {
-      getChartsZfl("echartDiv", '蒸发量');
+      getChartsZfl("echartDiv", '热岛消减率');
-      getChartsZfl("echartDivQ", '蒸发带走的潜热')
     });
     const getChartsZfl = (id, text) => {
       var dom = document.getElementById(id);
@@ -30,19 +29,20 @@ export default {
         tooltip: {
           trigger: 'axis',
           axisPointer: {
-            type: 'cross',
+            type: 'cross'
-            crossStyle: {
-              color: '#999'
-            }
           }
         },
-        legend: {
+        title: {
-          data: ['系统A', '系统B', '系统C', '系统D', '系统E']
+          text,
         },
-        xAxis: [
+        legend: {},
-          {
+        yAxis: {
-            type: 'category',
+          type: 'value'
-            data: [
+          
+        },
+        xAxis: {
+          type: 'category',
+          data: [
               "00",
               "01",
               "02",
@@ -68,67 +68,32 @@ export default {
               "22",
               "23",
             ],
-            axisPointer: {
+        },
-              type: 'shadow'
-            }
-          }
-        ],
-        yAxis: [
-          {
-            type: 'value',
-            name: '热岛消减率A',
-            min: 0,
-            max: 250,
-            interval: 50,
-          },
-          {
-            type: 'value',
-            name: '热岛消减率B',
-            min: 0,
-            max: 25,
-            interval: 5,
-          }
-        ],
         series: [
           {
             name: '系统A',
-            type: 'line',
+            data: [100, 200, 300, 200, 100, 300, 400, 200, 150, 400, 550, 340,100, 200, 300, 200, 100, 300, 400, 200, 150, 600, 550, 340],
-            stack: 'one',
+            type: 'bar'
-            data: [
-              2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3, 2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
-            ]
           },
           {
             name: '系统B',
-            type: 'line',
+            data: [200, 150, 520, 550, 100, 200, 300, 200, 100, 300, 400, 340,300, 200, 100, 300, 400, 340,300, 200, 100, 300, 400, 340],
-            stack: 'one',
+            type: 'bar'
-            data: [
-              2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3, 2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
-            ]
           },
           {
             name: '系统C',
-            type: 'line',
+            data: [100, 200, 150, 550, 550, 200, 300, 200, 100, 300, 400, 340,100, 200, 150, 300, 550, 200, 100, 200, 150, 400, 550, 200],
-            stack: 'one',
+            type: 'bar'
-            data: [
-              2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3, 2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
-            ]
           },
           {
             name: '系统D',
-            type: 'line',
+            data: [400, 200, 150, 500, 100, 200, 300, 200, 100, 300, 550, 340,400, 200, 150, 300, 100, 200,400, 200, 150, 600, 100, 200],
-            stack: 'one',
+            type: 'bar'
-            data: [
-              2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3, 2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
-            ]
           },
           {
             name: '系统E',
-            type: 'line',
+            data: [200, 100, 100, 200, 300, 400, 400, 200, 150, 400, 550, 340, 400, 200, 150, 100, 550, 400, 200, 150, 600, 550,190,200],
-            yAxisIndex: 1,
+            type: 'bar'
-            data: [
-              2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2, 2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2
-            ]
           }
         ]
       };

src/components/Ganalyse4.vue

@@ -22,37 +22,41 @@ export default {
       
     });
     onMounted(async () => { 
-      getChartsZfl("echartDiv", '蒸发量');
+      getChartsZf1("echartDiv", '调蓄池液位');
-      getChartsZf2("echartDivQ", '蒸发带走的潜热')
+      getChartsZf2("echartDivQ", '溢流量')
      });
-    const getChartsZfl = (id, text) => {
+    const getChartsZf1 = (id, text) => {
       var dom = document.getElementById(id);
       var op = {
-        color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
         title: {
-          text: text
+          text,
         },
         tooltip: {
-          trigger: 'axis',
+          trigger: "axis",
           axisPointer: {
-            type: 'cross',
+            type: "cross",
             label: {
-              backgroundColor: '#6a7985'
+              backgroundColor: "#6a7985",
-            }
+            },
-          }
+          },
         },
         legend: {
-          data: ['系统A', '系统B', '系统C', '系统D', '系统E']
+          data: ["系统A", "系统B", "系统C", "系统D", "系统E"],
+        },
+        toolbox: {
+          feature: {
+            saveAsImage: {},
+          },
         },
         grid: {
-          left: '3%',
+          left: "3%",
-          right: '4%',
+          right: "4%",
-          bottom: '3%',
+          bottom: "3%",
-          containLabel: true
+          containLabel: true,
         },
         xAxis: [
           {
-            type: 'category',
+            type: "category",
             boundaryGap: false,
             data: [
               "00",
@@ -79,158 +83,88 @@ export default {
               "21",
               "22",
               "23",
-            ]
+            ],
-          }
+          },
         ],
         yAxis: [
           {
-            type: 'value'
+            type: "value",
-          }
+          },
         ],
         series: [
           {
-            name: '系统A',
+            name: "系统A",
-            type: 'line',
+            type: "line",
-            stack: 'Total',
+            stack: "Total",
-            smooth: true,
+            areaStyle: {},
-            lineStyle: {
-              width: 0
-            },
-            showSymbol: false,
-            areaStyle: {
-              opacity: 0.8,
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                {
-                  offset: 0,
-                  color: 'rgb(128, 255, 165)'
-                },
-                {
-                  offset: 1,
-                  color: 'rgb(1, 191, 236)'
-                }
-              ])
-            },
             emphasis: {
-              focus: 'series'
+              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]
+            data: [
+              120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90, 230,
+              210, 120, 132, 101, 134, 90, 230, 210, 230, 210, 120,
+            ],
           },
           {
-            name: '系统B',
+            name: "系统B",
-            type: 'line',
+            type: "line",
-            stack: 'Total',
+            stack: "Total",
-            smooth: true,
+            areaStyle: {},
-            lineStyle: {
-              width: 0
-            },
-            showSymbol: false,
-            areaStyle: {
-              opacity: 0.8,
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                {
-                  offset: 0,
-                  color: 'rgb(0, 221, 255)'
-                },
-                {
-                  offset: 1,
-                  color: 'rgb(77, 119, 255)'
-                }
-              ])
-            },
             emphasis: {
-              focus: 'series'
+              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]
+            data: [
+              220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234, 290, 330,
+              310, 220, 182, 191, 234, 290, 330, 310, 340, 210, 250,
+            ],
           },
           {
-            name: '系统C',
+            name: "系统C",
-            type: 'line',
+            type: "line",
-            stack: 'Total',
+            stack: "Total",
-            smooth: true,
+            areaStyle: {},
-            lineStyle: {
-              width: 0
-            },
-            showSymbol: false,
-            areaStyle: {
-              opacity: 0.8,
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                {
-                  offset: 0,
-                  color: 'rgb(55, 162, 255)'
-                },
-                {
-                  offset: 1,
-                  color: 'rgb(116, 21, 219)'
-                }
-              ])
-            },
             emphasis: {
-              focus: 'series'
+              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]
+            data: [
+              150, 232, 201, 154, 190, 330, 410, 150, 232, 201, 154, 190, 330,
+              410, 150, 232, 201, 154, 190, 330, 410, 120, 230, 250,
+            ],
           },
           {
-            name: '系统D',
+            name: "系统D",
-            type: 'line',
+            type: "line",
-            stack: 'Total',
+            stack: "Total",
-            smooth: true,
+            areaStyle: {},
-            lineStyle: {
-              width: 0
-            },
-            showSymbol: false,
-            areaStyle: {
-              opacity: 0.8,
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                {
-                  offset: 0,
-                  color: 'rgb(255, 0, 135)'
-                },
-                {
-                  offset: 1,
-                  color: 'rgb(135, 0, 157)'
-                }
-              ])
-            },
             emphasis: {
-              focus: 'series'
+              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]
+            data: [
+              320, 332, 301, 334, 390, 330, 320, 320, 332, 301, 334, 390, 330,
+              320, 320, 332, 301, 334, 390, 330, 320, 240, 210, 220,
+            ],
           },
           {
-            name: '系统E',
+            name: "系统E",
-            type: 'line',
+            type: "line",
-            stack: 'Total',
+            stack: "Total",
-            smooth: true,
-            lineStyle: {
-              width: 0
-            },
-            showSymbol: false,
             label: {
               show: true,
-              position: 'top'
+              position: "top",
-            },
-            areaStyle: {
-              opacity: 0.8,
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                {
-                  offset: 0,
-                  color: 'rgb(255, 191, 0)'
-                },
-                {
-                  offset: 1,
-                  color: 'rgb(224, 62, 76)'
-                }
-              ])
             },
+            areaStyle: {},
             emphasis: {
-              focus: 'series'
+              focus: "series",
             },
-            data: [220, 302, 181, 30, 120, 200, 500, 800, 600, 700, 220, 402, 231, 134, 190, 230, 234, 210, 290, 150, 181, 30, 120, 200]
+            data: [
-          }
+              301, 334, 390, 330, 320, 320, 332, 301, 334, 390, 301, 334, 390,
-        ]
+              330, 320, 320, 332, 301, 334, 390, 120, 128, 345, 320,
+            ],
+          },
+        ],
       };
-      getEchart(dom, op)
+      getEchart(dom, op);
-    }
+    };
     const getChartsZf2 = (id, text) => {
       var dom = document.getElementById(id);
       var op = {
@@ -447,7 +381,7 @@ export default {
     };
     return {
       ...toRefs(state),
-      getChartsZfl,
+      getChartsZf1,
       getChartsZf2,
       getEchart
     };

src/components/Ganalyse5.vue

@@ -1,6 +1,8 @@
 <template>
   <div class="analyse-container">
+    <div id="echartDiv1" class="echartDiv50"></div>
     <div id="echartDiv" class="echartDiv100"></div>
+    <div id="echartDiv2" class="echartDiv50"></div>
     <div id="echartDivQ" class="echartDiv100"></div>
   </div>
 </template>
@@ -14,137 +16,144 @@ 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 () => {
-      getChartsZf1("echartDiv", '蒸发量');
+      getChartsPie("echartDiv1", "蒸发量");
-      getChartsZf2("echartDivQ", '蒸发带走的潜热')
+      getChartsZf1("echartDiv", "当天蒸发量");
+      getChartsBar("echartDiv2", '蒸发带走的潜热')
+      getChartsZf1("echartDivQ", "当天蒸发带走的潜热");
     });
-    const getChartsZf1 = (id, text) => {
+     const getChartsPie = (id, text) => {
       var dom = document.getElementById(id);
       var op = {
         title: {
-          text
+          text: text
         },
         tooltip: {
-          trigger: 'axis',
+          trigger: 'item'
-          axisPointer: {
-            type: 'cross',
-            label: {
-              backgroundColor: '#6a7985'
-            }
-          }
         },
         legend: {
-          data: ['系统A', '系统B', '系统C', '系统D', '系统E']
+          top: '5%',
+          left: 'center'
         },
-        toolbox: {
-          feature: {
-            saveAsImage: {}
-          }
-        },
-        grid: {
-          left: '3%',
-          right: '4%',
-          bottom: '3%',
-          containLabel: true
-        },
-        xAxis: [
-          {
-            type: 'category',
-            boundaryGap: false,
-            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
-          }
-        ],
-        yAxis: [
-          {
-            type: 'value'
-          }
-        ],
         series: [
           {
-            name: '系统A',
+            name: 'Access From',
-            type: 'line',
+            type: 'pie',
-            stack: 'Total',
+            radius: ['40%', '70%'],
-            areaStyle: {},
+            avoidLabelOverlap: false,
-            emphasis: {
-              focus: 'series'
-            },
-            data: [120, 132, 101, 134, 90, 230, 210]
-          },
-          {
-            name: '系统B',
-            type: 'line',
-            stack: 'Total',
-            areaStyle: {},
-            emphasis: {
-              focus: 'series'
-            },
-            data: [220, 182, 191, 234, 290, 330, 310]
-          },
-          {
-            name: '系统C',
-            type: 'line',
-            stack: 'Total',
-            areaStyle: {},
-            emphasis: {
-              focus: 'series'
-            },
-            data: [150, 232, 201, 154, 190, 330, 410]
-          },
-          {
-            name: '系统D',
-            type: 'line',
-            stack: 'Total',
-            areaStyle: {},
-            emphasis: {
-              focus: 'series'
-            },
-            data: [320, 332, 301, 334, 390, 330, 320]
-          },
-          {
-            name: '系统E',
-            type: 'line',
-            stack: 'Total',
             label: {
-              show: true,
+              show: false,
-              position: 'top'
+              position: 'center'
             },
-            areaStyle: {},
             emphasis: {
-              focus: 'series'
+              label: {
+                show: true,
+                fontSize: 40,
+                fontWeight: 'bold'
+              }
+            },
+            labelLine: {
+              show: false
             },
             data: [
-              2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2, 2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2
+              { value: 1048, name: '系统A' },
+              { value: 735, name: '系统B' },
+              { value: 580, name: '系统C' },
+              { value: 484, name: '系统D' },
+              { value: 300, name: '系统E' }
             ]
           }
         ]
       };
       getEchart(dom, op)
     }
-    const getChartsZf2 = (id, text) => {
+    const getChartsBar = (id, text) => {
       var dom = document.getElementById(id);
       var op = {
         tooltip: {
           trigger: 'axis',
           axisPointer: {
-            type: 'cross',
+            type: 'cross'
-            crossStyle: {
-              color: '#999'
-            }
           }
         },
+        title: {
+          text,
+        },
+        legend: {},
+        xAxis: {
+          type: 'value'
+          
+        },
+        yAxis: {
+          type: 'category',
+          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
+        },
+        series: [
+          {
+            name: '系统A',
+            data: [100, 200, 300, 200, 100, 300, 400, 200, 150, 600, 550, 340],
+            type: 'bar'
+          },
+          {
+            name: '系统B',
+            data: [200, 150, 600, 550, 100, 200, 300, 200, 100, 300, 400, 340],
+            type: 'bar'
+          },
+          {
+            name: '系统C',
+            data: [100, 200, 150, 600, 550, 200, 300, 200, 100, 300, 400, 340],
+            type: 'bar'
+          },
+          {
+            name: '系统D',
+            data: [400, 200, 150, 600, 100, 200, 300, 200, 100, 300, 550, 340],
+            type: 'bar'
+          },
+          {
+            name: '系统E',
+            data: [200, 100, 100, 200, 300, 400, 400, 200, 150, 600, 550, 340],
+            type: 'bar'
+          }
+        ]
+      };
+      getEchart(dom, op)
+    }
+    const getChartsZf1 = (id, text) => {
+      var dom = document.getElementById(id);
+      var op = {
+        title: {
+          text,
+        },
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "cross",
+            label: {
+              backgroundColor: "#6a7985",
+            },
+          },
+        },
         legend: {
-          data: ['系统A', '系统B', '系统C', '系统D', '系统E']
+          data: ["系统A", "系统B", "系统C", "系统D", "系统E"],
+        },
+        toolbox: {
+          feature: {
+            saveAsImage: {},
+          },
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
         },
         xAxis: [
           {
-            type: 'category',
+            type: "category",
+            boundaryGap: false,
             data: [
               "00",
               "01",
@@ -171,72 +180,232 @@ export default {
               "22",
               "23",
             ],
-            axisPointer: {
+          },
-              type: 'shadow'
-            }
-          }
         ],
         yAxis: [
           {
-            type: 'value',
+            type: "value",
-            name: '热岛消减率A',
-            min: 0,
-            max: 250,
-            interval: 50,
           },
-          {
-            type: 'value',
-            name: '热岛消减率B',
-            min: 0,
-            max: 25,
-            interval: 5,
-          }
         ],
         series: [
           {
-            name: '系统A',
+            name: "系统A",
-            type: 'line',
+            type: "line",
-            stack: 'one',
+            stack: "Total",
+            areaStyle: {},
+            emphasis: {
+              focus: "series",
+            },
             data: [
-              2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3, 2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
+              120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90, 230,
-            ]
+              210, 120, 132, 101, 134, 90, 230, 210, 230, 210, 120,
+            ],
           },
           {
-            name: '系统B',
+            name: "系统B",
-            type: 'line',
+            type: "line",
-            stack: 'one',
+            stack: "Total",
+            areaStyle: {},
+            emphasis: {
+              focus: "series",
+            },
             data: [
-              2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3, 2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
+              220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234, 290, 330,
-            ]
+              310, 220, 182, 191, 234, 290, 330, 310, 340, 210, 250,
+            ],
           },
           {
-            name: '系统C',
+            name: "系统C",
-            type: 'line',
+            type: "line",
-            stack: 'one',
+            stack: "Total",
+            areaStyle: {},
+            emphasis: {
+              focus: "series",
+            },
             data: [
-              2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3, 2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
+              150, 232, 201, 154, 190, 330, 410, 150, 232, 201, 154, 190, 330,
-            ]
+              410, 150, 232, 201, 154, 190, 330, 410, 120, 230, 250,
+            ],
           },
           {
-            name: '系统D',
+            name: "系统D",
-            type: 'line',
+            type: "line",
-            stack: 'one',
+            stack: "Total",
+            areaStyle: {},
+            emphasis: {
+              focus: "series",
+            },
             data: [
-              2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3, 2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
+              320, 332, 301, 334, 390, 330, 320, 320, 332, 301, 334, 390, 330,
-            ]
+              320, 320, 332, 301, 334, 390, 330, 320, 240, 210, 220,
+            ],
           },
           {
-            name: '系统E',
+            name: "系统E",
-            type: 'line',
+            type: "line",
-            yAxisIndex: 1,
+            stack: "Total",
+            label: {
+              show: true,
+              position: "top",
+            },
+            areaStyle: {},
+            emphasis: {
+              focus: "series",
+            },
             data: [
-              2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2, 2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2
+              301, 334, 390, 330, 320, 320, 332, 301, 334, 390, 301, 334, 390,
-            ]
+              330, 320, 320, 332, 301, 334, 390, 120, 128, 345, 320,
-          }
+            ],
-        ]
+          },
+        ],
       };
-      getEchart(dom, op)
+      getEchart(dom, op);
-    }
+    };
+    const getChartsZf2 = (id, text) => {
+      var dom = document.getElementById(id);
+      var op = {
+        title: {
+          text,
+        },
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "cross",
+            label: {
+              backgroundColor: "#6a7985",
+            },
+          },
+        },
+        legend: {
+          data: ["系统A", "系统B", "系统C", "系统D", "系统E"],
+        },
+        toolbox: {
+          feature: {
+            saveAsImage: {},
+          },
+        },
+        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",
+            areaStyle: {},
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              210, 120, 132, 101, 134, 90, 230, 210, 230, 210, 120, 120, 132,
+              101, 134, 90, 230, 210, 120, 132, 101, 134, 90, 230,
+            ],
+            color: "#9b361e"
+          },
+          {
+            name: "系统B",
+            type: "line",
+            stack: "Total",
+            areaStyle: {},
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              182, 191, 234, 290, 330, 220, 182, 191, 234, 290, 330, 310, 220,
+              310, 220, 182, 191, 234, 290, 330, 310, 340, 210, 250,
+            ],
+            color: "#a7dcf5"
+          },
+          {
+            name: "系统C",
+            type: "line",
+            stack: "Total",
+            areaStyle: {},
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              150, 232, 201, 154, 190, 330, 410, 150, 232, 201, 154, 190, 330,
+              410, 120, 230, 250, 410, 150, 232, 201, 154, 190, 330,
+            ],
+            color: "#80c0a8"
+          },
+          {
+            name: "系统D",
+            type: "line",
+            stack: "Total",
+            areaStyle: {},
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              320, 332, 301, 334, 320, 320, 332, 301, 334, 390, 330, 320, 240,
+              210, 220, 390, 330, 320, 320, 332, 301, 334, 390, 330,
+            ],
+            color: "#8d38ac"
+          },
+          {
+            name: "系统E",
+            type: "line",
+            stack: "Total",
+            label: {
+              show: true,
+              position: "top",
+            },
+            areaStyle: {},
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              330, 320, 320, 332, 301, 334, 390, 120, 128, 345, 320, 301, 334,
+              390, 330, 320, 320, 332, 301, 334, 390, 301, 334, 390,
+            ],
+            color: "#8dc149"
+          },
+        ],
+      };
+      getEchart(dom, op);
+    };
     const getEchart = (dom, op) => {
       if (dom) {
         var myChart = echarts.init(dom);
@@ -249,7 +418,9 @@ export default {
       ...toRefs(state),
       getChartsZf1,
       getChartsZf2,
-      getEchart
+      getEchart,
+      getChartsBar,
+      getChartsPie
     };
   },
 };
@@ -260,12 +431,19 @@ export default {
   width: 100%;
   height: 100%;
   display: flex;
-  flex-direction: column;
+  // flex-direction: column;
   justify-content: space-between;
   padding: 10px;
+  flex-wrap: wrap;
 
   .echartDiv100 {
-    width: 100%;
+    width: 65%;
+    height: 49%;
+    margin: 0 auto;
+    // border: 1px solid red;
+  }
+  .echartDiv50 {
+    width: 34%;
     height: 49%;
     margin: 0 auto;  
     // border: 1px solid red;

src/views/Home.vue

@@ -81,7 +81,7 @@ export default {
           dw: '%'
         }]
       }, {
-        name: '调蓄系统&逆流监测系统',
+        name: '调蓄系统&溢流监测系统',
         url: 'chuxu',
         parms: [{
           name: '溢流量',