数字环保统计分析

src/api/bigdata.js

@@ -158,3 +158,76 @@ export function selectCarCount(data) {
     params:data
   })
 }
+
+//大数据查询 大气环境数据的走势以月、年进行统计分析
+export function findAtmosphereByYear() {
+  return request({
+    url: '/center-environment/VisuForestCloudBigDataController/findAtmosphereByYear',
+    method: 'post'
+  })
+}
+
+//大数据查询 大气环境数据的走势以日、月进行统计分析
+export function findAtmosphereByMonth() {
+  return request({
+    url: '/center-environment/VisuForestCloudBigDataController/findAtmosphereByMonth',
+    method: 'post'
+  })
+}
+
+//大数据查询 污染源数据的走势以月、年进行统计分析
+export function findPollutionByYear() {
+  return request({
+    url: '/center-environment/VisuForestCloudBigDataController/findPollutionByYear',
+    method: 'post'
+  })
+}
+
+//大数据查询 污染源数据的走势以日、月进行统计分析
+export function findPollutionByMonth() {
+  return request({
+    url: '/center-environment/VisuForestCloudBigDataController/findPollutionByMonth',
+    method: 'post'
+  })
+}
+
+//大数据查询 土壤数据的走势以月、年进行统计分析
+export function findSoilByYear() {
+  return request({
+    url: '/center-environment/VisuForestCloudBigDataController/findSoilByYear',
+    method: 'post'
+  })
+}
+
+//大数据查询 土壤数据的走势以日、月进行统计分析
+export function findSoilByMonth() {
+  return request({
+    url: '/center-environment/VisuForestCloudBigDataController/findSoilByMonth',
+    method: 'post'
+  })
+}
+
+//大数据查询 水质监测数据的走势以月、年进行统计分析
+export function findWaterqualityByYear() {
+  return request({
+    url: '/center-environment/VisuForestCloudBigDataController/findWaterqualityByYear',
+    method: 'post'
+  })
+}
+
+//大数据查询 水质监测数据的走势以日、月进行统计分析
+export function findWaterqualityByMonth() {
+  return request({
+    url: '/center-environment/VisuForestCloudBigDataController/findWaterqualityByMonth',
+    method: 'post'
+  })
+}
+
+//考勤
+export function bigFindAttend() {
+  return request({
+    url: '/system/sysAttendance/bigFindAttend',
+    method: 'get',
+    data: {}
+  })
+}

src/views/bigdata/bigdata.vue

@@ -123,6 +123,69 @@
           <chartPit></chartPit>
         </div>
       </div>
+      <!-- 第七纵向-->
+      <div class="bigdata-list wid-li-3 m-l-15 flex-r">
+        <div class="b-con mg-b-20">
+          <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
+            <span>大气监测分析年统计</span>
+          </div>
+          <chartAtmosphereYear></chartAtmosphereYear>
+        </div>
+        <div class="b-con mg-b-20">
+          <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
+            <span>大气监测分析日统计</span>
+          </div>
+          <chartAtmosphereMonth></chartAtmosphereMonth>
+        </div>
+        <div class="b-con mg-b-20">
+          <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
+            <span>污染源监测分析年统计</span>
+          </div>
+          <chartPollutionYear></chartPollutionYear>
+        </div>
+      </div>
+      <!-- 第八纵向-->
+      <div class="bigdata-list wid-li-3 m-l-15 flex-r">
+        <div class="b-con mg-b-20">
+          <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
+            <span>污染源监测分析日统计</span>
+          </div>
+          <chartPollutionMonth></chartPollutionMonth>
+        </div>
+        <div class="b-con mg-b-20">
+          <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
+            <span>土壤监测分析年统计</span>
+          </div>
+          <chartSoilYear></chartSoilYear>
+        </div>
+        <div class="b-con mg-b-20">
+          <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
+            <span>土壤源监测分析日统计</span>
+          </div>
+          <chartSoilMonth></chartSoilMonth>
+        </div>
+      </div>
+      <!-- 第九纵向-->
+      <div class="bigdata-list wid-li-3 m-l-15 flex-r">
+        <div class="b-con mg-b-20">
+          <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
+            <span>水质监测分析年统计</span>
+          </div>
+          <chartWaterqualityYear></chartWaterqualityYear>
+        </div>
+        <div class="b-con mg-b-20">
+          <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
+            <span>水质监测分析日统计</span>
+          </div>
+          <chartWaterqualityMonth></chartWaterqualityMonth>
+        </div>
+        <div class="b-con">
+          <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
+            <span>环保人员考勤</span>
+          </div>
+          <chartKaoqin></chartKaoqin>
+        </div>
+      </div>
     </div>
 
   </div>
@@ -149,6 +212,16 @@ import chartNoBurningArea from './chart-noBurningArea.vue' //10 禁烧区分布
 import chartEquipmentDistribution from './chart-equipmentDistribution' //16 设备分布、、
 import chartDetector from './chart-detector' //16 设备分布、、
 import chartPit from './chart-pit' //16 设备分布、、
