From 11f3a8db3c8759f36d1ec5b47898ab7485bf8c6b Mon Sep 17 00:00:00 2001
From: cc <cc@chaochao.email>
Date: Wed, 1 Nov 2023 11:48:27 +0000
Subject: [PATCH] echarts

---
 src/components/Ganalyse1.vue | 229 +++++++++++++
 src/components/Ganalyse2.vue | 267 +++++++++++++++
 src/components/Ganalyse3.vue | 170 ++++++++++
 src/components/Ganalyse4.vue | 474 +++++++++++++++++++++++++++
 src/components/Ganalyse5.vue | 274 ++++++++++++++++
 src/components/History1.vue  | 265 +++++++++++++++
 src/components/History2.vue  | 265 +++++++++++++++
 src/components/History3.vue  | 265 +++++++++++++++
 src/components/History4.vue  | 265 +++++++++++++++
 src/components/History5.vue  | 265 +++++++++++++++
 src/components/Zhibiao1.vue  | 606 +++++++++++++++++++++++++++++++++++
 src/components/Zhibiao2.vue  | 276 ++++++++++++++++
 src/components/Zhibiao3.vue  | 276 ++++++++++++++++
 src/components/Zhibiao4.vue  | 276 ++++++++++++++++
 src/components/Zhibiao5.vue  | 276 ++++++++++++++++
 src/views/Biology.vue        |   4 +-
 src/views/Chuxu.vue          |   2 +-
 src/views/Green.vue          |   4 +-
 src/views/Shentou.vue        |   2 +-
 src/views/Weather.vue        |   2 +-
 20 files changed, 4456 insertions(+), 7 deletions(-)
 create mode 100644 src/components/Ganalyse1.vue
 create mode 100644 src/components/Ganalyse2.vue
 create mode 100644 src/components/Ganalyse3.vue
 create mode 100644 src/components/Ganalyse4.vue
 create mode 100644 src/components/Ganalyse5.vue
 create mode 100644 src/components/History1.vue
 create mode 100644 src/components/History2.vue
 create mode 100644 src/components/History3.vue
 create mode 100644 src/components/History4.vue
 create mode 100644 src/components/History5.vue
 create mode 100644 src/components/Zhibiao1.vue
 create mode 100644 src/components/Zhibiao2.vue
 create mode 100644 src/components/Zhibiao3.vue
 create mode 100644 src/components/Zhibiao4.vue
 create mode 100644 src/components/Zhibiao5.vue

