From b3d452f5cb61891812c56cd2dd70f8bd1f214dd2 Mon Sep 17 00:00:00 2001
From: wangqiujuan0808 <578331299@qq.com>
Date: Wed, 1 Nov 2023 21:42:13 +0800
Subject: [PATCH] 123

---
 src/components/BarEchartG.vue | 258 ++++++++++++++++++++++++++++++++++
 src/components/History1.vue   |  18 +--
 2 files changed, 267 insertions(+), 9 deletions(-)
 create mode 100644 src/components/BarEchartG.vue

diff --git a/src/components/BarEchartG.vue b/src/components/BarEchartG.vue
new file mode 100644
index 0000000..35c9395
--- /dev/null
+++ b/src/components/BarEchartG.vue
@@ -0,0 +1,258 @@
+<template>
+  <div class="echart-div">
+    <div class="top-title">
+      <div class="title">{{echartData.title}}</div>
+    </div>
+    <div class="echart" :id="echartData.id">
+    </div>
+  </div>
+</template>
+<script>
+import { onMounted, reactive, ref, toRefs } from "vue";
+import moment from "moment";
+import { useStore } from "vuex";
+import * as echarts from "echarts";
+import bus from '../utils/bus.js'
+
+export default {
+  name: "LineEchart",
+  props: {
+    echartData: Object
+  },
+  setup(props) {
+    const store = useStore();
+    let myChart = null;
+    let data = {};
+    const state = reactive({
+    });
+    onMounted(() => {
+      bus.on('foo', e => {
+        console.log(e)
+        getEchart();
+      })
+      getEchart();
+    });
+    const getEchart = () => {
+      if (store.state.selectDate === 1) {
+        data = {
+          legend: props.echartData.legend,
+          color: props.echartData.color,
+          xData: [
+            "1",
+            "2",
+            "3",
+            "4",
+            "5",
+            "6",
+            "7",
+            "8",
+            "9",
+            "10",
+            "11",
+            "12",
+            "13",
+            "14",
+            "15",
+            "16",
+            "17",
+            "18",
+            "19",
+            "20",
+            "21",
+            "22",
+            "23",
+            "24",
+            "25",
+            "26",
+            "27",
+            "28",
+            "29",
+            "30",
+          ],
+          value1: [18203, 23489, 29034, 104970, 131744, 630230,18203, 23489, 29034, 104970, 131744, 630230,18203, 23489, 29034, 104970, 131744, 630230,18203, 23489, 29034, 104970, 131744, 630230,18203, 23489, 29034, 104970, 131744, 630230],
+          value2: [19325, 23438, 31000, 121594, 134141, 681807,19325, 23438, 31000, 121594, 134141, 681807,19325, 23438, 31000, 121594, 134141, 681807,19325, 23438, 31000, 121594, 134141, 681807,19325, 23438, 31000, 121594, 134141, 681807],
+          value3: [31000, 121594, 134141, 681807,19325, 23438, 19325, 23438, 19325, 23438, 31000, 121594, 134141, 681807, 23438, 31000, 121594, 31000, 121594, 134141, 681807,19325, 134141, 681807,19325, 23438, 31000, 121594, 134141, 681807],
+        };
+      } else if (store.state.selectDate === 2) {
+        data = {
+          legend: props.echartData.legend,
+          color: props.echartData.color,
+          xData: [
+            "1",
+            "2",
+            "3",
+            "4",
+            "5",
+            "6",
+            "7",
+            "8",
+            "9",
+            "10",
+            "11",
+            "12",
+          ],
+          value1: [18203, 23489, 29034, 104970, 131744, 630230,18203, 18203, 23489, 29034, 104970, 29034],
+          value2: [19325, 23438, 31000, 121594, 19325, 23438, 31000, 121594, 134141, 681807,19325, 134141],
+          value3: [31000, 121594, 134141, 681807,19325, 23438, 23438, 31000, 121594, 134141, 681807,19325]
+        };
+      } else if (store.state.selectDate === 0) {
+        var data = {
+          legend: props.echartData.legend,
+          color: props.echartData.color,
+          xData: [
+            "00",
+            "01",
+            "02",
+            "03",
+            "04",
+            "05",
+            "06",
+            "07",
+            "08",
+            "09",
+            "10",
+            "11",
+            "12",
+            "13",
+            "14",
+            "15",
+            "16",
+            "17",
+            "18",
+            "19",
+            "20",
+            "21",
+            "22",
+            "23",
+          ],
+          value1: [18203, 23489, 29034, 104970, 131744, 630230,18203, 23489, 29034, 104970, 131744, 630230,18203, 23489, 29034, 104970, 131744, 630230,18203, 23489, 29034, 104970, 131744, 630230],
+          value2: [19325, 23438, 31000, 121594, 134141, 681807,19325, 23438, 31000, 121594, 134141, 681807,19325, 23438, 31000, 121594, 134141, 681807,19325, 23438, 31000, 121594, 134141, 681807],
+          value3: [31000, 121594, 134141, 681807,19325, 23438, 19325, 23438, 23438, 31000, 121594, 31000, 121594, 134141, 681807,19325, 134141, 681807,19325, 23438, 31000, 121594, 134141, 681807],
+        };
+      }
+      let dom = document.getElementById(props.echartData.id);
+      if (dom) {
+        myChart = echarts.init(dom);
+        loadlineChart(myChart, data);
+      }
+    };
+    const loadlineChart = (myChart, data) => {
+      console.log(data);
+      var option = {
+        grid: {
+          left: "8%", //画布左移位置
+          top: "10",
+          width: "90%", //画布宽度
+          height: "75%", //画布高度
+        },
+        tooltip: {
+          trigger: "axis",
+        },
+        xAxis: {
+          type: "category",
+          axisLabel: {
+            margin: 10, //X轴标签与轴线之间的距离
+            interval: 0, //X轴0强制显示所有标签，1，隔一个显示
+            rotate: -60,
+            textStyle: {
+              color: "#303133", //X轴字体颜色
+              fontSize: "12", //X轴字体大小
+            },
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#dfe4ed", //X轴线颜色
+            },
+          },
+          axisTick: {
+            show: false, //X轴刻度线隐藏
+          },
+          data: data.xData,
+        },
+        yAxis: {
+          type: "value",
+          axisLabel: {
+            interval: 0, //X轴0强制显示所有标签，1，隔一个显示
+            textStyle: {
+              color: "#303133", //X轴字体颜色
+              fontSize: "12", //X轴字体大小
+            },
+          },
+          axisTick: {
+            show: false, //X轴刻度线隐藏
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#dfe4ed", //y轴线颜色
+            },
+          },
+          // 网格线
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: ["#dfe4ed"],
+              width: 1,
+              type: "dotted",
+            },
+          },
+        },
+        series: [
+        {
+          name: '降雨量',
+          type: 'bar',
+          data: data.value1
+        },
+        {
+          name: '数据2',
+          type: 'bar',
+          data: data.value2
+        },
+        {
+          name: '数据3',
+          type: 'bar',
+          data: data.value3
+        }
+        ],
+      };
+      myChart.setOption(option);
+    };
+
+    return {
+      ...toRefs(state),
+      getEchart,
+      loadlineChart
+    };
+  },
+};
+</script>
+<style lang="scss" scoped>
+.echart-div {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+
+  .top-title {
+    height: 10%;
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .title {
+      border-left: 3px solid #5dcbed;
+      padding-left: 10px;
+    }
+  }
+
+  .echart {
+    height: 85%;
+    width: 100%;
+
+    #myChart {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+</style>
diff --git a/src/components/History1.vue b/src/components/History1.vue
index 22e8095..19bc96e 100644
--- a/src/components/History1.vue
+++ b/src/components/History1.vue
@@ -49,6 +49,12 @@
               {{ item.value }}
             </td>
           </tr>
+          <tr>
+            <td>数值</td>
+            <td v-for="(item, index) in tableHeader" :key="index">
+              {{ item.value }}
+            </td>
+          </tr>
         </tbody>
       </table>
     </div>
@@ -59,7 +65,7 @@
 import { onMounted, reactive, ref, toRefs } from "vue";
 import { ElMessage } from "element-plus";
 import myApi from "@/api/myApi.js";
-import BarEchart from "./BarEchart.vue";
+import BarEchart from "./BarEchartG.vue";
 import Process from "./Process.vue";
 import Date from "@/components/Date.vue";
 export default {
@@ -75,14 +81,8 @@ export default {
       {
           id: "echart0",
           title: "降水量-柱状图",
-          legend: ["降水量"],
-          color: ["#6fdbce"],
-        },
-        {
-          id: "echart1",
-          title: "降水量-柱状图",
-          legend: ["降水量"],
-          color: ["#6fdbce"],
+          legend: ["降水量", "数据2", "数据3"],
+          color: ["#6fdbce", "#f00", "#0000ff"],
         }
       ],
       fxOptions: [