数字资源 监测分析日统计

src/views/bigdata/bigdata.vue

@@ -165,7 +165,7 @@
           <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
             <span>监测分析日统计</span>
           </div>
-          <chartFireGrade></chartFireGrade>
+          <chartInjectionMonth></chartInjectionMonth>
         </div>
       </div>
     </div>
@@ -198,7 +198,7 @@ import chartPitG6 from './chart-waterTotal' //22 分析、、
 
 import chartFireTypeYear from './chart-fireTypeYear.vue' //25 按时间、事件类别统计事件数据（年度、月份、四类事件数量）
 import chartInjectionYear from './chart-injectionYear.vue' //26 监测分析年统计
-// import chartInjectionYear from './chart-injectionYear.vue' //27 监测分析月统计
+import chartInjectionMonth from './chart-injectionMonth.vue' //27 监测分析月统计
 
 import {getRlt} from '@/api/bigdata'
 import {
@@ -228,6 +228,7 @@ export default {
     // chartPitG6,
     chartFireTypeYear,
     chartInjectionYear,
+    chartInjectionMonth,
   },
   data() {
 

src/views/bigdata/chart-injectionMonth.vue

@@ -0,0 +1,226 @@
+<!-- **************************************NO.18 消防*************************************** -->
+<template>
+  <div class="chart-container">
+    <div id="injectionMonth" style="width: 100%; height:25vh; ">
+    </div>
+  </div>
+</template>
+
+<script>
+  import { getEventTypeYearStatistics } from '@/api/bigdata'
+  import * as echarts from 'echarts';
+  export default {
+    name: 'chart-injectionMonth',
+    data() {
+      return {
+        count: 0
+      }
+    },
+    mounted() {
+      this.getInjectionYear();
+    },
+
+    methods: {
+      getInjectionYear() {
+        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];//默认年份
+        // getInjectionYear(param).then(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('injectionMonth'));
+        var Xdata = ["01","02","03","04","05","06","07","08","09","10",'11','12','13'];
+        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]
+        };
+        //图表月份
+        var timeLineData = [2019, 2020, 2021, 2022, 2023];
+        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: "0",
+              right: "0",
+              bottom: '0',
+              padding: [15, 0],
+              data: timeLineData,
+            },
+            title: {
+              textStyle: {
+                color: '#fff',
+                fontSize: 16,
+              },
+            },
+            tooltip: {
+              show: true,
+              trigger: 'axis',
+              axisPointer: {
+                type: 'shadow',
+              }
+            },
+            grid: {
+              top: "10%",
+              left: "3%",
+              right: "7%",
+              bottom: "10%",
+              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>