diff --git a/src/components/Ganalyse1.vue b/src/components/Ganalyse1.vue
new file mode 100644
index 0000000..6caf8ba
--- /dev/null
+++ b/src/components/Ganalyse1.vue
@@ -0,0 +1,229 @@
+<template>
+  <div class="analyse-container">
+    <div id="echartDiv" class="echartDiv100"></div>
+  </div>
+</template>
+
+<script>
+import { onMounted, reactive, ref, toRefs } from "vue";
+import { ElMessage } from "element-plus";
+import myApi from "@/api/myApi.js";
+import BarEchart from "./BarEchart.vue";
+import Process from "./Process.vue";
+import Date from "@/components/Date.vue";
+export default {
+  name: "Analyse",
+  components: {
+
+  },
+  setup() {
+    const state = reactive({
+
+    });
+    onMounted(async () => {
+      getChartsZf2("echartDiv", '热岛消减率');
+      // getChartsZfl("echartDivQ", '蒸发带走的潜热')
+    });
+    const getChartsZfl = (id, text) => {
+      var dom = document.getElementById(id);
+      var op = {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            crossStyle: {
+              color: '#999'
+            }
+          }
+        },
+        legend: {
+          data: ['系统A', '系统B', '系统C', '系统D', '系统E']
+        },
+        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",
+            ],
+            axisPointer: {
+              type: 'shadow'
+            }
+          }
+        ],
+        yAxis: [
+          
+
+        ]
+      };
+      getEchart(dom, op)
+    }
+    const getChartsZf2 = (id, text) => {
+      var dom = document.getElementById(id);
+      var op = {
+        title: {
+          text
+        },
+        tooltip: {
+          trigger: 'axis'
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: [
+          {
+            type: 'category',
+            data: [
+              "00",
+              "01",
+              "02",
+              "03",
+              "04",
+              "05",
+              "06",
+              "07",
+              "08",
+              "09",
+              "10",
+              "11",
+              "12",
+              "13",
+              "14",
+              "15",
+              "16",
+              "17",
+              "18",
+              "19",
+              "20",
+              "21",
+              "22",
+              "23",
+            ],
+            axisPointer: {
+              type: 'shadow'
+            }
+          }
+        ],
+        yAxis: {
+          type: 'value'
+        },
+        series: [
+          {
+            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',
+            stack: 'one',
+            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: 'bar',
+            stack: 'one',
+            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: 'bar',
+            stack: 'one',
+            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: 'bar',
+            stack: 'one',
+            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',
+            stack: 'Total',
+            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
+            ]
+          }
+        ]
+      };
+      getEchart(dom, op)
+    }
+    const getEchart = (dom, op) => {
+      if (dom) {
+        var myChart = echarts.init(dom);
+        var option = op;
+
+        option && myChart.setOption(option);
+      }
+    };
+    return {
+      ...toRefs(state),
+      getChartsZfl,
+      getEchart
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.analyse-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding: 10px;
+
+  .echartDiv100 {
+    width: 100%;
+    height: 100%;
+    margin: 0 auto;
+    // border: 1px solid red;
+  }
+}
+</style>
diff --git a/src/components/Ganalyse2.vue b/src/components/Ganalyse2.vue
new file mode 100644
index 0000000..829879d
--- /dev/null
+++ b/src/components/Ganalyse2.vue
@@ -0,0 +1,267 @@
+<template>
+  <div class="analyse-container">
+    <div id="echartDiv" class="echartDiv100"></div>
+    <div id="echartDivQ" class="echartDiv100"></div>
+  </div>
+</template>
+
+<script>
+import { onMounted, reactive, ref, toRefs } from "vue";
+import { ElMessage } from "element-plus";
+import myApi from "@/api/myApi.js";
+import BarEchart from "./BarEchart.vue";
+import Process from "./Process.vue";
+import Date from "@/components/Date.vue";
+export default {
+  name: "Analyse",
+  components: {
+
+  },
+  setup() {
+    const state = reactive({
+      
+    });
+    onMounted(async () => { 
+      getChartsZfl("echartDiv", '蒸发量');
+      getChartsZfl("echartDivQ", '蒸发带走的潜热')
+     });
+    const getChartsZfl = (id, text) => {
+      var dom = document.getElementById(id);
+      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
+            },
+            showSymbol: false,
+            areaStyle: {
+              opacity: 0.8,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: 'rgb(128, 255, 165)'
+                },
+                {
+                  offset: 1,
+                  color: 'rgb(1, 191, 236)'
+                }
+              ])
+            },
+            emphasis: {
+              focus: 'series'
+            },
+            data: [140, 232, 101, 264, 90, 340, 250, 140, 232, 101, 264, 90, 340, 250, 140, 232, 101, 264, 90, 340, 250, 140, 232, 101]
+          },
+          {
+            name: '系统B',
+            type: 'line',
+            stack: 'Total',
+            smooth: true,
+            lineStyle: {
+              width: 0
+            },
+            showSymbol: false,
+            areaStyle: {
+              opacity: 0.8,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: 'rgb(0, 221, 255)'
+                },
+                {
+                  offset: 1,
+                  color: 'rgb(77, 119, 255)'
+                }
+              ])
+            },
+            emphasis: {
+              focus: 'series'
+            },
+            data: [120, 700, 600, 500, 900, 282, 111, 120, 700, 600, 500, 900, 282, 111, 234, 220, 340, 310, 234, 220, 340, 310, 220, 340]
+          },
+          {
+            name: '系统C',
+            type: 'line',
+            stack: 'Total',
+            smooth: true,
+            lineStyle: {
+              width: 0
+            },
+            showSymbol: false,
+            areaStyle: {
+              opacity: 0.8,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: 'rgb(55, 162, 255)'
+                },
+                {
+                  offset: 1,
+                  color: 'rgb(116, 21, 219)'
+                }
+              ])
+            },
+            emphasis: {
+              focus: 'series'
+            },
+            data: [320, 132, 201, 334, 190, 130, 320, 132, 201, 334, 190, 130, 220, 220, 320, 132, 201, 334, 190, 130, 220, 190, 130, 220]
+          },
+          {
+            name: '系统D',
+            type: 'line',
+            stack: 'Total',
+            smooth: true,
+            lineStyle: {
+              width: 0
+            },
+            showSymbol: false,
+            areaStyle: {
+              opacity: 0.8,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: 'rgb(255, 0, 135)'
+                },
+                {
+                  offset: 1,
+                  color: 'rgb(135, 0, 157)'
+                }
+              ])
+            },
+            emphasis: {
+              focus: 'series'
+            },
+            data: [220, 402, 231, 134, 190, 230, 120, 200, 500, 800, 600, 700, 220, 402, 231, 134, 190, 230, 120, 200, 500, 800, 600, 700]
+          },
+          {
+            name: '系统E',
+            type: 'line',
+            stack: 'Total',
+            smooth: true,
+            lineStyle: {
+              width: 0
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: 'top'
+            },
+            areaStyle: {
+              opacity: 0.8,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: 'rgb(255, 191, 0)'
+                },
+                {
+                  offset: 1,
+                  color: 'rgb(224, 62, 76)'
+                }
+              ])
+            },
+            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)
+    }
+    const getEchart = (dom, op) => {
+      if (dom) {
+        var myChart = echarts.init(dom);
+        var option = op;
+
+        option && myChart.setOption(option);
+      }
+    };
+    return {
+      ...toRefs(state),
+      getChartsZfl,
+      getEchart
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.analyse-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding: 10px;
+
+  .echartDiv100 {
+    width: 100%;
+    height: 49%;
+    margin: 0 auto;
+    // border: 1px solid red;
+  }
+}
+</style>
diff --git a/src/components/Ganalyse3.vue b/src/components/Ganalyse3.vue
new file mode 100644
index 0000000..3ce7164
--- /dev/null
+++ b/src/components/Ganalyse3.vue
@@ -0,0 +1,170 @@
+<template>
+  <div class="analyse-container">
+    <div id="echartDiv" class="echartDiv100"></div>
+  </div>
+</template>
+
+<script>
+import { onMounted, reactive, ref, toRefs } from "vue";
+import { ElMessage } from "element-plus";
+import myApi from "@/api/myApi.js";
+import BarEchart from "./BarEchart.vue";
+import Process from "./Process.vue";
+import Date from "@/components/Date.vue";
+export default {
+  name: "Analyse",
+  components: {
+
+  },
+  setup() {
+    const state = reactive({
+
+    });
+    onMounted(async () => {
+      getChartsZfl("echartDiv", '蒸发量');
+      getChartsZfl("echartDivQ", '蒸发带走的潜热')
+    });
+    const getChartsZfl = (id, text) => {
+      var dom = document.getElementById(id);
+      var op = {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            crossStyle: {
+              color: '#999'
+            }
+          }
+        },
+        legend: {
+          data: ['系统A', '系统B', '系统C', '系统D', '系统E']
+        },
+        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",
+            ],
+            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',
+            stack: 'one',
+            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',
+            stack: 'one',
+            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',
+            stack: 'one',
+            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',
+            stack: 'one',
+            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',
+            yAxisIndex: 1,
+            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
+            ]
+          }
+        ]
+      };
+      getEchart(dom, op)
+    }
+    const getEchart = (dom, op) => {
+      if (dom) {
+        var myChart = echarts.init(dom);
+        var option = op;
+
+        option && myChart.setOption(option);
+      }
+    };
+    return {
+      ...toRefs(state),
+      getChartsZfl,
+      getEchart
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.analyse-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding: 10px;
+
+  .echartDiv100 {
+    width: 100%;
+    height: 100%;
+    margin: 0 auto;
+    // border: 1px solid red;
+  }
+}
+</style>
diff --git a/src/components/Ganalyse4.vue b/src/components/Ganalyse4.vue
new file mode 100644
index 0000000..e769215
--- /dev/null
+++ b/src/components/Ganalyse4.vue
@@ -0,0 +1,474 @@
+<template>
+  <div class="analyse-container">
+    <div id="echartDiv" class="echartDiv100"></div>
+    <div id="echartDivQ" class="echartDiv100"></div>
+  </div>
+</template>
+
+<script>
+import { onMounted, reactive, ref, toRefs } from "vue";
+import { ElMessage } from "element-plus";
+import myApi from "@/api/myApi.js";
+import BarEchart from "./BarEchart.vue";
+import Process from "./Process.vue";
+import Date from "@/components/Date.vue";
+export default {
+  name: "Analyse",
+  components: {
+
+  },
+  setup() {
+    const state = reactive({
+      
+    });
+    onMounted(async () => { 
+      getChartsZfl("echartDiv", '蒸发量');
+      getChartsZf2("echartDivQ", '蒸发带走的潜热')
+     });
+    const getChartsZfl = (id, text) => {
+      var dom = document.getElementById(id);
+      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
+            },
+            showSymbol: false,
+            areaStyle: {
+              opacity: 0.8,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: 'rgb(128, 255, 165)'
+                },
+                {
+                  offset: 1,
+                  color: 'rgb(1, 191, 236)'
+                }
+              ])
+            },
+            emphasis: {
+              focus: 'series'
+            },
+            data: [140, 232, 101, 264, 90, 340, 250, 140, 232, 101, 264, 90, 340, 250, 140, 232, 101, 264, 90, 340, 250, 140, 232, 101]
+          },
+          {
+            name: '系统B',
+            type: 'line',
+            stack: 'Total',
+            smooth: true,
+            lineStyle: {
+              width: 0
+            },
+            showSymbol: false,
+            areaStyle: {
+              opacity: 0.8,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: 'rgb(0, 221, 255)'
+                },
+                {
+                  offset: 1,
+                  color: 'rgb(77, 119, 255)'
+                }
+              ])
+            },
+            emphasis: {
+              focus: 'series'
+            },
+            data: [120, 700, 600, 500, 900, 282, 111, 120, 700, 600, 500, 900, 282, 111, 234, 220, 340, 310, 234, 220, 340, 310, 220, 340]
+          },
+          {
+            name: '系统C',
+            type: 'line',
+            stack: 'Total',
+            smooth: true,
+            lineStyle: {
+              width: 0
+            },
+            showSymbol: false,
+            areaStyle: {
+              opacity: 0.8,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: 'rgb(55, 162, 255)'
+                },
+                {
+                  offset: 1,
+                  color: 'rgb(116, 21, 219)'
+                }
+              ])
+            },
+            emphasis: {
+              focus: 'series'
+            },
+            data: [320, 132, 201, 334, 190, 130, 320, 132, 201, 334, 190, 130, 220, 220, 320, 132, 201, 334, 190, 130, 220, 190, 130, 220]
+          },
+          {
+            name: '系统D',
+            type: 'line',
+            stack: 'Total',
+            smooth: true,
+            lineStyle: {
+              width: 0
+            },
+            showSymbol: false,
+            areaStyle: {
+              opacity: 0.8,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: 'rgb(255, 0, 135)'
+                },
+                {
+                  offset: 1,
+                  color: 'rgb(135, 0, 157)'
+                }
+              ])
+            },
+            emphasis: {
+              focus: 'series'
+            },
+            data: [220, 402, 231, 134, 190, 230, 120, 200, 500, 800, 600, 700, 220, 402, 231, 134, 190, 230, 120, 200, 500, 800, 600, 700]
+          },
+          {
+            name: '系统E',
+            type: 'line',
+            stack: 'Total',
+            smooth: true,
+            lineStyle: {
+              width: 0
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: 'top'
+            },
+            areaStyle: {
+              opacity: 0.8,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: 'rgb(255, 191, 0)'
+                },
+                {
+                  offset: 1,
+                  color: 'rgb(224, 62, 76)'
+                }
+              ])
+            },
+            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)
+    }
+    const getChartsZf2 = (id, text) => {
+      var dom = document.getElementById(id);
+      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: 'bar',
+            stack: 'Total',
+            smooth: true,
+            lineStyle: {
+              width: 0
+            },
+            showSymbol: false,
+            areaStyle: {
+              opacity: 0.8,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: 'rgb(128, 255, 165)'
+                },
+                {
+                  offset: 1,
+                  color: 'rgb(1, 191, 236)'
+                }
+              ])
+            },
+            emphasis: {
+              focus: 'series'
+            },
+            data: [140, 232, 101, 264, 90, 340, 250, 140, 232, 101, 264, 90, 340, 250, 140, 232, 101, 264, 90, 340, 250, 140, 232, 101]
+          },
+          {
+            name: '系统B',
+            type: 'bar',
+            stack: 'Total',
+            smooth: true,
+            lineStyle: {
+              width: 0
+            },
+            showSymbol: false,
+            areaStyle: {
+              opacity: 0.8,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: 'rgb(0, 221, 255)'
+                },
+                {
+                  offset: 1,
+                  color: 'rgb(77, 119, 255)'
+                }
+              ])
+            },
+            emphasis: {
+              focus: 'series'
+            },
+            data: [120, 700, 600, 500, 900, 282, 111, 120, 700, 600, 500, 900, 282, 111, 234, 220, 340, 310, 234, 220, 340, 310, 220, 340]
+          },
+          {
+            name: '系统C',
+            type: 'bar',
+            stack: 'Total',
+            smooth: true,
+            lineStyle: {
+              width: 0
+            },
+            showSymbol: false,
+            areaStyle: {
+              opacity: 0.8,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: 'rgb(55, 162, 255)'
+                },
+                {
+                  offset: 1,
+                  color: 'rgb(116, 21, 219)'
+                }
+              ])
+            },
+            emphasis: {
+              focus: 'series'
+            },
+            data: [320, 132, 201, 334, 190, 130, 320, 132, 201, 334, 190, 130, 220, 220, 320, 132, 201, 334, 190, 130, 220, 190, 130, 220]
+          },
+          {
+            name: '系统D',
+            type: 'bar',
+            stack: 'Total',
+            smooth: true,
+            lineStyle: {
+              width: 0
+            },
+            showSymbol: false,
+            areaStyle: {
+              opacity: 0.8,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: 'rgb(255, 0, 135)'
+                },
+                {
+                  offset: 1,
+                  color: 'rgb(135, 0, 157)'
+                }
+              ])
+            },
+            emphasis: {
+              focus: 'series'
+            },
+            data: [220, 402, 231, 134, 190, 230, 120, 200, 500, 800, 600, 700, 220, 402, 231, 134, 190, 230, 120, 200, 500, 800, 600, 700]
+          },
+          {
+            name: '系统E',
+            type: 'bar',
+            stack: 'Total',
+            smooth: true,
+            lineStyle: {
+              width: 0
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              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)'
+                }
+              ])
+            },
+            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)
+    }
+    const getEchart = (dom, op) => {
+      if (dom) {
+        var myChart = echarts.init(dom);
+        var option = op;
+
+        option && myChart.setOption(option);
+      }
+    };
+    return {
+      ...toRefs(state),
+      getChartsZfl,
+      getChartsZf2,
+      getEchart
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.analyse-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding: 10px;
+
+  .echartDiv100 {
+    width: 100%;
+    height: 49%;
+    margin: 0 auto;
+    // border: 1px solid red;
+  }
+}
+</style>
diff --git a/src/components/Ganalyse5.vue b/src/components/Ganalyse5.vue
new file mode 100644
index 0000000..5f69982
--- /dev/null
+++ b/src/components/Ganalyse5.vue
@@ -0,0 +1,274 @@
+<template>
+  <div class="analyse-container">
+    <div id="echartDiv" class="echartDiv100"></div>
+    <div id="echartDivQ" class="echartDiv100"></div>
+  </div>
+</template>
+
+<script>
+import { onMounted, reactive, ref, toRefs } from "vue";
+import { ElMessage } from "element-plus";
+import myApi from "@/api/myApi.js";
+import BarEchart from "./BarEchart.vue";
+import Process from "./Process.vue";
+import Date from "@/components/Date.vue";
+export default {
+  name: "Analyse",
+  components: {
+
+  },
+  setup() {
+    const state = reactive({
+
+    });
+    onMounted(async () => {
+      getChartsZf1("echartDiv", '蒸发量');
+      getChartsZf2("echartDivQ", '蒸发带走的潜热')
+    });
+    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']
+        },
+        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',
+            type: 'line',
+            stack: 'Total',
+            areaStyle: {},
+            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,
+              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
+            ]
+          }
+        ]
+      };
+      getEchart(dom, op)
+    }
+    const getChartsZf2 = (id, text) => {
+      var dom = document.getElementById(id);
+      var op = {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            crossStyle: {
+              color: '#999'
+            }
+          }
+        },
+        legend: {
+          data: ['系统A', '系统B', '系统C', '系统D', '系统E']
+        },
+        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",
+            ],
+            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',
+            stack: 'one',
+            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',
+            stack: 'one',
+            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',
+            stack: 'one',
+            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',
+            stack: 'one',
+            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',
+            yAxisIndex: 1,
+            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
+            ]
+          }
+        ]
+      };
+      getEchart(dom, op)
+    }
+    const getEchart = (dom, op) => {
+      if (dom) {
+        var myChart = echarts.init(dom);
+        var option = op;
+
+        option && myChart.setOption(option);
+      }
+    };
+    return {
+      ...toRefs(state),
+      getChartsZf1,
+      getChartsZf2,
+      getEchart
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.analyse-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding: 10px;
+
+  .echartDiv100 {
+    width: 100%;
+    height: 49%;
+    margin: 0 auto;
+    // border: 1px solid red;
+  }
+}
+</style>
diff --git a/src/components/History1.vue b/src/components/History1.vue
new file mode 100644
index 0000000..37b0167
--- /dev/null
+++ b/src/components/History1.vue
@@ -0,0 +1,265 @@
+<template>
+  <div class="history-container">
+    <div class="flex top">
+      <div class="flex width200">
+        <span> 系统选择：</span>
+        <el-select v-model="value1" placeholder="请选择" size="mini">
+          <el-option
+            v-for="item in fxOptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+      </div>
+      <div class="date">
+        <Date />
+      </div>
+    </div>
+    <div v-for="(item, index) of listData" :key="index" class="middle">
+      <BarEchart :echartData="item" class="echartDiv100" />
+    </div>
+    <div class="bottom">
+      <!-- <el-table :data="tableData" style="width: 100%" border="1" height="360" class="table-left-header">
+        <el-table-column v-for="item in tableHeader" :prop="item.prop" :label="item.label" />
+      </el-table> -->
+      <table border="1">
+        <thead>
+          <tr>
+            <th>项目</th>
+            <th colspan="17">降雨量(mm/s)</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>序号</td>
+            <td v-for="(item, index) in tableHeader" :key="index">
+              {{ item.label }}
+            </td>
+          </tr>
+          <tr>
+            <td>时间</td>
+            <td v-for="(item, index) in tableHeader" :key="index">
+              {{ item.time }}
+            </td>
+          </tr>
+          <tr>
+            <td>数值</td>
+            <td v-for="(item, index) in tableHeader" :key="index">
+              {{ item.value }}
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>
+
+<script>
+import { onMounted, reactive, ref, toRefs } from "vue";
+import { ElMessage } from "element-plus";
+import myApi from "@/api/myApi.js";
+import BarEchart from "./BarEchart.vue";
+import Process from "./Process.vue";
+import Date from "@/components/Date.vue";
+export default {
+  name: "History",
+  components: {
+    BarEchart,
+    Process,
+    Date,
+  },
+  setup() {
+    const state = reactive({
+      listData: [
+        {
+          id: "echart0",
+          title: "降水量-柱状图",
+          legend: ["降水量"],
+          color: ["#6fdbce"],
+        },
+      ],
+      fxOptions: [
+        {
+          value: "0",
+          label: "降水量",
+        },
+        {
+          value: "1",
+          label: "系统A",
+        },
+        {
+          value: "2",
+          label: "系统B",
+        },
+        {
+          value: "3",
+          label: "系统C",
+        },
+        {
+          value: "4",
+          label: "系统D",
+        },
+        {
+          value: "5",
+          label: "系统E",
+        },
+      ],
+      value1: "降水量",
+      tableHeader: [
+        {
+          label: 1,
+          time: "00:00",
+          value: 78,
+        },
+        {
+          label: 2,
+          time: "01:00",
+          value: 56,
+        },
+        {
+          label: 3,
+          time: "02:00",
+          value: 45,
+        },
+        {
+          label: 4,
+          time: "03:00",
+          value: 66,
+        },
+        {
+          label: 5,
+          time: "04:00",
+          value: 86,
+        },
+        {
+          label: 6,
+          time: "05:00",
+          value: 11,
+        },
+        {
+          label: 7,
+          time: "06:00",
+          value: 13,
+        },
+        {
+          label: 8,
+          time: "07:00",
+          value: 55,
+        },
+        {
+          label: 9,
+          time: "08:00",
+          value: 76,
+        },
+        {
+          label: 10,
+          time: "09:00",
+          value: 65,
+        },
+        {
+          label: 11,
+          time: "10:00",
+          value: 80,
+        },
+        {
+          label: 12,
+          time: "11:00",
+          value: 90,
+        },
+        {
+          label: 13,
+          time: "12:00",
+          value: 34,
+        },
+        {
+          label: 14,
+          time: "13:00",
+          value: 89,
+        },
+        {
+          label: 15,
+          time: "14:00",
+          value: 34,
+        },
+        {
+          label: 16,
+          time: "15:00",
+          value: 90,
+        },
+         {
+          label: 17,
+          time: "16:00",
+          value: 45,
+        },
+      ],
+    });
+    onMounted(async () => {});
+
+    return {
+      ...toRefs(state),
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.history-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: space-between;
+  flex-direction: column;
+  padding: 10px;
+  .top {
+    width: 100%;
+    height: 50px;
+  }
+  .middle {
+    width: 100%;
+    height: 400px;
+    // border: 1px solid red;s
+    .echartDiv100 {
+      width: 100%;
+      height: 100%;
+      margin: 0 auto;
+    }
+  }
+  .bottom {
+    height: calc(100% - 520px);
+    // border: 1px solid red;
+  }
+  .date {
+    width: 100%;
+    display: flex;
+    justify-content: end;
+    height: 50%;
+  }
+  .width200 {
+    width: 200px;
+    > span {
+      display: inline-block;
+      width: 180px;
+    }
+  }
+  table {
+    border-collapse: collapse;
+    width: 100%;
+    height: 200px;
+    td {
+      text-align: center;
+    }
+    th {
+      height: 50px;
+    }
+    th:first-child {
+      background: #ddd;
+    }
+    tr {
+      td:first-child {
+        background: #ddd;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/components/History2.vue b/src/components/History2.vue
new file mode 100644
index 0000000..37b0167
--- /dev/null
+++ b/src/components/History2.vue
@@ -0,0 +1,265 @@
+<template>
+  <div class="history-container">
+    <div class="flex top">
+      <div class="flex width200">
+        <span> 系统选择：</span>
+        <el-select v-model="value1" placeholder="请选择" size="mini">
+          <el-option
+            v-for="item in fxOptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+      </div>
+      <div class="date">
+        <Date />
+      </div>
+    </div>
+    <div v-for="(item, index) of listData" :key="index" class="middle">
+      <BarEchart :echartData="item" class="echartDiv100" />
+    </div>
+    <div class="bottom">
+      <!-- <el-table :data="tableData" style="width: 100%" border="1" height="360" class="table-left-header">
+        <el-table-column v-for="item in tableHeader" :prop="item.prop" :label="item.label" />
+      </el-table> -->
+      <table border="1">
+        <thead>
+          <tr>
+            <th>项目</th>
+            <th colspan="17">降雨量(mm/s)</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>序号</td>
+            <td v-for="(item, index) in tableHeader" :key="index">
+              {{ item.label }}
+            </td>
+          </tr>
+          <tr>
+            <td>时间</td>
+            <td v-for="(item, index) in tableHeader" :key="index">
+              {{ item.time }}
+            </td>
+          </tr>
+          <tr>
+            <td>数值</td>
+            <td v-for="(item, index) in tableHeader" :key="index">
+              {{ item.value }}
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>
+
+<script>
+import { onMounted, reactive, ref, toRefs } from "vue";
+import { ElMessage } from "element-plus";
+import myApi from "@/api/myApi.js";
+import BarEchart from "./BarEchart.vue";
+import Process from "./Process.vue";
+import Date from "@/components/Date.vue";
+export default {
+  name: "History",
+  components: {
+    BarEchart,
+    Process,
+    Date,
+  },
+  setup() {
+    const state = reactive({
+      listData: [
+        {
+          id: "echart0",
+          title: "降水量-柱状图",
+          legend: ["降水量"],
+          color: ["#6fdbce"],
+        },
+      ],
+      fxOptions: [
+        {
+          value: "0",
+          label: "降水量",
+        },
+        {
+          value: "1",
+          label: "系统A",
+        },
+        {
+          value: "2",
+          label: "系统B",
+        },
+        {
+          value: "3",
+          label: "系统C",
+        },
+        {
+          value: "4",
+          label: "系统D",
+        },
+        {
+          value: "5",
+          label: "系统E",
+        },
+      ],
+      value1: "降水量",
+      tableHeader: [
+        {
+          label: 1,
+          time: "00:00",
+          value: 78,
+        },
+        {
+          label: 2,
+          time: "01:00",
+          value: 56,
+        },
+        {
+          label: 3,
+          time: "02:00",
+          value: 45,
+        },
+        {
+          label: 4,
+          time: "03:00",
+          value: 66,
+        },
+        {
+          label: 5,
+          time: "04:00",
+          value: 86,
+        },
+        {
+          label: 6,
+          time: "05:00",
+          value: 11,
+        },
+        {
+          label: 7,
+          time: "06:00",
+          value: 13,
+        },
+        {
+          label: 8,
+          time: "07:00",
+          value: 55,
+        },
+        {
+          label: 9,
+          time: "08:00",
+          value: 76,
+        },
+        {
+          label: 10,
+          time: "09:00",
+          value: 65,
+        },
+        {
+          label: 11,
+          time: "10:00",
+          value: 80,
+        },
+        {
+          label: 12,
+          time: "11:00",
+          value: 90,
+        },
+        {
+          label: 13,
+          time: "12:00",
+          value: 34,
+        },
+        {
+          label: 14,
+          time: "13:00",
+          value: 89,
+        },
+        {
+          label: 15,
+          time: "14:00",
+          value: 34,
+        },
+        {
+          label: 16,
+          time: "15:00",
+          value: 90,
+        },
+         {
+          label: 17,
+          time: "16:00",
+          value: 45,
+        },
+      ],
+    });
+    onMounted(async () => {});
+
+    return {
+      ...toRefs(state),
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.history-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: space-between;
+  flex-direction: column;
+  padding: 10px;
+  .top {
+    width: 100%;
+    height: 50px;
+  }
+  .middle {
+    width: 100%;
+    height: 400px;
+    // border: 1px solid red;s
+    .echartDiv100 {
+      width: 100%;
+      height: 100%;
+      margin: 0 auto;
+    }
+  }
+  .bottom {
+    height: calc(100% - 520px);
+    // border: 1px solid red;
+  }
+  .date {
+    width: 100%;
+    display: flex;
+    justify-content: end;
+    height: 50%;
+  }
+  .width200 {
+    width: 200px;
+    > span {
+      display: inline-block;
+      width: 180px;
+    }
+  }
+  table {
+    border-collapse: collapse;
+    width: 100%;
+    height: 200px;
+    td {
+      text-align: center;
+    }
+    th {
+      height: 50px;
+    }
+    th:first-child {
+      background: #ddd;
+    }
+    tr {
+      td:first-child {
+        background: #ddd;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/components/History3.vue b/src/components/History3.vue
new file mode 100644
index 0000000..37b0167
--- /dev/null
+++ b/src/components/History3.vue
@@ -0,0 +1,265 @@
+<template>
+  <div class="history-container">
+    <div class="flex top">
+      <div class="flex width200">
+        <span> 系统选择：</span>
+        <el-select v-model="value1" placeholder="请选择" size="mini">
+          <el-option
+            v-for="item in fxOptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+      </div>
+      <div class="date">
+        <Date />
+      </div>
+    </div>
+    <div v-for="(item, index) of listData" :key="index" class="middle">
+      <BarEchart :echartData="item" class="echartDiv100" />
+    </div>
+    <div class="bottom">
+      <!-- <el-table :data="tableData" style="width: 100%" border="1" height="360" class="table-left-header">
+        <el-table-column v-for="item in tableHeader" :prop="item.prop" :label="item.label" />
+      </el-table> -->
+      <table border="1">
+        <thead>
+          <tr>
+            <th>项目</th>
+            <th colspan="17">降雨量(mm/s)</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>序号</td>
+            <td v-for="(item, index) in tableHeader" :key="index">
+              {{ item.label }}
+            </td>
+          </tr>
+          <tr>
+            <td>时间</td>
+            <td v-for="(item, index) in tableHeader" :key="index">
+              {{ item.time }}
+            </td>
+          </tr>
+          <tr>
+            <td>数值</td>
+            <td v-for="(item, index) in tableHeader" :key="index">
+              {{ item.value }}
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>
+
+<script>
+import { onMounted, reactive, ref, toRefs } from "vue";
+import { ElMessage } from "element-plus";
+import myApi from "@/api/myApi.js";
+import BarEchart from "./BarEchart.vue";
+import Process from "./Process.vue";
+import Date from "@/components/Date.vue";
+export default {
+  name: "History",
+  components: {
+    BarEchart,
+    Process,
+    Date,
+  },
+  setup() {
+    const state = reactive({
+      listData: [
+        {
+          id: "echart0",
+          title: "降水量-柱状图",
+          legend: ["降水量"],
+          color: ["#6fdbce"],
+        },
+      ],
+      fxOptions: [
+        {
+          value: "0",
+          label: "降水量",
+        },
+        {
+          value: "1",
+          label: "系统A",
+        },
+        {
+          value: "2",
+          label: "系统B",
+        },
+        {
+          value: "3",
+          label: "系统C",
+        },
+        {
+          value: "4",
+          label: "系统D",
+        },
+        {
+          value: "5",
+          label: "系统E",
+        },
+      ],
+      value1: "降水量",
+      tableHeader: [
+        {
+          label: 1,
+          time: "00:00",
+          value: 78,
+        },
+        {
+          label: 2,
+          time: "01:00",
+          value: 56,
+        },
+        {
+          label: 3,
+          time: "02:00",
+          value: 45,
+        },
+        {
+          label: 4,
+          time: "03:00",
+          value: 66,
+        },
+        {
+          label: 5,
+          time: "04:00",
+          value: 86,
+        },
+        {
+          label: 6,
+          time: "05:00",
+          value: 11,
+        },
+        {
+          label: 7,
+          time: "06:00",
+          value: 13,
+        },
+        {
+          label: 8,
+          time: "07:00",
+          value: 55,
+        },
+        {
+          label: 9,
+          time: "08:00",
+          value: 76,
+        },
+        {
+          label: 10,
+          time: "09:00",
+          value: 65,
+        },
+        {
+          label: 11,
+          time: "10:00",
+          value: 80,
+        },
+        {
+          label: 12,
+          time: "11:00",
+          value: 90,
+        },
+        {
+          label: 13,
+          time: "12:00",
+          value: 34,
+        },
+        {
+          label: 14,
+          time: "13:00",
+          value: 89,
+        },
+        {
+          label: 15,
+          time: "14:00",
+          value: 34,
+        },
+        {
+          label: 16,
+          time: "15:00",
+          value: 90,
+        },
+         {
+          label: 17,
+          time: "16:00",
+          value: 45,
+        },
+      ],
+    });
+    onMounted(async () => {});
+
+    return {
+      ...toRefs(state),
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.history-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: space-between;
+  flex-direction: column;
+  padding: 10px;
+  .top {
+    width: 100%;
+    height: 50px;
+  }
+  .middle {
+    width: 100%;
+    height: 400px;
+    // border: 1px solid red;s
+    .echartDiv100 {
+      width: 100%;
+      height: 100%;
+      margin: 0 auto;
+    }
+  }
+  .bottom {
+    height: calc(100% - 520px);
+    // border: 1px solid red;
+  }
+  .date {
+    width: 100%;
+    display: flex;
+    justify-content: end;
+    height: 50%;
+  }
+  .width200 {
+    width: 200px;
+    > span {
+      display: inline-block;
+      width: 180px;
+    }
+  }
+  table {
+    border-collapse: collapse;
+    width: 100%;
+    height: 200px;
+    td {
+      text-align: center;
+    }
+    th {
+      height: 50px;
+    }
+    th:first-child {
+      background: #ddd;
+    }
+    tr {
+      td:first-child {
+        background: #ddd;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/components/History4.vue b/src/components/History4.vue
new file mode 100644
index 0000000..37b0167
--- /dev/null
+++ b/src/components/History4.vue
@@ -0,0 +1,265 @@
+<template>
+  <div class="history-container">
+    <div class="flex top">
+      <div class="flex width200">
+        <span> 系统选择：</span>
+        <el-select v-model="value1" placeholder="请选择" size="mini">
+          <el-option
+            v-for="item in fxOptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+      </div>
+      <div class="date">
+        <Date />
+      </div>
+    </div>
+    <div v-for="(item, index) of listData" :key="index" class="middle">
+      <BarEchart :echartData="item" class="echartDiv100" />
+    </div>
+    <div class="bottom">
+      <!-- <el-table :data="tableData" style="width: 100%" border="1" height="360" class="table-left-header">
+        <el-table-column v-for="item in tableHeader" :prop="item.prop" :label="item.label" />
+      </el-table> -->
+      <table border="1">
+        <thead>
+          <tr>
+            <th>项目</th>
+            <th colspan="17">降雨量(mm/s)</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>序号</td>
+            <td v-for="(item, index) in tableHeader" :key="index">
+              {{ item.label }}
+            </td>
+          </tr>
+          <tr>
+            <td>时间</td>
+            <td v-for="(item, index) in tableHeader" :key="index">
+              {{ item.time }}
+            </td>
+          </tr>
+          <tr>
+            <td>数值</td>
+            <td v-for="(item, index) in tableHeader" :key="index">
+              {{ item.value }}
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>
+
+<script>
+import { onMounted, reactive, ref, toRefs } from "vue";
+import { ElMessage } from "element-plus";
+import myApi from "@/api/myApi.js";
+import BarEchart from "./BarEchart.vue";
+import Process from "./Process.vue";
+import Date from "@/components/Date.vue";
+export default {
+  name: "History",
+  components: {
+    BarEchart,
+    Process,
+    Date,
+  },
+  setup() {
+    const state = reactive({
+      listData: [
+        {
+          id: "echart0",
+          title: "降水量-柱状图",
+          legend: ["降水量"],
+          color: ["#6fdbce"],
+        },
+      ],
+      fxOptions: [
+        {
+          value: "0",
+          label: "降水量",
+        },
+        {
+          value: "1",
+          label: "系统A",
+        },
+        {
+          value: "2",
+          label: "系统B",
+        },
+        {
+          value: "3",
+          label: "系统C",
+        },
+        {
+          value: "4",
+          label: "系统D",
+        },
+        {
+          value: "5",
+          label: "系统E",
+        },
+      ],
+      value1: "降水量",
+      tableHeader: [
+        {
+          label: 1,
+          time: "00:00",
+          value: 78,
+        },
+        {
+          label: 2,
+          time: "01:00",
+          value: 56,
+        },
+        {
+          label: 3,
+          time: "02:00",
+          value: 45,
+        },
+        {
+          label: 4,
+          time: "03:00",
+          value: 66,
+        },
+        {
+          label: 5,
+          time: "04:00",
+          value: 86,
+        },
+        {
+          label: 6,
+          time: "05:00",
+          value: 11,
+        },
+        {
+          label: 7,
+          time: "06:00",
+          value: 13,
+        },
+        {
+          label: 8,
+          time: "07:00",
+          value: 55,
+        },
+        {
+          label: 9,
+          time: "08:00",
+          value: 76,
+        },
+        {
+          label: 10,
+          time: "09:00",
+          value: 65,
+        },
+        {
+          label: 11,
+          time: "10:00",
+          value: 80,
+        },
+        {
+          label: 12,
+          time: "11:00",
+          value: 90,
+        },
+        {
+          label: 13,
+          time: "12:00",
+          value: 34,
+        },
+        {
+          label: 14,
+          time: "13:00",
+          value: 89,
+        },
+        {
+          label: 15,
+          time: "14:00",
+          value: 34,
+        },
+        {
+          label: 16,
+          time: "15:00",
+          value: 90,
+        },
+         {
+          label: 17,
+          time: "16:00",
+          value: 45,
+        },
+      ],
+    });
+    onMounted(async () => {});
+
+    return {
+      ...toRefs(state),
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.history-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: space-between;
+  flex-direction: column;
+  padding: 10px;
+  .top {
+    width: 100%;
+    height: 50px;
+  }
+  .middle {
+    width: 100%;
+    height: 400px;
+    // border: 1px solid red;s
+    .echartDiv100 {
+      width: 100%;
+      height: 100%;
+      margin: 0 auto;
+    }
+  }
+  .bottom {
+    height: calc(100% - 520px);
+    // border: 1px solid red;
+  }
+  .date {
+    width: 100%;
+    display: flex;
+    justify-content: end;
+    height: 50%;
+  }
+  .width200 {
+    width: 200px;
+    > span {
+      display: inline-block;
+      width: 180px;
+    }
+  }
+  table {
+    border-collapse: collapse;
+    width: 100%;
+    height: 200px;
+    td {
+      text-align: center;
+    }
+    th {
+      height: 50px;
+    }
+    th:first-child {
+      background: #ddd;
+    }
+    tr {
+      td:first-child {
+        background: #ddd;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/components/History5.vue b/src/components/History5.vue
new file mode 100644
index 0000000..37b0167
--- /dev/null
+++ b/src/components/History5.vue
@@ -0,0 +1,265 @@
+<template>
+  <div class="history-container">
+    <div class="flex top">
+      <div class="flex width200">
+        <span> 系统选择：</span>
+        <el-select v-model="value1" placeholder="请选择" size="mini">
+          <el-option
+            v-for="item in fxOptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+      </div>
+      <div class="date">
+        <Date />
+      </div>
+    </div>
+    <div v-for="(item, index) of listData" :key="index" class="middle">
+      <BarEchart :echartData="item" class="echartDiv100" />
+    </div>
+    <div class="bottom">
+      <!-- <el-table :data="tableData" style="width: 100%" border="1" height="360" class="table-left-header">
+        <el-table-column v-for="item in tableHeader" :prop="item.prop" :label="item.label" />
+      </el-table> -->
+      <table border="1">
+        <thead>
+          <tr>
+            <th>项目</th>
+            <th colspan="17">降雨量(mm/s)</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>序号</td>
+            <td v-for="(item, index) in tableHeader" :key="index">
+              {{ item.label }}
+            </td>
+          </tr>
+          <tr>
+            <td>时间</td>
+            <td v-for="(item, index) in tableHeader" :key="index">
+              {{ item.time }}
+            </td>
+          </tr>
+          <tr>
+            <td>数值</td>
+            <td v-for="(item, index) in tableHeader" :key="index">
+              {{ item.value }}
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>
+
+<script>
+import { onMounted, reactive, ref, toRefs } from "vue";
+import { ElMessage } from "element-plus";
+import myApi from "@/api/myApi.js";
+import BarEchart from "./BarEchart.vue";
+import Process from "./Process.vue";
+import Date from "@/components/Date.vue";
+export default {
+  name: "History",
+  components: {
+    BarEchart,
+    Process,
+    Date,
+  },
+  setup() {
+    const state = reactive({
+      listData: [
+        {
+          id: "echart0",
+          title: "降水量-柱状图",
+          legend: ["降水量"],
+          color: ["#6fdbce"],
+        },
+      ],
+      fxOptions: [
+        {
+          value: "0",
+          label: "降水量",
+        },
+        {
+          value: "1",
+          label: "系统A",
+        },
+        {
+          value: "2",
+          label: "系统B",
+        },
+        {
+          value: "3",
+          label: "系统C",
+        },
+        {
+          value: "4",
+          label: "系统D",
+        },
+        {
+          value: "5",
+          label: "系统E",
+        },
+      ],
+      value1: "降水量",
+      tableHeader: [
+        {
+          label: 1,
+          time: "00:00",
+          value: 78,
+        },
+        {
+          label: 2,
+          time: "01:00",
+          value: 56,
+        },
+        {
+          label: 3,
+          time: "02:00",
+          value: 45,
+        },
+        {
+          label: 4,
+          time: "03:00",
+          value: 66,
+        },
+        {
+          label: 5,
+          time: "04:00",
+          value: 86,
+        },
+        {
+          label: 6,
+          time: "05:00",
+          value: 11,
+        },
+        {
+          label: 7,
+          time: "06:00",
+          value: 13,
+        },
+        {
+          label: 8,
+          time: "07:00",
+          value: 55,
+        },
+        {
+          label: 9,
+          time: "08:00",
+          value: 76,
+        },
+        {
+          label: 10,
+          time: "09:00",
+          value: 65,
+        },
+        {
+          label: 11,
+          time: "10:00",
+          value: 80,
+        },
+        {
+          label: 12,
+          time: "11:00",
+          value: 90,
+        },
+        {
+          label: 13,
+          time: "12:00",
+          value: 34,
+        },
+        {
+          label: 14,
+          time: "13:00",
+          value: 89,
+        },
+        {
+          label: 15,
+          time: "14:00",
+          value: 34,
+        },
+        {
+          label: 16,
+          time: "15:00",
+          value: 90,
+        },
+         {
+          label: 17,
+          time: "16:00",
+          value: 45,
+        },
+      ],
+    });
+    onMounted(async () => {});
+
+    return {
+      ...toRefs(state),
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.history-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: space-between;
+  flex-direction: column;
+  padding: 10px;
+  .top {
+    width: 100%;
+    height: 50px;
+  }
+  .middle {
+    width: 100%;
+    height: 400px;
+    // border: 1px solid red;s
+    .echartDiv100 {
+      width: 100%;
+      height: 100%;
+      margin: 0 auto;
+    }
+  }
+  .bottom {
+    height: calc(100% - 520px);
+    // border: 1px solid red;
+  }
+  .date {
+    width: 100%;
+    display: flex;
+    justify-content: end;
+    height: 50%;
+  }
+  .width200 {
+    width: 200px;
+    > span {
+      display: inline-block;
+      width: 180px;
+    }
+  }
+  table {
+    border-collapse: collapse;
+    width: 100%;
+    height: 200px;
+    td {
+      text-align: center;
+    }
+    th {
+      height: 50px;
+    }
+    th:first-child {
+      background: #ddd;
+    }
+    tr {
+      td:first-child {
+        background: #ddd;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/components/Zhibiao1.vue b/src/components/Zhibiao1.vue
new file mode 100644
index 0000000..06881a8
--- /dev/null
+++ b/src/components/Zhibiao1.vue
@@ -0,0 +1,606 @@
+<template>
+  <div class="analyse-container">
+    <div id="echartDiv1" class="echartDiv100"></div>
+    <div id="echartDiv2" class="echartDiv100"></div>
+    <div id="echartDiv3" class="echartDiv100"></div>
+    <div id="echartDiv4" class="echartDiv100"></div>
+    <div id="echartDiv5" class="echartDiv100"></div>
+  </div>
+</template>
+
+<script>
+import { onMounted, reactive, ref, toRefs } from "vue";
+import { ElMessage } from "element-plus";
+import myApi from "@/api/myApi.js";
+import BarEchart from "./BarEchart.vue";
+import Process from "./Process.vue";
+import Date from "@/components/Date.vue";
+export default {
+  name: "Analyse",
+  components: {
+
+  },
+  setup() {
+    const state = reactive({
+
+    });
+    onMounted(async () => {
+      getChartsZfl("echartDiv1", '蒸腾量');
+      getChartsZf2("echartDiv2", 'COD');
+      getChartsZf3("echartDiv3", '氨氮');
+      getChartsZf4("echartDiv4", 'SS');
+      getChartsZf5("echartDiv5", '屋面温度');
+    });
+    const getChartsZfl = (id, text) => {
+      var dom = document.getElementById(id);
+      console.log(dom);
+      var op = {
+        title: {
+          text: text,
+        },
+        tooltip: {
+          trigger: 'axis'
+        },
+        legend: {
+          data: ['Rainfall', 'Evaporation']
+        },
+        toolbox: {
+          show: true,
+          feature: {
+            dataView: { show: true, readOnly: false },
+            magicType: { show: true, type: ['line', 'bar'] },
+            restore: { show: true },
+            saveAsImage: { show: true }
+          }
+        },
+        calculable: true,
+        xAxis: [
+          {
+            type: 'category',
+            // prettier-ignore
+            data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
+          }
+        ],
+        yAxis: [
+          {
+            type: 'value'
+          }
+        ],
+        series: [
+          {
+            name: 'Rainfall',
+            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
+            ],
+            markPoint: {
+              data: [
+                { type: 'max', name: 'Max' },
+                { type: 'min', name: 'Min' }
+              ]
+            },
+            markLine: {
+              data: [{ type: 'average', name: 'Avg' }]
+            }
+          },
+          {
+            name: 'Evaporation',
+            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
+            ],
+            markPoint: {
+              data: [
+                { name: 'Max', value: 182.2, xAxis: 7, yAxis: 183 },
+                { name: 'Min', value: 2.3, xAxis: 11, yAxis: 3 }
+              ]
+            },
+            markLine: {
+              data: [{ type: 'average', name: 'Avg' }]
+            }
+          }
+        ]
+      };
+      getEchart(dom, op)
+    }
+    const getChartsZf2 = (id, text) => {
+      var dom = document.getElementById(id);
+      console.log(dom);
+      var op = {
+        title: {
+          text: text,
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false
+        },
+        yAxis: {
+          type: 'value',
+          boundaryGap: [0, '30%']
+        },
+        visualMap: {
+          type: 'piecewise',
+          show: false,
+          dimension: 0,
+          seriesIndex: 0,
+          pieces: [
+            {
+              gt: 1,
+              lt: 3,
+              color: 'rgba(0, 0, 180, 0.4)'
+            },
+            {
+              gt: 5,
+              lt: 7,
+              color: 'rgba(0, 0, 180, 0.4)'
+            }
+          ]
+        },
+        series: [
+          {
+            type: 'line',
+            smooth: 0.6,
+            symbol: 'none',
+            lineStyle: {
+              color: '#5470C6',
+              width: 5
+            },
+            markLine: {
+              symbol: ['none', 'none'],
+              label: { show: false },
+              data: [{ xAxis: 1 }, { xAxis: 3 }, { xAxis: 5 }, { xAxis: 7 }]
+            },
+            areaStyle: {},
+            data: [
+              ['2019-10-10', 200],
+              ['2019-10-11', 560],
+              ['2019-10-12', 750],
+              ['2019-10-13', 580],
+              ['2019-10-14', 250],
+              ['2019-10-15', 300],
+              ['2019-10-16', 450],
+              ['2019-10-17', 300],
+              ['2019-10-18', 100]
+            ]
+          }
+        ]
+      };
+      getEchart(dom, op)
+    }
+    const getChartsZf3 = (id, text) => {
+      var dom = document.getElementById(id);
+      console.log(dom);
+      var op = {
+        title: {
+          text: text,
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        legend: {},
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: [
+          {
+            type: 'category',
+            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+          }
+        ],
+        yAxis: [
+          {
+            type: 'value'
+          }
+        ],
+        series: [
+          {
+            name: 'Direct',
+            type: 'bar',
+            emphasis: {
+              focus: 'series'
+            },
+            data: [320, 332, 301, 334, 390, 330, 320]
+          },
+          {
+            name: 'Email',
+            type: 'bar',
+            stack: 'Ad',
+            emphasis: {
+              focus: 'series'
+            },
+            data: [120, 132, 101, 134, 90, 230, 210]
+          },
+          {
+            name: 'Union Ads',
+            type: 'bar',
+            stack: 'Ad',
+            emphasis: {
+              focus: 'series'
+            },
+            data: [220, 182, 191, 234, 290, 330, 310]
+          },
+          {
+            name: 'Video Ads',
+            type: 'bar',
+            stack: 'Ad',
+            emphasis: {
+              focus: 'series'
+            },
+            data: [150, 232, 201, 154, 190, 330, 410]
+          },
+          {
+            name: 'Search Engine',
+            type: 'bar',
+            data: [862, 1018, 964, 1026, 1679, 1600, 1570],
+            emphasis: {
+              focus: 'series'
+            },
+            markLine: {
+              lineStyle: {
+                type: 'dashed'
+              },
+              data: [[{ type: 'min' }, { type: 'max' }]]
+            }
+          },
+          {
+            name: 'Baidu',
+            type: 'bar',
+            barWidth: 5,
+            stack: 'Search Engine',
+            emphasis: {
+              focus: 'series'
+            },
+            data: [620, 732, 701, 734, 1090, 1130, 1120]
+          },
+          {
+            name: 'Google',
+            type: 'bar',
+            stack: 'Search Engine',
+            emphasis: {
+              focus: 'series'
+            },
+            data: [120, 132, 101, 134, 290, 230, 220]
+          },
+          {
+            name: 'Bing',
+            type: 'bar',
+            stack: 'Search Engine',
+            emphasis: {
+              focus: 'series'
+            },
+            data: [60, 72, 71, 74, 190, 130, 110]
+          },
+          {
+            name: 'Others',
+            type: 'bar',
+            stack: 'Search Engine',
+            emphasis: {
+              focus: 'series'
+            },
+            data: [62, 82, 91, 84, 109, 110, 120]
+          }
+        ]
+      };
+      getEchart(dom, op)
+    }
+    const getChartsZf4 = (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
+            },
+            showSymbol: false,
+            areaStyle: {
+              opacity: 0.8,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: 'rgb(128, 255, 165)'
+                },
+                {
+                  offset: 1,
+                  color: 'rgb(1, 191, 236)'
+                }
+              ])
+            },
+            emphasis: {
+              focus: 'series'
+            },
+            data: [140, 232, 101, 264, 90, 340, 250, 140, 232, 101, 264, 90, 340, 250, 140, 232, 101, 264, 90, 340, 250, 140, 232, 101]
+          },
+          {
+            name: '系统B',
+            type: 'line',
+            stack: 'Total',
+            smooth: true,
+            lineStyle: {
+              width: 0
+            },
+            showSymbol: false,
+            areaStyle: {
+              opacity: 0.8,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: 'rgb(0, 221, 255)'
+                },
+                {
+                  offset: 1,
+                  color: 'rgb(77, 119, 255)'
+                }
+              ])
+            },
+            emphasis: {
+              focus: 'series'
+            },
+            data: [120, 700, 600, 500, 900, 282, 111, 120, 700, 600, 500, 900, 282, 111, 234, 220, 340, 310, 234, 220, 340, 310, 220, 340]
+          },
+          {
+            name: '系统C',
+            type: 'line',
+            stack: 'Total',
+            smooth: true,
+            lineStyle: {
+              width: 0
+            },
+            showSymbol: false,
+            areaStyle: {
+              opacity: 0.8,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: 'rgb(55, 162, 255)'
+                },
+                {
+                  offset: 1,
+                  color: 'rgb(116, 21, 219)'
+                }
+              ])
+            },
+            emphasis: {
+              focus: 'series'
+            },
+            data: [320, 132, 201, 334, 190, 130, 320, 132, 201, 334, 190, 130, 220, 220, 320, 132, 201, 334, 190, 130, 220, 190, 130, 220]
+          },
+          {
+            name: '系统D',
+            type: 'line',
+            stack: 'Total',
+            smooth: true,
+            lineStyle: {
+              width: 0
+            },
+            showSymbol: false,
+            areaStyle: {
+              opacity: 0.8,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: 'rgb(255, 0, 135)'
+                },
+                {
+                  offset: 1,
+                  color: 'rgb(135, 0, 157)'
+                }
+              ])
+            },
+            emphasis: {
+              focus: 'series'
+            },
+            data: [220, 402, 231, 134, 190, 230, 120, 200, 500, 800, 600, 700, 220, 402, 231, 134, 190, 230, 120, 200, 500, 800, 600, 700]
+          },
+          {
+            name: '系统E',
+            type: 'line',
+            stack: 'Total',
+            smooth: true,
+            lineStyle: {
+              width: 0
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: 'top'
+            },
+            areaStyle: {
+              opacity: 0.8,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: 'rgb(255, 191, 0)'
+                },
+                {
+                  offset: 1,
+                  color: 'rgb(224, 62, 76)'
+                }
+              ])
+            },
+            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)
+    }
+    const getChartsZf5 = (id, text) => {
+      var dom = document.getElementById(id);
+      console.log(dom);
+      // prettier-ignore
+      let dataAxis = ['点', '击', '柱', '子', '或', '者', '两', '指', '在', '触', '屏', '上', '滑', '动', '能', '够', '自', '动', '缩', '放'];
+      // prettier-ignore
+      let data = [220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 90, 149, 210, 122, 133, 334, 198, 123, 125, 220];
+      let yMax = 500;
+      let dataShadow = [];
+      for (let i = 0; i < data.length; i++) {
+        dataShadow.push(yMax);
+      }
+      var op = {
+        title: {
+          text
+        },
+        xAxis: {
+          data: dataAxis,
+          axisLabel: {
+            inside: true,
+            color: '#fff'
+          },
+          axisTick: {
+            show: false
+          },
+          axisLine: {
+            show: false
+          },
+          z: 10
+        },
+        yAxis: {
+          axisLine: {
+            show: false
+          },
+          axisTick: {
+            show: false
+          },
+          axisLabel: {
+            color: '#999'
+          }
+        },
+        dataZoom: [
+          {
+            type: 'inside'
+          }
+        ],
+        series: [
+          {
+            type: 'bar',
+            showBackground: true,
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: '#83bff6' },
+                { offset: 0.5, color: '#188df0' },
+                { offset: 1, color: '#188df0' }
+              ])
+            },
+            emphasis: {
+              itemStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: '#2378f7' },
+                  { offset: 0.7, color: '#2378f7' },
+                  { offset: 1, color: '#83bff6' }
+                ])
+              }
+            },
+            data: data
+          }
+        ]
+      };
+      getEchart(dom, op)
+    }
+    const getEchart = (dom, op) => {
+      if (dom) {
+        // 图表的dom属性中发现了一个特殊的属性：_echarts_instance_，对应的值是一个id，可能是由于再次渲染时这个id未发生改变导致ehcarts认为不需要重新渲染
+        // 手动移除该属性
+        dom.removeAttribute('_echarts_instance_')
+        var myChart = echarts.init(dom);
+        var option = op;
+
+        option && myChart.setOption(option);
+      }
+    };
+    return {
+      ...toRefs(state),
+      getChartsZfl,
+      getEchart
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.analyse-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding: 10px;
+
+  .echartDiv100 {
+    width: 100%;
+    height: 20%;
+    margin: 0 auto;
+  }
+}
+</style>
diff --git a/src/components/Zhibiao2.vue b/src/components/Zhibiao2.vue
new file mode 100644
index 0000000..4228d7c
--- /dev/null
+++ b/src/components/Zhibiao2.vue
@@ -0,0 +1,276 @@
+<template>
+  <div class="analyse-container">
+    <div id="echartDiv1" class="echartDiv100"></div>
+    <div id="echartDiv2" class="echartDiv100"></div>
+    <div id="echartDiv3" class="echartDiv100"></div>
+    <div id="echartDiv4" class="echartDiv100"></div>
+    <div id="echartDiv5" class="echartDiv100"></div>
+  </div>
+</template>
+
+<script>
+import { onMounted, reactive, ref, toRefs } from "vue";
+import { ElMessage } from "element-plus";
+import myApi from "@/api/myApi.js";
+import BarEchart from "./BarEchart.vue";
+import Process from "./Process.vue";
+import Date from "@/components/Date.vue";
+export default {
+  name: "Analyse",
+  components: {
+
+  },
+  setup() {
+    const state = reactive({
+      
+    });
+    onMounted(async () => { 
+      getChartsZfl("echartDiv1", '蒸腾量');
+      getChartsZfl("echartDiv2", 'COD');
+      getChartsZfl("echartDiv3", '氨氮');
+      getChartsZfl("echartDiv4", 'SS');
+      getChartsZfl("echartDiv5", '屋面温度');
+     });
+    const getChartsZfl = (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
+            },
+            showSymbol: false,
+            areaStyle: {
+              opacity: 0.8,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: 'rgb(128, 255, 165)'
+                },
+                {
+                  offset: 1,
+                  color: 'rgb(1, 191, 236)'
+                }
+              ])
+            },
+            emphasis: {
+              focus: 'series'
+            },
+            data: [140, 232, 101, 264, 90, 340, 250, 140, 232, 101, 264, 90, 340, 250, 140, 232, 101, 264, 90, 340, 250, 140, 232, 101]
+          },
+          {
+            name: '系统B',
+            type: 'line',
+            stack: 'Total',
+            smooth: true,
+            lineStyle: {
+              width: 0
+            },
+            showSymbol: false,
+            areaStyle: {
+              opacity: 0.8,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: 'rgb(0, 221, 255)'
+                },
+                {
+                  offset: 1,
+                  color: 'rgb(77, 119, 255)'
+                }
+              ])
+            },
+            emphasis: {
+              focus: 'series'
+            },
+            data: [120, 700, 600, 500, 900, 282, 111, 120, 700, 600, 500, 900, 282, 111, 234, 220, 340, 310, 234, 220, 340, 310, 220, 340]
+          },
+          {
+            name: '系统C',
+            type: 'line',
+            stack: 'Total',
+            smooth: true,
+            lineStyle: {
+              width: 0
+            },
+            showSymbol: false,
+            areaStyle: {
+              opacity: 0.8,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: 'rgb(55, 162, 255)'
+                },
+                {
+                  offset: 1,
+                  color: 'rgb(116, 21, 219)'
+                }
+              ])
+            },
+            emphasis: {
+              focus: 'series'
+            },
+            data: [320, 132, 201, 334, 190, 130, 320, 132, 201, 334, 190, 130, 220, 220, 320, 132, 201, 334, 190, 130, 220, 190, 130, 220]
+          },
+          {
+            name: '系统D',
+            type: 'line',
+            stack: 'Total',
+            smooth: true,
+            lineStyle: {
+              width: 0
+            },
+            showSymbol: false,
+            areaStyle: {
+              opacity: 0.8,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: 'rgb(255, 0, 135)'
+                },
+                {
+                  offset: 1,
+                  color: 'rgb(135, 0, 157)'
+                }
+              ])
+            },
+            emphasis: {
+              focus: 'series'
+            },
+            data: [220, 402, 231, 134, 190, 230, 120, 200, 500, 800, 600, 700, 220, 402, 231, 134, 190, 230, 120, 200, 500, 800, 600, 700]
+          },
+          {
+            name: '系统E',
+            type: 'line',
+            stack: 'Total',
+            smooth: true,
+            lineStyle: {
+              width: 0
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: 'top'
+            },
+            areaStyle: {
+              opacity: 0.8,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: 'rgb(255, 191, 0)'
+                },
+                {
+                  offset: 1,
+                  color: 'rgb(224, 62, 76)'
+                }
+              ])
+            },
+            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)
+    }
+    const getEchart = (dom, op) => {
+      if (dom) {
+        // 图表的dom属性中发现了一个特殊的属性：_echarts_instance_，对应的值是一个id，可能是由于再次渲染时这个id未发生改变导致ehcarts认为不需要重新渲染
+        // 手动移除该属性
+        dom.removeAttribute('_echarts_instance_')
+        var myChart = echarts.init(dom);
+        var option = op;
+
+        option && myChart.setOption(option);
+      }
+    };
+    return {
+      ...toRefs(state),
+      getChartsZfl,
+      getEchart
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.analyse-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding: 10px;
+
+  .echartDiv100 {
+    width: 100%;
+    height: 20%;
+    margin: 0 auto;
+  }
+}
+</style>
diff --git a/src/components/Zhibiao3.vue b/src/components/Zhibiao3.vue
new file mode 100644
index 0000000..4228d7c
--- /dev/null
+++ b/src/components/Zhibiao3.vue
@@ -0,0 +1,276 @@
+<template>
+  <div class="analyse-container">
+    <div id="echartDiv1" class="echartDiv100"></div>
+    <div id="echartDiv2" class="echartDiv100"></div>
+    <div id="echartDiv3" class="echartDiv100"></div>
+    <div id="echartDiv4" class="echartDiv100"></div>
+    <div id="echartDiv5" class="echartDiv100"></div>
+  </div>
+</template>
+
+<script>
+import { onMounted, reactive, ref, toRefs } from "vue";
+import { ElMessage } from "element-plus";
+import myApi from "@/api/myApi.js";
+import BarEchart from "./BarEchart.vue";
+import Process from "./Process.vue";
+import Date from "@/components/Date.vue";
+export default {
+  name: "Analyse",
+  components: {
+
+  },
+  setup() {
+    const state = reactive({
+      
+    });
+    onMounted(async () => { 
+      getChartsZfl("echartDiv1", '蒸腾量');
+      getChartsZfl("echartDiv2", 'COD');
+      getChartsZfl("echartDiv3", '氨氮');
+      getChartsZfl("echartDiv4", 'SS');
+      getChartsZfl("echartDiv5", '屋面温度');
+     });
+    const getChartsZfl = (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
+            },
+            showSymbol: false,
+            areaStyle: {
+              opacity: 0.8,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: 'rgb(128, 255, 165)'
+                },
+                {
+                  offset: 1,
+                  color: 'rgb(1, 191, 236)'
+                }
+              ])
+            },
+            emphasis: {
+              focus: 'series'
+            },
+            data: [140, 232, 101, 264, 90, 340, 250, 140, 232, 101, 264, 90, 340, 250, 140, 232, 101, 264, 90, 340, 250, 140, 232, 101]
+          },
+          {
+            name: '系统B',
+            type: 'line',
+            stack: 'Total',
+            smooth: true,
+            lineStyle: {
+              width: 0
+            },
+            showSymbol: false,
+            areaStyle: {
+              opacity: 0.8,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: 'rgb(0, 221, 255)'
+                },
+                {
+                  offset: 1,
+                  color: 'rgb(77, 119, 255)'
+                }
+              ])
+            },
+            emphasis: {
+              focus: 'series'
+            },
+            data: [120, 700, 600, 500, 900, 282, 111, 120, 700, 600, 500, 900, 282, 111, 234, 220, 340, 310, 234, 220, 340, 310, 220, 340]
+          },
+          {
+            name: '系统C',
+            type: 'line',
+            stack: 'Total',
+            smooth: true,
+            lineStyle: {
+              width: 0
+            },
+            showSymbol: false,
+            areaStyle: {
+              opacity: 0.8,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: 'rgb(55, 162, 255)'
+                },
+                {
+                  offset: 1,
+                  color: 'rgb(116, 21, 219)'
+                }
+              ])
+            },
+            emphasis: {
+              focus: 'series'
+            },
+            data: [320, 132, 201, 334, 190, 130, 320, 132, 201, 334, 190, 130, 220, 220, 320, 132, 201, 334, 190, 130, 220, 190, 130, 220]
+          },
+          {
+            name: '系统D',
+            type: 'line',
+            stack: 'Total',
+            smooth: true,
+            lineStyle: {
+              width: 0
+            },
+            showSymbol: false,
+            areaStyle: {
+              opacity: 0.8,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: 'rgb(255, 0, 135)'
+                },
+                {
+                  offset: 1,
+                  color: 'rgb(135, 0, 157)'
+                }
+              ])
+            },
+            emphasis: {
+              focus: 'series'
+            },
+            data: [220, 402, 231, 134, 190, 230, 120, 200, 500, 800, 600, 700, 220, 402, 231, 134, 190, 230, 120, 200, 500, 800, 600, 700]
+          },
+          {
+            name: '系统E',
+            type: 'line',
+            stack: 'Total',
+            smooth: true,
+            lineStyle: {
+              width: 0
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: 'top'
+            },
+            areaStyle: {
+              opacity: 0.8,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: 'rgb(255, 191, 0)'
+                },
+                {
+                  offset: 1,
+                  color: 'rgb(224, 62, 76)'
+                }
+              ])
+            },
+            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)
+    }
+    const getEchart = (dom, op) => {
+      if (dom) {
+        // 图表的dom属性中发现了一个特殊的属性：_echarts_instance_，对应的值是一个id，可能是由于再次渲染时这个id未发生改变导致ehcarts认为不需要重新渲染
+        // 手动移除该属性
+        dom.removeAttribute('_echarts_instance_')
+        var myChart = echarts.init(dom);
+        var option = op;
+
+        option && myChart.setOption(option);
+      }
+    };
+    return {
+      ...toRefs(state),
+      getChartsZfl,
+      getEchart
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.analyse-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding: 10px;
+
+  .echartDiv100 {
+    width: 100%;
+    height: 20%;
+    margin: 0 auto;
+  }
+}
+</style>
diff --git a/src/components/Zhibiao4.vue b/src/components/Zhibiao4.vue
new file mode 100644
index 0000000..4228d7c
--- /dev/null
+++ b/src/components/Zhibiao4.vue
@@ -0,0 +1,276 @@
+<template>
+  <div class="analyse-container">
+    <div id="echartDiv1" class="echartDiv100"></div>
+    <div id="echartDiv2" class="echartDiv100"></div>
+    <div id="echartDiv3" class="echartDiv100"></div>
+    <div id="echartDiv4" class="echartDiv100"></div>
+    <div id="echartDiv5" class="echartDiv100"></div>
+  </div>
+</template>
+
+<script>
+import { onMounted, reactive, ref, toRefs } from "vue";
+import { ElMessage } from "element-plus";
+import myApi from "@/api/myApi.js";
+import BarEchart from "./BarEchart.vue";
+import Process from "./Process.vue";
+import Date from "@/components/Date.vue";
+export default {
+  name: "Analyse",
+  components: {
+
+  },
+  setup() {
+    const state = reactive({
+      
+    });
+    onMounted(async () => { 
+      getChartsZfl("echartDiv1", '蒸腾量');
+      getChartsZfl("echartDiv2", 'COD');
+      getChartsZfl("echartDiv3", '氨氮');
+      getChartsZfl("echartDiv4", 'SS');
+      getChartsZfl("echartDiv5", '屋面温度');
+     });
+    const getChartsZfl = (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
+            },
+            showSymbol: false,
+            areaStyle: {
+              opacity: 0.8,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: 'rgb(128, 255, 165)'
+                },
+                {
+                  offset: 1,
+                  color: 'rgb(1, 191, 236)'
+                }
+              ])
+            },
+            emphasis: {
+              focus: 'series'
+            },
+            data: [140, 232, 101, 264, 90, 340, 250, 140, 232, 101, 264, 90, 340, 250, 140, 232, 101, 264, 90, 340, 250, 140, 232, 101]
+          },
+          {
+            name: '系统B',
+            type: 'line',
+            stack: 'Total',
+            smooth: true,
+            lineStyle: {
+              width: 0
+            },
+            showSymbol: false,
+            areaStyle: {
+              opacity: 0.8,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: 'rgb(0, 221, 255)'
+                },
+                {
+                  offset: 1,
+                  color: 'rgb(77, 119, 255)'
+                }
+              ])
+            },
+            emphasis: {
+              focus: 'series'
+            },
+            data: [120, 700, 600, 500, 900, 282, 111, 120, 700, 600, 500, 900, 282, 111, 234, 220, 340, 310, 234, 220, 340, 310, 220, 340]
+          },
+          {
+            name: '系统C',
+            type: 'line',
+            stack: 'Total',
+            smooth: true,
+            lineStyle: {
+              width: 0
+            },
+            showSymbol: false,
+            areaStyle: {
+              opacity: 0.8,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: 'rgb(55, 162, 255)'
+                },
+                {
+                  offset: 1,
+                  color: 'rgb(116, 21, 219)'
+                }
+              ])
+            },
+            emphasis: {
+              focus: 'series'
+            },
+            data: [320, 132, 201, 334, 190, 130, 320, 132, 201, 334, 190, 130, 220, 220, 320, 132, 201, 334, 190, 130, 220, 190, 130, 220]
+          },
+          {
+            name: '系统D',
+            type: 'line',
+            stack: 'Total',
+            smooth: true,
+            lineStyle: {
+              width: 0
+            },
+            showSymbol: false,
+            areaStyle: {
+              opacity: 0.8,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: 'rgb(255, 0, 135)'
+                },
+                {
+                  offset: 1,
+                  color: 'rgb(135, 0, 157)'
+                }
+              ])
+            },
+            emphasis: {
+              focus: 'series'
+            },
+            data: [220, 402, 231, 134, 190, 230, 120, 200, 500, 800, 600, 700, 220, 402, 231, 134, 190, 230, 120, 200, 500, 800, 600, 700]
+          },
+          {
+            name: '系统E',
+            type: 'line',
+            stack: 'Total',
+            smooth: true,
+            lineStyle: {
+              width: 0
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: 'top'
+            },
+            areaStyle: {
+              opacity: 0.8,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: 'rgb(255, 191, 0)'
+                },
+                {
+                  offset: 1,
+                  color: 'rgb(224, 62, 76)'
+                }
+              ])
+            },
+            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)
+    }
+    const getEchart = (dom, op) => {
+      if (dom) {
+        // 图表的dom属性中发现了一个特殊的属性：_echarts_instance_，对应的值是一个id，可能是由于再次渲染时这个id未发生改变导致ehcarts认为不需要重新渲染
+        // 手动移除该属性
+        dom.removeAttribute('_echarts_instance_')
+        var myChart = echarts.init(dom);
+        var option = op;
+
+        option && myChart.setOption(option);
+      }
+    };
+    return {
+      ...toRefs(state),
+      getChartsZfl,
+      getEchart
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.analyse-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding: 10px;
+
+  .echartDiv100 {
+    width: 100%;
+    height: 20%;
+    margin: 0 auto;
+  }
+}
+</style>
diff --git a/src/components/Zhibiao5.vue b/src/components/Zhibiao5.vue
new file mode 100644
index 0000000..4228d7c
--- /dev/null
+++ b/src/components/Zhibiao5.vue
@@ -0,0 +1,276 @@
+<template>
+  <div class="analyse-container">
+    <div id="echartDiv1" class="echartDiv100"></div>
+    <div id="echartDiv2" class="echartDiv100"></div>
+    <div id="echartDiv3" class="echartDiv100"></div>
+    <div id="echartDiv4" class="echartDiv100"></div>
+    <div id="echartDiv5" class="echartDiv100"></div>
+  </div>
+</template>
+
+<script>
+import { onMounted, reactive, ref, toRefs } from "vue";
+import { ElMessage } from "element-plus";
+import myApi from "@/api/myApi.js";
+import BarEchart from "./BarEchart.vue";
+import Process from "./Process.vue";
+import Date from "@/components/Date.vue";
+export default {
+  name: "Analyse",
+  components: {
+
+  },
+  setup() {
+    const state = reactive({
+      
+    });
+    onMounted(async () => { 
+      getChartsZfl("echartDiv1", '蒸腾量');
+      getChartsZfl("echartDiv2", 'COD');
+      getChartsZfl("echartDiv3", '氨氮');
+      getChartsZfl("echartDiv4", 'SS');
+      getChartsZfl("echartDiv5", '屋面温度');
+     });
+    const getChartsZfl = (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
+            },
+            showSymbol: false,
+            areaStyle: {
+              opacity: 0.8,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: 'rgb(128, 255, 165)'
+                },
+                {
+                  offset: 1,
+                  color: 'rgb(1, 191, 236)'
+                }
+              ])
+            },
+            emphasis: {
+              focus: 'series'
+            },
+            data: [140, 232, 101, 264, 90, 340, 250, 140, 232, 101, 264, 90, 340, 250, 140, 232, 101, 264, 90, 340, 250, 140, 232, 101]
+          },
+          {
+            name: '系统B',
+            type: 'line',
+            stack: 'Total',
+            smooth: true,
+            lineStyle: {
+              width: 0
+            },
+            showSymbol: false,
+            areaStyle: {
+              opacity: 0.8,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: 'rgb(0, 221, 255)'
+                },
+                {
+                  offset: 1,
+                  color: 'rgb(77, 119, 255)'
+                }
+              ])
+            },
+            emphasis: {
+              focus: 'series'
+            },
+            data: [120, 700, 600, 500, 900, 282, 111, 120, 700, 600, 500, 900, 282, 111, 234, 220, 340, 310, 234, 220, 340, 310, 220, 340]
+          },
+          {
+            name: '系统C',
+            type: 'line',
+            stack: 'Total',
+            smooth: true,
+            lineStyle: {
+              width: 0
+            },
+            showSymbol: false,
+            areaStyle: {
+              opacity: 0.8,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: 'rgb(55, 162, 255)'
+                },
+                {
+                  offset: 1,
+                  color: 'rgb(116, 21, 219)'
+                }
+              ])
+            },
+            emphasis: {
+              focus: 'series'
+            },
+            data: [320, 132, 201, 334, 190, 130, 320, 132, 201, 334, 190, 130, 220, 220, 320, 132, 201, 334, 190, 130, 220, 190, 130, 220]
+          },
+          {
+            name: '系统D',
+            type: 'line',
+            stack: 'Total',
+            smooth: true,
+            lineStyle: {
+              width: 0
+            },
+            showSymbol: false,
+            areaStyle: {
+              opacity: 0.8,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: 'rgb(255, 0, 135)'
+                },
+                {
+                  offset: 1,
+                  color: 'rgb(135, 0, 157)'
+                }
+              ])
+            },
+            emphasis: {
+              focus: 'series'
+            },
+            data: [220, 402, 231, 134, 190, 230, 120, 200, 500, 800, 600, 700, 220, 402, 231, 134, 190, 230, 120, 200, 500, 800, 600, 700]
+          },
+          {
+            name: '系统E',
+            type: 'line',
+            stack: 'Total',
+            smooth: true,
+            lineStyle: {
+              width: 0
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: 'top'
+            },
+            areaStyle: {
+              opacity: 0.8,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: 'rgb(255, 191, 0)'
+                },
+                {
+                  offset: 1,
+                  color: 'rgb(224, 62, 76)'
+                }
+              ])
+            },
+            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)
+    }
+    const getEchart = (dom, op) => {
+      if (dom) {
+        // 图表的dom属性中发现了一个特殊的属性：_echarts_instance_，对应的值是一个id，可能是由于再次渲染时这个id未发生改变导致ehcarts认为不需要重新渲染
+        // 手动移除该属性
+        dom.removeAttribute('_echarts_instance_')
+        var myChart = echarts.init(dom);
+        var option = op;
+
+        option && myChart.setOption(option);
+      }
+    };
+    return {
+      ...toRefs(state),
+      getChartsZfl,
+      getEchart
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.analyse-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding: 10px;
+
+  .echartDiv100 {
+    width: 100%;
+    height: 20%;
+    margin: 0 auto;
+  }
+}
+</style>
diff --git a/src/views/Biology.vue b/src/views/Biology.vue
index ab3bb18..79bbcb1 100644
--- a/src/views/Biology.vue
+++ b/src/views/Biology.vue
@@ -15,8 +15,8 @@
 <script>
 import Menus from "@/components/Menus.vue";
 import Bindex from "@/components/Bindex.vue";