+import chartAtmosphereYear from './chart-atmosphereYear.vue' //26 大气 监测分析年统计
+import chartAtmosphereMonth from './chart-atmosphereMonth.vue' //27 大气 监测分析月统计
+import chartPollutionYear from './chart-pollutionYear.vue' //28 污染源 监测分析年统计
+import chartPollutionMonth from './chart-pollutionMonth.vue' //29 污染源 监测分析月统计
+import chartSoilYear from './chart-soilYear.vue' //30 土壤 监测分析年统计
+import chartSoilMonth from './chart-soilMonth.vue' //31 土壤 监测分析月统计
+import chartWaterqualityYear from './chart-waterqualityYear.vue' //32 水质 监测分析年统计
+import chartWaterqualityMonth from './chart-waterqualityMonth.vue' //33 水质 监测分析月统计
+import chartKaoqin from './chart-kaoqin.vue' //33 水质 监测分析月统计
+
 import { getRlt } from '@/api/bigdata'
 import {
   fontConfig
@@ -172,7 +245,16 @@ export default {
     // chartGridStaff,
     // chartWeatherStation,
     chartEquipmentDistribution,
-    chartDetector
+    chartDetector,
+    chartAtmosphereYear,
+    chartAtmosphereMonth,
+    chartPollutionYear,
+    chartPollutionMonth,
+    chartSoilYear,
+    chartSoilMonth,
+    chartWaterqualityYear,
+    chartWaterqualityMonth,
+    chartKaoqin
   },
   data() {
     return {

src/views/bigdata/chart-atmosphereMonth.vue

@@ -0,0 +1,230 @@
+<!-- **************************************NO.18 大气*************************************** -->
+<template>
+  <div class="chart-container">
+    <div id="atmosphereMonth" style="width: 100%; height:25vh; ">
+    </div>
+  </div>
+</template>
+
+<script>
+  import { findAtmosphereByMonth } from '@/api/bigdata'
+  import * as echarts from 'echarts';
+  export default {
+    name: 'chart-atmosphereMonth',
+    data() {
+      return {
+        count: 0
+      }
+    },
+    mounted() {
+      this.findAtmosphereByMonth();
+    },
+
+    methods: {
+      findAtmosphereByMonth() {
+        let year = new Date().getFullYear();
+        let param = {year: year};
+        // const yearArr = [2021, 2022, 2023, 2024, 2025];
+        const yearArr = [year - 2, year - 1, year, year + 1, year + 2];
+        // let currentIndex = 1;//默认选择年份
+        let currentIndex = 3;//默认选择年份
+        let currentYear = yearArr[currentIndex];//默认年份
+        findAtmosphereByMonth(param).then(res => {
+          console.log("findDataByMonth", res);
+          this.myEcharts(res);
+        })
+        let res = {};
+        let data = [[]];
+        data[0] = [{"jdName": "a", "year": "2021"}, {"jdName": "2021"}, {"jdName": "2021"}, {"jdName": "2021"}]
+        data[1] = [{"jdName": "a", "year": "2022"}, {"jdName": "2022"}, {"jdName": "2022"}, {"jdName": "2022"}]
+        data[2] = [{"jdName": "a", "year": "2023"}, {"jdName": "2023"}, {"jdName": "2023"}, {"jdName": "2023"}]
+        data[3] = [{"jdName": "a", "year": "2024"}, {"jdName": "2024"}, {"jdName": "2024"}, {"jdName": "2024"}]
+        data[4] = [{"jdName": "a", "year": "2025"}, {"jdName": "2025"}, {"jdName": "2025"}, {"jdName": "2025"}]
+        res.data = data;
+        // this.myEcharts(res);
+      },
+      myEcharts(res) {
+        var myChart = echarts.init(document.getElementById('atmosphereMonth'));
+        var Xdata = ["01","02","03","04","05","06","07","08","09","10",'11','12','13','14','15','16','17','18','19','20','21','22','23','24','25','26','27','28','29','30','31'];
+        var one = {
+          2019: [589, 259, 262, 324, 232, 176, 196, 214, 133, 370,309,293, 143],
+          2020: [511, 315, 139, 375, 204, 352, 163, 258, 385, 209,309,293, 143],
+          2021: [527, 210, 328, 292, 241, 110, 130, 185, 392, 392,309,293, 143],
+          2022: [500, 350, 300, 250, 200, 150, 100, 150, 200, 250,309,293, 143],
+          2023: [580, 128, 255, 254, 313, 143, 360, 343, 338, 163,309,293, 143]
+        };
+        var two = {
+          2019: [76, 29, 22, 34, 22, 176, 196, 214, 133, 370,309,293, 143],
+          2020: [51, 35, 19, 35, 24, 352, 163, 258, 385, 209,309,293, 143],
+          2021: [57, 20, 38, 22, 21, 110, 130, 185, 392, 392,309,293, 143],
+          2022: [50, 30, 30, 20, 20, 150, 100, 150, 200, 250,309,293, 143],
+          2023: [50, 18, 25, 24, 33, 143, 360, 343, 338, 163,309,293, 143]
+        };
+        var three = {
+          2019: [589, 259, 262, 324, 22, 17, 196, 24, 13, 370,309,293, 143],
+          2020: [511, 315, 139, 375, 24, 35, 163, 28, 35, 209,39,293, 143],
+          2021: [527, 210, 328, 292, 21, 11, 130, 15, 32, 392,39,293, 143],
+          2022: [500, 350, 300, 250, 20, 15, 100, 10, 20, 250,39,293, 143],
+          2023: [580, 128, 255, 254, 33, 14, 360, 33, 338, 163,39,293, 143]
+        };
+        one = res.data.one;
+        two = res.data.two;
+        three = res.data.three;
+        //图表月份
+        var timeLineData = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
+        var option = {
+          baseOption: {
+            backgroundColor: "#061740",
+            timeline: {
+              show: true,
+              axisType: 'category',
+              tooltip: {
+                show: true,
+                formatter: function(params) {
+                  return params.name + '月份数据统计';
+                }
+              },
+              autoPlay: true,
+              currentIndex: 0,
+              playInterval: 5000,
+              label: {
+                normal: {
+                  show: true,
+                  color: '#20dbfd',
+                  interval: 'auto',
+                  formatter: function(params) {
+                    return params
+                  }
+                },
+              },
+              lineStyle: {
+                show: true,
+                color: '#20dbfd'
+              },
+              itemStyle: {
+                show: true,
+                color: '#20dbfd'
+              },
+              controlStyle: {
+                show: true,
+                color: '#20dbfd',
+                borderColor: '#20dbfd'
+              },
+              left: "2",
+              right: "10",
+              bottom: '0',
+              padding: [5, 0],
+              data: timeLineData,
+            },
+            title: {
+              textStyle: {
+                color: '#fff',
+                fontSize: 16,
+              },
+            },
+            tooltip: {
+              show: true,
+              trigger: 'axis',
+              axisPointer: {
+                type: 'shadow',
+              }
+            },
+            grid: {
+              top: "14%",
+              left: "3%",
+              right: "5%",
+              bottom: "15%",
+              containLabel: true
+            },
+            xAxis: [{
+              type: 'category',
+              axisLine: {
+                show: false,
+              },
+              axisTick: {
+                show: false,
+              },
+              axisLabel: {
+                show: true,
+                formatter: function(val) {
+                  var strs = val.split(''); //字符串数组
+                  var str = ''
+                  for (var i = 0, s; s = strs[i++];) { //遍历字符串数组
+                    str += s;
+                    if (!(i % 2)) str += '\n'; //按需要求余
+                  }
+                  return str
+                },
+                textStyle: {
+                  color: '#B2B2B2',
+                  fontSize: 12,
+                },
+              },
+              splitLine: {
+                show: false,
+                lineStyle: {
+                  color: '#fff',
+                  width: 1,
+                },
+              },
+              data: Xdata,
+            }],
+            yAxis: [{
+              type: 'value',
+              // name: "(万)",
+              nameTextStyle: {
+                color: "#fff",
+              },
+              axisLine: {
+                show: false
+              },
+              axisTick: {
+                show: false
+              },
+              axisLabel: {
+                show: true,
+                textStyle: {
+                  color: '#fff',
+                  fontSize: 12,
+                },
+              }
+            }]
+          },
+          options: []
+        };
+        for (var i = 0; i < timeLineData.length; i++) {
+          option.options.push({
+            series: [{
+              type: 'line',
+              barWidth: '20%',
+              data: one[timeLineData[i]],
+            },{
+              type: 'line',
+              barWidth: '20%',
+              data: two[timeLineData[i]],
+            },{
+              type: 'line',
+              barWidth: '20%',
+              data: three[timeLineData[i]],
+            }]
+          });
+        }
+
+        if(option){
+          myChart.setOption(option);
+        }
+      }
+    }
+  }
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .chart-container {
+    width: 100%;
+    height: auto;
+    position: relative;
+    padding-bottom: 10px;
+    display: flex;
+    flex-direction: column;
+  }
+</style>

src/views/bigdata/chart-atmosphereYear.vue

@@ -0,0 +1,232 @@
+<!-- **************************************NO.18 大气*************************************** -->
+<template>
+  <div class="chart-container">
+    <div id="atmosphereYear" style="width: 100%; height:25vh; ">
+    </div>
+  </div>
+</template>
+
+<script>
+  import { findAtmosphereByYear } from '@/api/bigdata'
+  import * as echarts from 'echarts';
+  export default {
+    name: 'chart-atmosphereYear',
+    data() {
+      return {
+        count: 0
+      }
+    },
+    mounted() {
+      this.findAtmosphereByYear();
+    },
+
+    methods: {
+      findAtmosphereByYear() {
+        let year = new Date().getFullYear();
+        let param = {year: year};
+        // const yearArr = [2021, 2022, 2023, 2024, 2025];
+        const yearArr = [year - 2, year - 1, year, year + 1, year + 2];
+        // let currentIndex = 1;//默认选择年份
+        let currentIndex = 3;//默认选择年份
+        let currentYear = yearArr[currentIndex];//默认年份
+        findAtmosphereByYear(param).then(res => {
+          console.log("findDataByYear", res)
+          this.myEcharts(res);
+        })
+        let res = {};
+        let data = [[]];
+        data[0] = [{"jdName": "a", "year": "2021"}, {"jdName": "2021"}, {"jdName": "2021"}, {"jdName": "2021"}]
+        data[1] = [{"jdName": "a", "year": "2022"}, {"jdName": "2022"}, {"jdName": "2022"}, {"jdName": "2022"}]
+        data[2] = [{"jdName": "a", "year": "2023"}, {"jdName": "2023"}, {"jdName": "2023"}, {"jdName": "2023"}]
+        data[3] = [{"jdName": "a", "year": "2024"}, {"jdName": "2024"}, {"jdName": "2024"}, {"jdName": "2024"}]
+        data[4] = [{"jdName": "a", "year": "2025"}, {"jdName": "2025"}, {"jdName": "2025"}, {"jdName": "2025"}]
+        res.data = data;
+        // this.myEcharts(res);
+      },
+      myEcharts(res) {
+        var myChart = echarts.init(document.getElementById('atmosphereYear'));
+        var Xdata = ["01","02","03","04","05","06","07","08","09","10",'11','12'];
+        var one = {
+          2019: [589, 259, 262, 324, 232, 176, 196, 214, 133, 370,309,293, 143],
+          2020: [511, 315, 139, 375, 204, 352, 163, 258, 385, 209,309,293, 143],
+          2021: [527, 210, 328, 292, 241, 110, 130, 185, 392, 392,309,293, 143],
+          2022: [500, 350, 300, 250, 200, 150, 100, 150, 200, 250,309,293, 143],
+          2023: [580, 128, 255, 254, 313, 143, 360, 343, 338, 163,309,293, 143]
+        };
+        var two = {
+          2019: [76, 29, 22, 34, 22, 176, 196, 214, 133, 370,309,293, 143],
+          2020: [51, 35, 19, 35, 24, 352, 163, 258, 385, 209,309,293, 143],
+          2021: [57, 20, 38, 22, 21, 110, 130, 185, 392, 392,309,293, 143],
+          2022: [50, 30, 30, 20, 20, 150, 100, 150, 200, 250,309,293, 143],
+          2023: [50, 18, 25, 24, 33, 143, 360, 343, 338, 163,309,293, 143]
+        };
+        var three = {
+          2019: [589, 259, 262, 324, 22, 17, 196, 24, 13, 370,309,293, 143],
+          2020: [511, 315, 139, 375, 24, 35, 163, 28, 35, 209,39,293, 143],
+          2021: [527, 210, 328, 292, 21, 11, 130, 15, 32, 392,39,293, 143],
+          2022: [500, 350, 300, 250, 20, 15, 100, 10, 20, 250,39,293, 143],
+          2023: [580, 128, 255, 254, 33, 14, 360, 33, 338, 163,39,293, 143]
+        };
+        one = res.data.one;
+        two = res.data.two;
+        three = res.data.three;
+        //图表月份
+        let year = new Date().getFullYear();
+        // var timeLineData = [2019, 2020, 2021, 2022, 2023];
+        var timeLineData = [year - 4, year - 3, year - 2, year - 1, year];
+        var option = {
+          baseOption: {
+            backgroundColor: "#061740",
+            timeline: {
+              show: true,
+              axisType: 'category',
+              tooltip: {
+                show: true,
+                formatter: function(params) {
+                  return params.name + '月份数据统计';
+                }
+              },
+              autoPlay: true,
+              currentIndex: 0,
+              playInterval: 5000,
+              label: {
+                normal: {
+                  show: true,
+                  color: '#20dbfd',
+                  interval: 'auto',
+                  formatter: function(params) {
+                    return params
+                  }
+                },
+              },
+              lineStyle: {
+                show: true,
+                color: '#20dbfd'
+              },
+              itemStyle: {
+                show: true,
+                color: '#20dbfd'
+              },
+              controlStyle: {
+                show: true,
+                color: '#20dbfd',
+                borderColor: '#20dbfd'
+              },
+              left: "2",
+              right: "10",
+              bottom: '0',
+              padding: [5, 0],
+              data: timeLineData,
+            },
+            title: {
+              textStyle: {
+                color: '#fff',
+                fontSize: 16,
+              },
+            },
+            tooltip: {
+              show: true,
+              trigger: 'axis',
+              axisPointer: {
+                type: 'shadow',
+              }
+            },
+            grid: {
+              top: "14%",
+              left: "3%",
+              right: "5%",
+              bottom: "15%",
+              containLabel: true
+            },
+            xAxis: [{
+              type: 'category',
+              axisLine: {
+                show: false,
+              },
+              axisTick: {
+                show: false,
+              },
+              axisLabel: {
+                show: true,
+                formatter: function(val) {
+                  var strs = val.split(''); //字符串数组
+                  var str = ''
+                  for (var i = 0, s; s = strs[i++];) { //遍历字符串数组
+                    str += s;
+                    if (!(i % 2)) str += '\n'; //按需要求余
+                  }
+                  return str
+                },
+                textStyle: {
+                  color: '#B2B2B2',
+                  fontSize: 12,
+                },
+              },
+              splitLine: {
+                show: false,
+                lineStyle: {
+                  color: '#fff',
+                  width: 1,
+                },
+              },
+              data: Xdata,
+            }],
+            yAxis: [{
+              type: 'value',
+              // name: "(万)",
+              nameTextStyle: {
+                color: "#fff",
+              },
+              axisLine: {
+                show: false
+              },
+              axisTick: {
+                show: false
+              },
+              axisLabel: {
+                show: true,
+                textStyle: {
+                  color: '#fff',
+                  fontSize: 12,
+                },
+              }
+            }]
+          },
+          options: []
+        };
+        for (var i = 0; i < timeLineData.length; i++) {
+          option.options.push({
+            series: [{
+              type: 'line',
+              barWidth: '20%',
+              data: one[timeLineData[i]],
+            },{
+              type: 'line',
+              barWidth: '20%',
+              data: two[timeLineData[i]],
+            },{
+              type: 'line',
+              barWidth: '20%',
+              data: three[timeLineData[i]],
+            }]
+          });
+        }
+
+        if(option){
+          myChart.setOption(option);
+        }
+      }
+    }
+  }
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .chart-container {
+    width: 100%;
+    height: auto;
+    position: relative;
+    padding-bottom: 10px;
+    display: flex;
+    flex-direction: column;
+  }
+</style>

src/views/bigdata/chart-kaoqin.vue

@@ -0,0 +1,79 @@
+<!-- **************************************NO.6 矿坑*************************************** -->
+<template>
+	<div class="chart-container">
+		<div id="pit2" style="width: 100%; height:23vh;">
+		</div>
+	</div>
+</template>
+
+<script>
+  import { bigFindAttend } from '@/api/bigdata'
+	import * as echarts from 'echarts';
+	export default {
+		name: 'pit2',
+		data() {
+			return {
+				count: 0,
+
+        title:'',
+        visible:false,
+
+			}
+		},
+    mounted() {
+      this.bigFindAttend();
+    },
+
+    methods: {
+      bigFindAttend(){
+        bigFindAttend().then(resp => {
+          this.myEcharts(resp.data);
+        })
+      },
+			myEcharts(data) {
+				var chartDom = document.getElementById('pit2');
+				var myChart = echarts.init(chartDom);
+				var color = ['#02CDFF', '#62FBE7', '#7930FF','#ef5f9d','#ecb935'];
+				var option;
+				option = {
+				    color:color,
+				    tooltip : {
+				        trigger: 'item',
+				        formatter: "{b}: {c}"
+				    },
+				    toolbox: {
+				        show : true,
+				    },
+				    series : [
+				        {
+				            type:'pie',
+				            roseType: true,
+				            radius : ['50%', '70%'],
+				            label: {
+				              show: true,
+				              formatter: "{b} {c}",
+                      textStyle: {
+                          fontSize: 10 ,
+                      }
+				            },
+				            data:data
+				        }
+				    ]
+				};
+				option && myChart.setOption(option);
+			},
+
+		},
+
+	}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+	.chart-container {
+		width: 100%;
+		height: auto;
+		position: relative;
+		padding-bottom: 10px;
+		display: flex;
+	}
+</style>

src/views/bigdata/chart-pollutionMonth.vue

@@ -0,0 +1,230 @@
+<!-- **************************************NO.18 污染源*************************************** -->
+<template>
+  <div class="chart-container">
+    <div id="pollutionMonth" style="width: 100%; height:25vh; ">
+    </div>
+  </div>
+</template>
+
+<script>
+  import { findPollutionByMonth } from '@/api/bigdata'
+  import * as echarts from 'echarts';
+  export default {
+    name: 'chart-pollutionMonth',
+    data() {
+      return {
+        count: 0
+      }
+    },
+    mounted() {
+      this.findPollutionByMonth();
+    },
+
+    methods: {
+      findPollutionByMonth() {
+        let year = new Date().getFullYear();
+        let param = {year: year};
+        // const yearArr = [2021, 2022, 2023, 2024, 2025];
+        const yearArr = [year - 2, year - 1, year, year + 1, year + 2];
+        // let currentIndex = 1;//默认选择年份
+        let currentIndex = 3;//默认选择年份
+        let currentYear = yearArr[currentIndex];//默认年份
+        findPollutionByMonth(param).then(res => {
+          console.log("findDataByMonth", res);
+          this.myEcharts(res);
+        })
+        let res = {};
+        let data = [[]];
+        data[0] = [{"jdName": "a", "year": "2021"}, {"jdName": "2021"}, {"jdName": "2021"}, {"jdName": "2021"}]
+        data[1] = [{"jdName": "a", "year": "2022"}, {"jdName": "2022"}, {"jdName": "2022"}, {"jdName": "2022"}]
+        data[2] = [{"jdName": "a", "year": "2023"}, {"jdName": "2023"}, {"jdName": "2023"}, {"jdName": "2023"}]
+        data[3] = [{"jdName": "a", "year": "2024"}, {"jdName": "2024"}, {"jdName": "2024"}, {"jdName": "2024"}]
+        data[4] = [{"jdName": "a", "year": "2025"}, {"jdName": "2025"}, {"jdName": "2025"}, {"jdName": "2025"}]
+        res.data = data;
+        // this.myEcharts(res);
+      },
+      myEcharts(res) {
+        var myChart = echarts.init(document.getElementById('pollutionMonth'));
+        var Xdata = ["01","02","03","04","05","06","07","08","09","10",'11','12','13','14','15','16','17','18','19','20','21','22','23','24','25','26','27','28','29','30','31'];
+        var one = {
+          2019: [589, 259, 262, 324, 232, 176, 196, 214, 133, 370,309,293, 143],
+          2020: [511, 315, 139, 375, 204, 352, 163, 258, 385, 209,309,293, 143],
+          2021: [527, 210, 328, 292, 241, 110, 130, 185, 392, 392,309,293, 143],
+          2022: [500, 350, 300, 250, 200, 150, 100, 150, 200, 250,309,293, 143],
+          2023: [580, 128, 255, 254, 313, 143, 360, 343, 338, 163,309,293, 143]
+        };
+        var two = {
+          2019: [76, 29, 22, 34, 22, 176, 196, 214, 133, 370,309,293, 143],
+          2020: [51, 35, 19, 35, 24, 352, 163, 258, 385, 209,309,293, 143],
+          2021: [57, 20, 38, 22, 21, 110, 130, 185, 392, 392,309,293, 143],
+          2022: [50, 30, 30, 20, 20, 150, 100, 150, 200, 250,309,293, 143],
+          2023: [50, 18, 25, 24, 33, 143, 360, 343, 338, 163,309,293, 143]
+        };
+        var three = {
+          2019: [589, 259, 262, 324, 22, 17, 196, 24, 13, 370,309,293, 143],
+          2020: [511, 315, 139, 375, 24, 35, 163, 28, 35, 209,39,293, 143],
+          2021: [527, 210, 328, 292, 21, 11, 130, 15, 32, 392,39,293, 143],
+          2022: [500, 350, 300, 250, 20, 15, 100, 10, 20, 250,39,293, 143],
+          2023: [580, 128, 255, 254, 33, 14, 360, 33, 338, 163,39,293, 143]
+        };
+        one = res.data.one;
+        two = res.data.two;
+        three = res.data.three;
+        //图表月份
+        var timeLineData = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
+        var option = {
+          baseOption: {
+            backgroundColor: "#061740",
+            timeline: {
+              show: true,
+              axisType: 'category',
+              tooltip: {
+                show: true,
+                formatter: function(params) {
+                  return params.name + '月份数据统计';
+                }
+              },
+              autoPlay: true,
+              currentIndex: 0,
+              playInterval: 5000,
+              label: {
+                normal: {
+                  show: true,
+                  color: '#20dbfd',
+                  interval: 'auto',
+                  formatter: function(params) {
+                    return params
+                  }
+                },
+              },
+              lineStyle: {
+                show: true,
+                color: '#20dbfd'
+              },
+              itemStyle: {
+                show: true,
+                color: '#20dbfd'
+              },
+              controlStyle: {
+                show: true,
+                color: '#20dbfd',
+                borderColor: '#20dbfd'
+              },
+              left: "2",
+              right: "10",
+              bottom: '0',
+              padding: [5, 0],
+              data: timeLineData,
+            },
+            title: {
+              textStyle: {
+                color: '#fff',
+                fontSize: 16,
+              },
+            },
+            tooltip: {
+              show: true,
+              trigger: 'axis',
+              axisPointer: {
+                type: 'shadow',
+              }
+            },
+            grid: {
+              top: "14%",
+              left: "3%",
+              right: "5%",
+              bottom: "15%",
+              containLabel: true
+            },
+            xAxis: [{
+              type: 'category',
+              axisLine: {
+                show: false,
+              },
+              axisTick: {
+                show: false,
+              },
+              axisLabel: {
+                show: true,
+                formatter: function(val) {
+                  var strs = val.split(''); //字符串数组
+                  var str = ''
+                  for (var i = 0, s; s = strs[i++];) { //遍历字符串数组
+                    str += s;
+                    if (!(i % 2)) str += '\n'; //按需要求余
+                  }
+                  return str
+                },
+                textStyle: {
+                  color: '#B2B2B2',
+                  fontSize: 12,
+                },
+              },
+              splitLine: {
+                show: false,
+                lineStyle: {
+                  color: '#fff',
+                  width: 1,
+                },
+              },
+              data: Xdata,
+            }],
+            yAxis: [{
+              type: 'value',
+              // name: "(万)",
+              nameTextStyle: {
+                color: "#fff",
+              },
+              axisLine: {
+                show: false
+              },
+              axisTick: {
+                show: false
+              },
+              axisLabel: {
+                show: true,
+                textStyle: {
+                  color: '#fff',
+                  fontSize: 12,
+                },
+              }
+            }]
+          },
+          options: []
+        };
+        for (var i = 0; i < timeLineData.length; i++) {
+          option.options.push({
+            series: [{
+              type: 'line',
+              barWidth: '20%',
+              data: one[timeLineData[i]],
+            },{
+              type: 'line',
+              barWidth: '20%',
+              data: two[timeLineData[i]],
+            },{
+              type: 'line',
+              barWidth: '20%',
+              data: three[timeLineData[i]],
+            }]
+          });
+        }
+
+        if(option){
+          myChart.setOption(option);
+        }
+      }
+    }
+  }
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .chart-container {
+    width: 100%;
+    height: auto;
+    position: relative;
+    padding-bottom: 10px;
+    display: flex;
+    flex-direction: column;
+  }
+</style>

src/views/bigdata/chart-pollutionYear.vue

@@ -0,0 +1,232 @@
+<!-- **************************************NO.18 污染源*************************************** -->
+<template>
+  <div class="chart-container">
+    <div id="pollutionYear" style="width: 100%; height:25vh; ">
+    </div>
+  </div>
+</template>
+
+<script>
+  import { findPollutionByYear } from '@/api/bigdata'
+  import * as echarts from 'echarts';
+  export default {
+    name: 'chart-pollutionYear',
+    data() {
+      return {
+        count: 0
+      }
+    },
+    mounted() {
+      this.findPollutionByYear();
+    },
+
+    methods: {
+      findPollutionByYear() {
+        let year = new Date().getFullYear();
+        let param = {year: year};
+        // const yearArr = [2021, 2022, 2023, 2024, 2025];
+        const yearArr = [year - 2, year - 1, year, year + 1, year + 2];
+        // let currentIndex = 1;//默认选择年份
+        let currentIndex = 3;//默认选择年份
+        let currentYear = yearArr[currentIndex];//默认年份
+        findPollutionByYear(param).then(res => {
+          console.log("findDataByYear", res)
+          this.myEcharts(res);
+        })
+        let res = {};
+        let data = [[]];
+        data[0] = [{"jdName": "a", "year": "2021"}, {"jdName": "2021"}, {"jdName": "2021"}, {"jdName": "2021"}]
+        data[1] = [{"jdName": "a", "year": "2022"}, {"jdName": "2022"}, {"jdName": "2022"}, {"jdName": "2022"}]
+        data[2] = [{"jdName": "a", "year": "2023"}, {"jdName": "2023"}, {"jdName": "2023"}, {"jdName": "2023"}]
+        data[3] = [{"jdName": "a", "year": "2024"}, {"jdName": "2024"}, {"jdName": "2024"}, {"jdName": "2024"}]
+        data[4] = [{"jdName": "a", "year": "2025"}, {"jdName": "2025"}, {"jdName": "2025"}, {"jdName": "2025"}]
+        res.data = data;
+        // this.myEcharts(res);
+      },
+      myEcharts(res) {
+        var myChart = echarts.init(document.getElementById('pollutionYear'));
+        var Xdata = ["01","02","03","04","05","06","07","08","09","10",'11','12'];
+        var one = {
+          2019: [589, 259, 262, 324, 232, 176, 196, 214, 133, 370,309,293, 143],
+          2020: [511, 315, 139, 375, 204, 352, 163, 258, 385, 209,309,293, 143],
+          2021: [527, 210, 328, 292, 241, 110, 130, 185, 392, 392,309,293, 143],
+          2022: [500, 350, 300, 250, 200, 150, 100, 150, 200, 250,309,293, 143],
+          2023: [580, 128, 255, 254, 313, 143, 360, 343, 338, 163,309,293, 143]
+        };
+        var two = {
+          2019: [76, 29, 22, 34, 22, 176, 196, 214, 133, 370,309,293, 143],
+          2020: [51, 35, 19, 35, 24, 352, 163, 258, 385, 209,309,293, 143],
+          2021: [57, 20, 38, 22, 21, 110, 130, 185, 392, 392,309,293, 143],
+          2022: [50, 30, 30, 20, 20, 150, 100, 150, 200, 250,309,293, 143],
+          2023: [50, 18, 25, 24, 33, 143, 360, 343, 338, 163,309,293, 143]
+        };
+        var three = {
+          2019: [589, 259, 262, 324, 22, 17, 196, 24, 13, 370,309,293, 143],
+          2020: [511, 315, 139, 375, 24, 35, 163, 28, 35, 209,39,293, 143],
+          2021: [527, 210, 328, 292, 21, 11, 130, 15, 32, 392,39,293, 143],
+          2022: [500, 350, 300, 250, 20, 15, 100, 10, 20, 250,39,293, 143],
+          2023: [580, 128, 255, 254, 33, 14, 360, 33, 338, 163,39,293, 143]
+        };
+        one = res.data.one;
+        two = res.data.two;
+        three = res.data.three;
+        //图表月份
+        let year = new Date().getFullYear();
+        // var timeLineData = [2019, 2020, 2021, 2022, 2023];
+        var timeLineData = [year - 4, year - 3, year - 2, year - 1, year];
+        var option = {
+          baseOption: {
+            backgroundColor: "#061740",
+            timeline: {
+              show: true,
+              axisType: 'category',
+              tooltip: {
+                show: true,
+                formatter: function(params) {
+                  return params.name + '月份数据统计';
+                }
+              },
+              autoPlay: true,
+              currentIndex: 0,
+              playInterval: 5000,
+              label: {
+                normal: {
+                  show: true,
+                  color: '#20dbfd',
+                  interval: 'auto',
+                  formatter: function(params) {
+                    return params
+                  }
+                },
+              },
+              lineStyle: {
+                show: true,
+                color: '#20dbfd'
+              },
+              itemStyle: {
+                show: true,
+                color: '#20dbfd'
+              },
+              controlStyle: {
+                show: true,
+                color: '#20dbfd',
+                borderColor: '#20dbfd'
+              },
+              left: "2",
+              right: "10",
+              bottom: '0',
+              padding: [5, 0],
+              data: timeLineData,
+            },
+            title: {
+              textStyle: {
+                color: '#fff',
+                fontSize: 16,
+              },
+            },
+            tooltip: {
+              show: true,
+              trigger: 'axis',
+              axisPointer: {
+                type: 'shadow',
+              }
+            },
+            grid: {
+              top: "14%",
+              left: "3%",
+              right: "5%",
+              bottom: "15%",
+              containLabel: true
+            },
+            xAxis: [{
+              type: 'category',
+              axisLine: {
+                show: false,
+              },
+              axisTick: {
+                show: false,
+              },
+              axisLabel: {
+                show: true,
+                formatter: function(val) {
+                  var strs = val.split(''); //字符串数组
+                  var str = ''
+                  for (var i = 0, s; s = strs[i++];) { //遍历字符串数组
+                    str += s;
+                    if (!(i % 2)) str += '\n'; //按需要求余
+                  }
+                  return str
+                },
+                textStyle: {
+                  color: '#B2B2B2',
+                  fontSize: 12,
+                },
+              },
+              splitLine: {
+                show: false,
+                lineStyle: {
+                  color: '#fff',
+                  width: 1,
+                },
+              },
+              data: Xdata,
+            }],
+            yAxis: [{
+              type: 'value',
+              // name: "(万)",
+              nameTextStyle: {
+                color: "#fff",
+              },
+              axisLine: {
+                show: false
+              },
+              axisTick: {
+                show: false
+              },
+              axisLabel: {
+                show: true,
+                textStyle: {
+                  color: '#fff',
+                  fontSize: 12,
+                },
+              }
+            }]
+          },
+          options: []
+        };
+        for (var i = 0; i < timeLineData.length; i++) {
+          option.options.push({
+            series: [{
+              type: 'line',
+              barWidth: '20%',
+              data: one[timeLineData[i]],
+            },{
+              type: 'line',
+              barWidth: '20%',
+              data: two[timeLineData[i]],
+            },{
+              type: 'line',
+              barWidth: '20%',
+              data: three[timeLineData[i]],
+            }]
+          });
+        }
+
+        if(option){
+          myChart.setOption(option);
+        }
+      }
+    }
+  }
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .chart-container {
+    width: 100%;
+    height: auto;
+    position: relative;
+    padding-bottom: 10px;
+    display: flex;
+    flex-direction: column;
+  }
+</style>

src/views/bigdata/chart-soilMonth.vue

@@ -0,0 +1,230 @@
+<!-- **************************************NO.18 土壤*************************************** -->
+<template>
+  <div class="chart-container">
+    <div id="soilMonth" style="width: 100%; height:25vh; ">
+    </div>
+  </div>
+</template>
+
+<script>
+  import { findSoilByMonth } from '@/api/bigdata'
+  import * as echarts from 'echarts';
+  export default {
+    name: 'chart-soilMonth',
+    data() {
+      return {
+        count: 0
+      }
+    },
+    mounted() {
+      this.findSoilByMonth();
+    },
+
+    methods: {
+      findSoilByMonth() {
+        let year = new Date().getFullYear();
+        let param = {year: year};
+        // const yearArr = [2021, 2022, 2023, 2024, 2025];
+        const yearArr = [year - 2, year - 1, year, year + 1, year + 2];
+        // let currentIndex = 1;//默认选择年份
+        let currentIndex = 3;//默认选择年份
+        let currentYear = yearArr[currentIndex];//默认年份
+        findSoilByMonth(param).then(res => {
+          console.log("findDataByMonth", res);
+          this.myEcharts(res);
+        })
+        let res = {};
+        let data = [[]];
+        data[0] = [{"jdName": "a", "year": "2021"}, {"jdName": "2021"}, {"jdName": "2021"}, {"jdName": "2021"}]
+        data[1] = [{"jdName": "a", "year": "2022"}, {"jdName": "2022"}, {"jdName": "2022"}, {"jdName": "2022"}]
+        data[2] = [{"jdName": "a", "year": "2023"}, {"jdName": "2023"}, {"jdName": "2023"}, {"jdName": "2023"}]
+        data[3] = [{"jdName": "a", "year": "2024"}, {"jdName": "2024"}, {"jdName": "2024"}, {"jdName": "2024"}]
+        data[4] = [{"jdName": "a", "year": "2025"}, {"jdName": "2025"}, {"jdName": "2025"}, {"jdName": "2025"}]
+        res.data = data;
+        // this.myEcharts(res);
+      },
+      myEcharts(res) {
+        var myChart = echarts.init(document.getElementById('soilMonth'));
+        var Xdata = ["01","02","03","04","05","06","07","08","09","10",'11','12','13','14','15','16','17','18','19','20','21','22','23','24','25','26','27','28','29','30','31'];
+        var one = {
+          2019: [589, 259, 262, 324, 232, 176, 196, 214, 133, 370,309,293, 143],
+          2020: [511, 315, 139, 375, 204, 352, 163, 258, 385, 209,309,293, 143],
+          2021: [527, 210, 328, 292, 241, 110, 130, 185, 392, 392,309,293, 143],
+          2022: [500, 350, 300, 250, 200, 150, 100, 150, 200, 250,309,293, 143],
+          2023: [580, 128, 255, 254, 313, 143, 360, 343, 338, 163,309,293, 143]
+        };
+        var two = {
+          2019: [76, 29, 22, 34, 22, 176, 196, 214, 133, 370,309,293, 143],
+          2020: [51, 35, 19, 35, 24, 352, 163, 258, 385, 209,309,293, 143],
+          2021: [57, 20, 38, 22, 21, 110, 130, 185, 392, 392,309,293, 143],
+          2022: [50, 30, 30, 20, 20, 150, 100, 150, 200, 250,309,293, 143],
+          2023: [50, 18, 25, 24, 33, 143, 360, 343, 338, 163,309,293, 143]
+        };
+        var three = {
+          2019: [589, 259, 262, 324, 22, 17, 196, 24, 13, 370,309,293, 143],
+          2020: [511, 315, 139, 375, 24, 35, 163, 28, 35, 209,39,293, 143],
+          2021: [527, 210, 328, 292, 21, 11, 130, 15, 32, 392,39,293, 143],
+          2022: [500, 350, 300, 250, 20, 15, 100, 10, 20, 250,39,293, 143],
+          2023: [580, 128, 255, 254, 33, 14, 360, 33, 338, 163,39,293, 143]
+        };
+        one = res.data.one;
+        two = res.data.two;
+        three = res.data.three;
+        //图表月份
+        var timeLineData = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
+        var option = {
+          baseOption: {
+            backgroundColor: "#061740",
+            timeline: {
+              show: true,
+              axisType: 'category',
+              tooltip: {
+                show: true,
+                formatter: function(params) {
+                  return params.name + '月份数据统计';
+                }
+              },
+              autoPlay: true,
+              currentIndex: 0,
+              playInterval: 5000,
+              label: {
+                normal: {
+                  show: true,
+                  color: '#20dbfd',
+                  interval: 'auto',
+                  formatter: function(params) {
+                    return params
+                  }
+                },
+              },
+              lineStyle: {
+                show: true,
+                color: '#20dbfd'
+              },
+              itemStyle: {
+                show: true,
+                color: '#20dbfd'
+              },
+              controlStyle: {
+                show: true,
+                color: '#20dbfd',
+                borderColor: '#20dbfd'
+              },
+              left: "2",
+              right: "10",
+              bottom: '0',
+              padding: [5, 0],
+              data: timeLineData,
+            },
+            title: {
+              textStyle: {
+                color: '#fff',
+                fontSize: 16,
+              },
+            },
+            tooltip: {
+              show: true,
+              trigger: 'axis',
+              axisPointer: {
+                type: 'shadow',
+              }
+            },
+            grid: {
+              top: "14%",
+              left: "3%",
+              right: "5%",
+              bottom: "15%",
+              containLabel: true
+            },
+            xAxis: [{
+              type: 'category',
+              axisLine: {
+                show: false,
+              },
+              axisTick: {
+                show: false,
+              },
+              axisLabel: {
+                show: true,
+                formatter: function(val) {
+                  var strs = val.split(''); //字符串数组
+                  var str = ''
+                  for (var i = 0, s; s = strs[i++];) { //遍历字符串数组
+                    str += s;
+                    if (!(i % 2)) str += '\n'; //按需要求余
+                  }
+                  return str
+                },
+                textStyle: {
+                  color: '#B2B2B2',
+                  fontSize: 12,
+                },
+              },
+              splitLine: {
+                show: false,
+                lineStyle: {
+                  color: '#fff',
+                  width: 1,
+                },
+              },
+              data: Xdata,
+            }],
+            yAxis: [{
+              type: 'value',
+              // name: "(万)",
+              nameTextStyle: {
+                color: "#fff",
+              },
+              axisLine: {
+                show: false
+              },
+              axisTick: {
+                show: false
+              },
+              axisLabel: {
+                show: true,
+                textStyle: {
+                  color: '#fff',
+                  fontSize: 12,
+                },
+              }
+            }]
+          },
+          options: []
+        };
+        for (var i = 0; i < timeLineData.length; i++) {
+          option.options.push({
+            series: [{
+              type: 'line',
+              barWidth: '20%',
+              data: one[timeLineData[i]],
+            },{
+              type: 'line',
+              barWidth: '20%',
+              data: two[timeLineData[i]],
+            },{
+              type: 'line',
+              barWidth: '20%',
+              data: three[timeLineData[i]],
+            }]
+          });
+        }
+
+        if(option){
+          myChart.setOption(option);
+        }
+      }
+    }
+  }
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .chart-container {
+    width: 100%;
+    height: auto;
+    position: relative;
+    padding-bottom: 10px;
+    display: flex;
+    flex-direction: column;
+  }
+</style>

src/views/bigdata/chart-soilYear.vue

@@ -0,0 +1,232 @@
+<!-- **************************************NO.18 土壤*************************************** -->
+<template>
+  <div class="chart-container">
+    <div id="soilYear" style="width: 100%; height:25vh; ">
+    </div>
+  </div>
+</template>
+
+<script>
+  import { findSoilByYear } from '@/api/bigdata'
+  import * as echarts from 'echarts';
+  export default {
+    name: 'chart-soilYear',
+    data() {
+      return {
+        count: 0
+      }
+    },
+    mounted() {
+      this.findSoilByYear();
+    },
+
+    methods: {
+      findSoilByYear() {
+        let year = new Date().getFullYear();
+        let param = {year: year};
+        // const yearArr = [2021, 2022, 2023, 2024, 2025];
+        const yearArr = [year - 2, year - 1, year, year + 1, year + 2];
+        // let currentIndex = 1;//默认选择年份
+        let currentIndex = 3;//默认选择年份
+        let currentYear = yearArr[currentIndex];//默认年份
+        findSoilByYear(param).then(res => {
+          console.log("findDataByYear", res)
+          this.myEcharts(res);
+        })
+        let res = {};
+        let data = [[]];
+        data[0] = [{"jdName": "a", "year": "2021"}, {"jdName": "2021"}, {"jdName": "2021"}, {"jdName": "2021"}]
+        data[1] = [{"jdName": "a", "year": "2022"}, {"jdName": "2022"}, {"jdName": "2022"}, {"jdName": "2022"}]
+        data[2] = [{"jdName": "a", "year": "2023"}, {"jdName": "2023"}, {"jdName": "2023"}, {"jdName": "2023"}]
+        data[3] = [{"jdName": "a", "year": "2024"}, {"jdName": "2024"}, {"jdName": "2024"}, {"jdName": "2024"}]
+        data[4] = [{"jdName": "a", "year": "2025"}, {"jdName": "2025"}, {"jdName": "2025"}, {"jdName": "2025"}]
+        res.data = data;
+        // this.myEcharts(res);
+      },
+      myEcharts(res) {
+        var myChart = echarts.init(document.getElementById('soilYear'));
+        var Xdata = ["01","02","03","04","05","06","07","08","09","10",'11','12'];
+        var one = {
+          2019: [589, 259, 262, 324, 232, 176, 196, 214, 133, 370,309,293, 143],
+          2020: [511, 315, 139, 375, 204, 352, 163, 258, 385, 209,309,293, 143],
+          2021: [527, 210, 328, 292, 241, 110, 130, 185, 392, 392,309,293, 143],
+          2022: [500, 350, 300, 250, 200, 150, 100, 150, 200, 250,309,293, 143],
+          2023: [580, 128, 255, 254, 313, 143, 360, 343, 338, 163,309,293, 143]
+        };
+        var two = {
+          2019: [76, 29, 22, 34, 22, 176, 196, 214, 133, 370,309,293, 143],
+          2020: [51, 35, 19, 35, 24, 352, 163, 258, 385, 209,309,293, 143],
+          2021: [57, 20, 38, 22, 21, 110, 130, 185, 392, 392,309,293, 143],
+          2022: [50, 30, 30, 20, 20, 150, 100, 150, 200, 250,309,293, 143],
+          2023: [50, 18, 25, 24, 33, 143, 360, 343, 338, 163,309,293, 143]
+        };
+        var three = {
+          2019: [589, 259, 262, 324, 22, 17, 196, 24, 13, 370,309,293, 143],
+          2020: [511, 315, 139, 375, 24, 35, 163, 28, 35, 209,39,293, 143],
+          2021: [527, 210, 328, 292, 21, 11, 130, 15, 32, 392,39,293, 143],
+          2022: [500, 350, 300, 250, 20, 15, 100, 10, 20, 250,39,293, 143],
+          2023: [580, 128, 255, 254, 33, 14, 360, 33, 338, 163,39,293, 143]
+        };
+        one = res.data.one;
+        two = res.data.two;
+        three = res.data.three;
+        //图表月份
+        let year = new Date().getFullYear();
+        // var timeLineData = [2019, 2020, 2021, 2022, 2023];
+        var timeLineData = [year - 4, year - 3, year - 2, year - 1, year];
+        var option = {
+          baseOption: {
+            backgroundColor: "#061740",
+            timeline: {
+              show: true,
+              axisType: 'category',
+              tooltip: {
+                show: true,
+                formatter: function(params) {
+                  return params.name + '月份数据统计';
+                }
+              },
+              autoPlay: true,
+              currentIndex: 0,
+              playInterval: 5000,
+              label: {
+                normal: {
+                  show: true,
+                  color: '#20dbfd',
+                  interval: 'auto',
+                  formatter: function(params) {
+                    return params
+                  }
+                },
+              },
+              lineStyle: {
+                show: true,
+                color: '#20dbfd'
+              },
+              itemStyle: {
+                show: true,
+                color: '#20dbfd'
+              },
+              controlStyle: {
+                show: true,
+                color: '#20dbfd',
+                borderColor: '#20dbfd'
+              },
+              left: "2",
+              right: "10",
+              bottom: '0',
+              padding: [5, 0],
+              data: timeLineData,
+            },
+            title: {
+              textStyle: {
+                color: '#fff',
+                fontSize: 16,
+              },
+            },
+            tooltip: {
+              show: true,
+              trigger: 'axis',
+              axisPointer: {
+                type: 'shadow',
+              }
+            },
+            grid: {
+              top: "14%",
+              left: "3%",
+              right: "5%",
+              bottom: "15%",
+              containLabel: true
+            },
+            xAxis: [{
+              type: 'category',
+              axisLine: {
+                show: false,
+              },
+              axisTick: {
+                show: false,
+              },
+              axisLabel: {
+                show: true,
+                formatter: function(val) {
+                  var strs = val.split(''); //字符串数组
+                  var str = ''
+                  for (var i = 0, s; s = strs[i++];) { //遍历字符串数组
+                    str += s;
+                    if (!(i % 2)) str += '\n'; //按需要求余
+                  }
+                  return str
+                },
+                textStyle: {
+                  color: '#B2B2B2',
+                  fontSize: 12,
+                },
+              },
+              splitLine: {
+                show: false,
+                lineStyle: {
+                  color: '#fff',
+                  width: 1,
+                },
+              },
+              data: Xdata,
+            }],
+            yAxis: [{
+              type: 'value',
+              // name: "(万)",
+              nameTextStyle: {
+                color: "#fff",
+              },
+              axisLine: {
+                show: false
+              },
+              axisTick: {
+                show: false
+              },
+              axisLabel: {
+                show: true,
+                textStyle: {
+                  color: '#fff',
+                  fontSize: 12,
+                },
+              }
+            }]
+          },
+          options: []
+        };
+        for (var i = 0; i < timeLineData.length; i++) {
+          option.options.push({
+            series: [{
+              type: 'line',
+              barWidth: '20%',
+              data: one[timeLineData[i]],
+            },{
+              type: 'line',
+              barWidth: '20%',
+              data: two[timeLineData[i]],
+            },{
+              type: 'line',
+              barWidth: '20%',
+              data: three[timeLineData[i]],
+            }]
+          });
+        }
+
+        if(option){
+          myChart.setOption(option);
+        }
+      }
+    }
+  }
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .chart-container {
+    width: 100%;
+    height: auto;
+    position: relative;
+    padding-bottom: 10px;
+    display: flex;
+    flex-direction: column;
+  }
+</style>

src/views/bigdata/chart-waterqualityMonth.vue

@@ -0,0 +1,230 @@
+<!-- **************************************NO.18 水质监测*************************************** -->
+<template>
+  <div class="chart-container">
+    <div id="waterqualityMonth" style="width: 100%; height:25vh; ">
+    </div>
+  </div>
+</template>
+
+<script>
+  import { findWaterqualityByMonth } from '@/api/bigdata'
+  import * as echarts from 'echarts';
+  export default {
+    name: 'chart-waterqualityMonth',
+    data() {
+      return {
+        count: 0
+      }
+    },
+    mounted() {
+      this.findWaterqualityByMonth();
+    },
+
+    methods: {
+      findWaterqualityByMonth() {
+        let year = new Date().getFullYear();
+        let param = {year: year};
+        // const yearArr = [2021, 2022, 2023, 2024, 2025];
+        const yearArr = [year - 2, year - 1, year, year + 1, year + 2];
+        // let currentIndex = 1;//默认选择年份
+        let currentIndex = 3;//默认选择年份
+        let currentYear = yearArr[currentIndex];//默认年份
+        findWaterqualityByMonth(param).then(res => {
+          console.log("findDataByMonth", res);
+          this.myEcharts(res);
+        })
+        let res = {};
+        let data = [[]];
+        data[0] = [{"jdName": "a", "year": "2021"}, {"jdName": "2021"}, {"jdName": "2021"}, {"jdName": "2021"}]
+        data[1] = [{"jdName": "a", "year": "2022"}, {"jdName": "2022"}, {"jdName": "2022"}, {"jdName": "2022"}]
+        data[2] = [{"jdName": "a", "year": "2023"}, {"jdName": "2023"}, {"jdName": "2023"}, {"jdName": "2023"}]
+        data[3] = [{"jdName": "a", "year": "2024"}, {"jdName": "2024"}, {"jdName": "2024"}, {"jdName": "2024"}]
+        data[4] = [{"jdName": "a", "year": "2025"}, {"jdName": "2025"}, {"jdName": "2025"}, {"jdName": "2025"}]
+        res.data = data;
+        // this.myEcharts(res);
+      },
+      myEcharts(res) {
+        var myChart = echarts.init(document.getElementById('waterqualityMonth'));
+        var Xdata = ["01","02","03","04","05","06","07","08","09","10",'11','12','13','14','15','16','17','18','19','20','21','22','23','24','25','26','27','28','29','30','31'];
+        var one = {
+          2019: [589, 259, 262, 324, 232, 176, 196, 214, 133, 370,309,293, 143],
+          2020: [511, 315, 139, 375, 204, 352, 163, 258, 385, 209,309,293, 143],
+          2021: [527, 210, 328, 292, 241, 110, 130, 185, 392, 392,309,293, 143],
+          2022: [500, 350, 300, 250, 200, 150, 100, 150, 200, 250,309,293, 143],
+          2023: [580, 128, 255, 254, 313, 143, 360, 343, 338, 163,309,293, 143]
+        };
+        var two = {
+          2019: [76, 29, 22, 34, 22, 176, 196, 214, 133, 370,309,293, 143],
+          2020: [51, 35, 19, 35, 24, 352, 163, 258, 385, 209,309,293, 143],
+          2021: [57, 20, 38, 22, 21, 110, 130, 185, 392, 392,309,293, 143],
+          2022: [50, 30, 30, 20, 20, 150, 100, 150, 200, 250,309,293, 143],
+          2023: [50, 18, 25, 24, 33, 143, 360, 343, 338, 163,309,293, 143]
+        };
+        var three = {
+          2019: [589, 259, 262, 324, 22, 17, 196, 24, 13, 370,309,293, 143],
+          2020: [511, 315, 139, 375, 24, 35, 163, 28, 35, 209,39,293, 143],
+          2021: [527, 210, 328, 292, 21, 11, 130, 15, 32, 392,39,293, 143],
+          2022: [500, 350, 300, 250, 20, 15, 100, 10, 20, 250,39,293, 143],
+          2023: [580, 128, 255, 254, 33, 14, 360, 33, 338, 163,39,293, 143]
+        };
+        one = res.data.one;
+        two = res.data.two;
+        three = res.data.three;
+        //图表月份
+        var timeLineData = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
+        var option = {
+          baseOption: {
+            backgroundColor: "#061740",
+            timeline: {
+              show: true,
+              axisType: 'category',
+              tooltip: {
+                show: true,
+                formatter: function(params) {
+                  return params.name + '月份数据统计';
+                }
+              },
+              autoPlay: true,
+              currentIndex: 0,
+              playInterval: 5000,
+              label: {
+                normal: {
+                  show: true,
+                  color: '#20dbfd',
+                  interval: 'auto',
+                  formatter: function(params) {
+                    return params
+                  }
+                },
+              },
+              lineStyle: {
+                show: true,
+                color: '#20dbfd'
+              },
+              itemStyle: {
+                show: true,
+                color: '#20dbfd'
+              },
+              controlStyle: {
+                show: true,
+                color: '#20dbfd',
+                borderColor: '#20dbfd'
+              },
+              left: "2",
+              right: "10",
+              bottom: '0',
+              padding: [5, 0],
+              data: timeLineData,
+            },
+            title: {
+              textStyle: {
+                color: '#fff',
+                fontSize: 16,
+              },
+            },
+            tooltip: {
+              show: true,
+              trigger: 'axis',
+              axisPointer: {
+                type: 'shadow',
+              }
+            },
+            grid: {
+              top: "14%",
+              left: "3%",
+              right: "5%",
+              bottom: "15%",
+              containLabel: true
+            },
+            xAxis: [{
+              type: 'category',
+              axisLine: {
+                show: false,
+              },
+              axisTick: {
+                show: false,
+              },
+              axisLabel: {
+                show: true,
+                formatter: function(val) {
+                  var strs = val.split(''); //字符串数组
+                  var str = ''
+                  for (var i = 0, s; s = strs[i++];) { //遍历字符串数组
+                    str += s;
+                    if (!(i % 2)) str += '\n'; //按需要求余
+                  }
+                  return str
+                },
+                textStyle: {
+                  color: '#B2B2B2',
+                  fontSize: 12,
+                },
+              },
+              splitLine: {
+                show: false,
+                lineStyle: {
+                  color: '#fff',
+                  width: 1,
+                },
+              },
+              data: Xdata,
+            }],
+            yAxis: [{
+              type: 'value',
+              // name: "(万)",
+              nameTextStyle: {
+                color: "#fff",
+              },
+              axisLine: {
+                show: false
+              },
+              axisTick: {
+                show: false
+              },
+              axisLabel: {
+                show: true,
+                textStyle: {
+                  color: '#fff',
+                  fontSize: 12,
+                },
+              }
+            }]
+          },
+          options: []
+        };
+        for (var i = 0; i < timeLineData.length; i++) {
+          option.options.push({
+            series: [{
+              type: 'line',
+              barWidth: '20%',
+              data: one[timeLineData[i]],
+            },{
+              type: 'line',
+              barWidth: '20%',
+              data: two[timeLineData[i]],
+            },{
+              type: 'line',
+              barWidth: '20%',
+              data: three[timeLineData[i]],
+            }]
+          });
+        }
+
+        if(option){
+          myChart.setOption(option);
+        }
+      }
+    }
+  }
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .chart-container {
+    width: 100%;
+    height: auto;
+    position: relative;
+    padding-bottom: 10px;
+    display: flex;
+    flex-direction: column;
+  }
+</style>

src/views/bigdata/chart-waterqualityYear.vue

@@ -0,0 +1,232 @@
+<!-- **************************************NO.18 水质监测*************************************** -->
+<template>
+  <div class="chart-container">
+    <div id="waterqualityYear" style="width: 100%; height:25vh; ">
+    </div>
+  </div>
+</template>
+
+<script>
+  import { findWaterqualityByYear } from '@/api/bigdata'
+  import * as echarts from 'echarts';
+  export default {
+    name: 'chart-waterqualityYear',
+    data() {
+      return {
+        count: 0
+      }
+    },
+    mounted() {
+      this.findWaterqualityByYear();
+    },
+
+    methods: {
+      findWaterqualityByYear() {
+        let year = new Date().getFullYear();
+        let param = {year: year};
+        // const yearArr = [2021, 2022, 2023, 2024, 2025];
+        const yearArr = [year - 2, year - 1, year, year + 1, year + 2];
+        // let currentIndex = 1;//默认选择年份
+        let currentIndex = 3;//默认选择年份
+        let currentYear = yearArr[currentIndex];//默认年份
+        findWaterqualityByYear(param).then(res => {
+          console.log("findWaterqualityByYear", res)
+          this.myEcharts(res);
+        })
+        let res = {};
+        let data = [[]];
+        data[0] = [{"jdName": "a", "year": "2021"}, {"jdName": "2021"}, {"jdName": "2021"}, {"jdName": "2021"}]
+        data[1] = [{"jdName": "a", "year": "2022"}, {"jdName": "2022"}, {"jdName": "2022"}, {"jdName": "2022"}]
+        data[2] = [{"jdName": "a", "year": "2023"}, {"jdName": "2023"}, {"jdName": "2023"}, {"jdName": "2023"}]
+        data[3] = [{"jdName": "a", "year": "2024"}, {"jdName": "2024"}, {"jdName": "2024"}, {"jdName": "2024"}]
+        data[4] = [{"jdName": "a", "year": "2025"}, {"jdName": "2025"}, {"jdName": "2025"}, {"jdName": "2025"}]
+        res.data = data;
+        // this.myEcharts(res);
+      },
+      myEcharts(res) {
+        var myChart = echarts.init(document.getElementById('waterqualityYear'));
+        var Xdata = ["01","02","03","04","05","06","07","08","09","10",'11','12'];
+        var one = {
+          2019: [589, 259, 262, 324, 232, 176, 196, 214, 133, 370,309,293, 143],
+          2020: [511, 315, 139, 375, 204, 352, 163, 258, 385, 209,309,293, 143],
+          2021: [527, 210, 328, 292, 241, 110, 130, 185, 392, 392,309,293, 143],
+          2022: [500, 350, 300, 250, 200, 150, 100, 150, 200, 250,309,293, 143],
+          2023: [580, 128, 255, 254, 313, 143, 360, 343, 338, 163,309,293, 143]
+        };
+        var two = {
+          2019: [76, 29, 22, 34, 22, 176, 196, 214, 133, 370,309,293, 143],
+          2020: [51, 35, 19, 35, 24, 352, 163, 258, 385, 209,309,293, 143],
+          2021: [57, 20, 38, 22, 21, 110, 130, 185, 392, 392,309,293, 143],
+          2022: [50, 30, 30, 20, 20, 150, 100, 150, 200, 250,309,293, 143],
+          2023: [50, 18, 25, 24, 33, 143, 360, 343, 338, 163,309,293, 143]
+        };
+        var three = {
+          2019: [589, 259, 262, 324, 22, 17, 196, 24, 13, 370,309,293, 143],
+          2020: [511, 315, 139, 375, 24, 35, 163, 28, 35, 209,39,293, 143],
+          2021: [527, 210, 328, 292, 21, 11, 130, 15, 32, 392,39,293, 143],
+          2022: [500, 350, 300, 250, 20, 15, 100, 10, 20, 250,39,293, 143],
+          2023: [580, 128, 255, 254, 33, 14, 360, 33, 338, 163,39,293, 143]
+        };
+        one = res.data.one;
+        two = res.data.two;
+        three = res.data.three;
+        //图表月份
+        let year = new Date().getFullYear();
+        // var timeLineData = [2019, 2020, 2021, 2022, 2023];
+        var timeLineData = [year - 4, year - 3, year - 2, year - 1, year];
+        var option = {
+          baseOption: {
+            backgroundColor: "#061740",
+            timeline: {
+              show: true,
+              axisType: 'category',
+              tooltip: {
+                show: true,
+                formatter: function(params) {
+                  return params.name + '月份数据统计';
+                }
+              },
+              autoPlay: true,
+              currentIndex: 0,
+              playInterval: 5000,
+              label: {
+                normal: {
+                  show: true,
+                  color: '#20dbfd',
+                  interval: 'auto',
+                  formatter: function(params) {
+                    return params
+                  }
+                },
+              },
+              lineStyle: {
+                show: true,
+                color: '#20dbfd'
+              },
+              itemStyle: {
+                show: true,
+                color: '#20dbfd'
+              },
+              controlStyle: {
+                show: true,
+                color: '#20dbfd',
+                borderColor: '#20dbfd'
+              },
+              left: "2",
+              right: "10",
+              bottom: '0',
+              padding: [5, 0],
+              data: timeLineData,
+            },
+            title: {
+              textStyle: {
+                color: '#fff',
+                fontSize: 16,
+              },
+            },
+            tooltip: {
+              show: true,
+              trigger: 'axis',
+              axisPointer: {
+                type: 'shadow',
+              }
+            },
+            grid: {
+              top: "14%",
+              left: "3%",
+              right: "5%",
+              bottom: "15%",
+              containLabel: true
+            },
+            xAxis: [{
+              type: 'category',
+              axisLine: {
+                show: false,
+              },
+              axisTick: {
+                show: false,
+              },
+              axisLabel: {
+                show: true,
+                formatter: function(val) {
+                  var strs = val.split(''); //字符串数组
+                  var str = ''
+                  for (var i = 0, s; s = strs[i++];) { //遍历字符串数组
+                    str += s;
+                    if (!(i % 2)) str += '\n'; //按需要求余
+                  }
+                  return str
+                },
+                textStyle: {
+                  color: '#B2B2B2',
+                  fontSize: 12,
+                },
+              },
+              splitLine: {
+                show: false,
+                lineStyle: {
+                  color: '#fff',
+                  width: 1,
+                },
+              },
+              data: Xdata,
+            }],
+            yAxis: [{
+              type: 'value',
+              // name: "(万)",
+              nameTextStyle: {
+                color: "#fff",
+              },
+              axisLine: {
+                show: false
+              },
+              axisTick: {
+                show: false
+              },
+              axisLabel: {
+                show: true,
+                textStyle: {
+                  color: '#fff',
+                  fontSize: 12,
+                },
+              }
+            }]
+          },
+          options: []
+        };
+        for (var i = 0; i < timeLineData.length; i++) {
+          option.options.push({
+            series: [{
+              type: 'line',
+              barWidth: '20%',
+              data: one[timeLineData[i]],
+            },{
+              type: 'line',
+              barWidth: '20%',
+              data: two[timeLineData[i]],
+            },{
+              type: 'line',
+              barWidth: '20%',
+              data: three[timeLineData[i]],
+            }]
+          });
+        }
+
+        if(option){
+          myChart.setOption(option);
+        }
+      }
+    }
+  }
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .chart-container {
+    width: 100%;
+    height: auto;
+    position: relative;
+    padding-bottom: 10px;
+    display: flex;
+    flex-direction: column;
+  }
+</style>