From e2c0c45d7e989d8f8c8d6c8e59b08a2e3afdc6f3 Mon Sep 17 00:00:00 2001
From: wangqiujuan0808 <578331299@qq.com>
Date: Wed, 1 Nov 2023 22:18:41 +0800
Subject: [PATCH] 123

---
 src/components/BarEchartB.vue | 298 ++++++++++++++++++++++++++++++++++
 src/components/BarEchartC.vue | 251 ++++++++++++++++++++++++++++
 src/components/BarEchartS.vue | 269 ++++++++++++++++++++++++++++++
 src/components/History2.vue   |   8 +-
 src/components/History3.vue   |   6 +-
 src/components/History4.vue   |   2 +-
 6 files changed, 824 insertions(+), 10 deletions(-)
 create mode 100644 src/components/BarEchartB.vue
 create mode 100644 src/components/BarEchartC.vue
 create mode 100644 src/components/BarEchartS.vue

diff --git a/src/components/BarEchartB.vue b/src/components/BarEchartB.vue
new file mode 100644
index 0000000..6d48dad
--- /dev/null
+++ b/src/components/BarEchartB.vue
@@ -0,0 +1,298 @@
+<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],
+          
+        };
+      } 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],
+        
+        };
+      } 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],
+          
+        };
+      }
+      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: "65%", //画布高度
+        },
+        legend: {},
+        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",
+            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: data.value1
+          },
+          {
+            name: '数据2',
+            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: data.value2
+          }
+        ],
+      };
+      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/BarEchartC.vue b/src/components/BarEchartC.vue
new file mode 100644
index 0000000..4b131da
--- /dev/null
+++ b/src/components/BarEchartC.vue
@@ -0,0 +1,251 @@
+<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: [1823, 2349, 2904, 1040, 1744, 6300, 1820, 2389, 2934, 1970, 1144, 6230, 1803, 2489, 2034, 1070, 1344, 6330, 1803, 2349, 2904, 1040, 1344, 6330, 1803, 2389, 2934, 1970, 1344, 6230],
+      };
+      } 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: [1823, 2349, 2904, 1040, 1344, 6330, 1803, 1803, 2389, 2934, 1097, 2934],
+         
+        };
+      } 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: [3120, 1823, 290, 1049, 1317, 6300, 1823, 2893, 2334, 1970, 1744, 6230, 1033, 2489, 2034, 1970, 1344, 6330, 1803, 2389, 2904, 1040, 1314, 6300],
+         
+        };
+      }
+      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: "65%", //画布高度
+        },
+        legend: {},
+        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: '数据1',
+            type: 'line',
+            stack: 'Total',
+            areaStyle: {},
+            emphasis: {
+              focus: 'series'
+            },
+            smooth: true,
+            data: data.value1
+          }
+        ],
+      };
+      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/BarEchartS.vue b/src/components/BarEchartS.vue
new file mode 100644
index 0000000..a4523d5
--- /dev/null
+++ b/src/components/BarEchartS.vue
@@ -0,0 +1,269 @@
+<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],
+
+        };
+      } 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],
+
+        };
+      } 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: [3120000, 1822203, 2903455, 1049470, 131744, 630230, 18203, 234893, 290334, 104970, 131744, 630230, 182033, 233489, 239034, 104970, 131744, 630230, 18203, 23489, 29034, 104970, 131744, 630230],
+          value2: [121594, 1944325, 2355438, 3103400, 134141, 681807, 193235, 23438, 310003, 121594, 134141, 681807, 193253, 233438, 313000, 121594, 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: "65%", //画布高度
+        },
+        legend: {},
+        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: '数据1',
+            type: 'line',
+            stack: 'Total',
+            areaStyle: {},
+            emphasis: {
+              focus: 'series'
+            },
+            smooth: true,
+            data: data.value1
+          },
+          {
+            name: '数据2',
+            type: 'line',
+            stack: 'Total',
+            areaStyle: {},
+            emphasis: {
+              focus: 'series'
+            },
+            smooth: true,
+            data: data.value2
+          },
+
+
+     
+        ],
+      };
+      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/History2.vue b/src/components/History2.vue
index 37b0167..9a79f30 100644
--- a/src/components/History2.vue
+++ b/src/components/History2.vue
@@ -20,9 +20,7 @@
       <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>
@@ -59,7 +57,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 "./BarEchartB.vue";
 import Process from "./Process.vue";
 import Date from "@/components/Date.vue";
 export default {
@@ -75,7 +73,7 @@ export default {
         {
           id: "echart0",
           title: "降水量-柱状图",
-          legend: ["降水量"],
+          legend: ["降水量", "数据2"],
           color: ["#6fdbce"],
         },
       ],
diff --git a/src/components/History3.vue b/src/components/History3.vue
index 37b0167..78b7301 100644
--- a/src/components/History3.vue
+++ b/src/components/History3.vue
@@ -20,9 +20,7 @@
       <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>
@@ -59,7 +57,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 "./BarEchartS.vue";
 import Process from "./Process.vue";
 import Date from "@/components/Date.vue";
 export default {
diff --git a/src/components/History4.vue b/src/components/History4.vue
index 37b0167..7bb985d 100644
--- a/src/components/History4.vue
+++ b/src/components/History4.vue
@@ -59,7 +59,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 "./BarEchartC.vue";
 import Process from "./Process.vue";
 import Date from "@/components/Date.vue";
 export default {