-import Zhibiao from "@/components/Zhibiao.vue";
-import Analyse from "@/components/Analyse.vue";
+import Zhibiao from "@/components/Zhibiao2.vue";
+import Analyse from "@/components/Ganalyse2.vue";
 import History from "@/components/History.vue";
 import { onMounted, reactive, ref, toRefs, nextTick } from "vue";
 export default {
diff --git a/src/views/Chuxu.vue b/src/views/Chuxu.vue
index 04eed80..333d0cc 100644
--- a/src/views/Chuxu.vue
+++ b/src/views/Chuxu.vue
@@ -16,7 +16,7 @@
 import Menus from "@/components/Menus.vue";
 import Cindex from "@/components/Cindex.vue";
 import Zhibiao from "@/components/Zhibiao.vue";
-import Ganalyse from "@/components/Ganalyse.vue";
+import Ganalyse from "@/components/Ganalyse4.vue";
 import History from "@/components/History.vue";
 import { onMounted, reactive, ref, toRefs, nextTick } from "vue";
 export default {
diff --git a/src/views/Green.vue b/src/views/Green.vue
index 3b279e3..a8fc6e3 100644
--- a/src/views/Green.vue
+++ b/src/views/Green.vue
@@ -15,8 +15,8 @@
 <script>
 import Menus from "@/components/Menus.vue";
 import Gindex from "@/components/Gindex.vue";
-import Zhibiao from "@/components/Zhibiao.vue";
-import Ganalyse from "@/components/Ganalyse.vue";
+import Zhibiao from "@/components/Zhibiao1.vue";
+import Ganalyse from "@/components/Ganalyse1.vue";
 import History from "@/components/History.vue";
 import { onMounted, reactive, ref, toRefs, nextTick } from "vue";
 export default {
diff --git a/src/views/Shentou.vue b/src/views/Shentou.vue
index 511494c..02c9b33 100644
--- a/src/views/Shentou.vue
+++ b/src/views/Shentou.vue
@@ -16,7 +16,7 @@
 import Menus from "@/components/Menus.vue";
 import Sindex from "@/components/Sindex.vue";
 import Zhibiao from "@/components/Zhibiao.vue";
-import Analyse from "@/components/Analyse.vue";
+import Analyse from "@/components/Ganalyse3.vue";
 import History from "@/components/History.vue";
 import { onMounted, reactive, ref, toRefs, nextTick } from "vue";
 export default {
diff --git a/src/views/Weather.vue b/src/views/Weather.vue
index df47fc5..5b37db9 100644
--- a/src/views/Weather.vue
+++ b/src/views/Weather.vue
@@ -16,7 +16,7 @@
 import Menus from "@/components/Menus.vue";
 import Windex from "@/components/Windex.vue";
 import Report from "@/components/Report.vue";
-import Analyse from "@/components/Analyse.vue";
+import Analyse from "@/components/Ganalyse5.vue";
 import History from "@/components/History.vue";
 import { onMounted, reactive, ref, toRefs, nextTick } from "vue";
 export default {