数字消防 统计分析 按时间、事件类别统计事件数据（年度、月份、四类事件数量）

src/api/bigdata.js

@@ -193,6 +193,13 @@ export function getRlt(param) {
   })
 }
 
+//按时间、事件类别统计事件数据（年度、月份、四类事件数量）
+export function getEventTypeYearStatistics() {
+  return request({
+    url: '/center-resources/VisuForestCloudBigDataController/getEventTypeYearStatistics',
+    method: 'get'
+  })
+}
 
 
 

src/views/bigdata/bigdata.vue

@@ -147,6 +147,33 @@
           <chartEquipmentDistribution></chartEquipmentDistribution>
         </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>
+          <chartFireTypeYear></chartFireTypeYear>
+        </div>
+        <div class="b-con mg-b-20">
+          <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
+            <span>火险高发统计分析</span>
+          </div>
+          <chartFireIncidence></chartFireIncidence>
+        </div>
+        <div class="b-con mg-b-20 b-49">
+          <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
+            <span>火灾等级统计分析</span>
+          </div>
+          <chartFireGrade></chartFireGrade>
+        </div>
+        <div class="b-con mg-b-20 b-49">
+          <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
+            <span>火灾种类统计分析</span>
+          </div>
+          <chartFireType></chartFireType>
+        </div>
+      </div>
     </div>
 
   </div>
@@ -175,6 +202,8 @@ import chartPitG2 from './chart-firecontrol' //18 水利工程资源统计、、
 import chartPitG5 from './chart-farmtype' //21 偷钓偷捕事件分析、、
 import chartPitG6 from './chart-waterTotal' //22 分析、、
 
+import chartFireTypeYear from './chart-fireTypeYear.vue' //25 按时间、事件类别统计事件数据（年度、月份、四类事件数量）
+
 import {getRlt} from '@/api/bigdata'
 import {
   fontConfig
@@ -201,6 +230,7 @@ export default {
     chartPitG2,
     chartPitG5,
     // chartPitG6,
+    chartFireTypeYear,
   },
   data() {
 

src/views/bigdata/chart-fireTypeYear.vue

@@ -0,0 +1,116 @@
+<!-- **************************************NO.18 消防*************************************** -->
+<template>
+	<div class="chart-container">
+		<div id="fireTypeYear" style="width: 100%; height:25vh; ">
+		</div>
+	</div>
+</template>
+
+<script>
+  import { getEventTypeYearStatistics } from '@/api/bigdata'
+	import * as echarts from 'echarts';
+	export default {
+		name: 'fireTypeYear',
+		data() {
+			return {
+				count: 0
+			}
+		},
+		mounted() {
+			this.getEventTypeYearStatistics();
+		},
+
+		methods: {
+      getEventTypeYearStatistics(){
+        getEventTypeYearStatistics().then(resp => {
+          this.myEcharts(resp.data.month,resp.data.series);
+        })
+      },
+      myEcharts(xData,seriesData) {
+				var chartDom = document.getElementById('fireTypeYear');
+				var myChart = echarts.init(chartDom);
+				var option;
+				 option = {
+				    tooltip: {
+				        trigger: 'axis',
+				        axisPointer: {
+				            type: 'shadow'
+				        }
+				    },
+				    grid:{
+				        top:'15%',
+				        left:'10%',
+				        right:'10%',
+				        buttom:'15%',
+				    },
+				     xAxis: {
+				        type: 'category',
+				        axisLine: {
+				            lineStyle: {
+				                color: 'rgba(255,255,255,0.12)',
+				            },
+				        },
+				        axisLabel: {
+				            margin: 10,
+				            color: '#e2e9ff',
+                    interval: 0,
+                    rotate: 20,
+				            textStyle: {
+				                fontSize: 10
+				            },
+				        },
+				        axisTick:{
+				            show:false,
+				        },
+				         data: xData
+				    },
+				    yAxis: {
+				        nameTextStyle:{
+				            color:'#fff',
+				        },
+				        type: 'value',
+				         axisLine: {
+				             show:false,
+				            lineStyle: {
+				                color: 'rgba(255,255,255,0.12)'
+				            },
+				        },
+				        axisLabel: {
+							 show:false,
+				            formatter: '{value}',
+				            color: '#e2e9ff',
+				        },
+				         splitLine: {
+				            lineStyle: {
+				                color: 'rgba(255,255,255,0.12)'
+				            }
+				        },
+				        axisTick:{
+				            show:true,
+
+				            lineStyle:{
+				                color:'#fff',
+				            },
+				        },
+				    },
+				    series: seriesData
+				};
+				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>