统计分析-事件来源，类型统计

src/api/bigdata.js

@@ -0,0 +1,10 @@
+import request from '@/utils/request'
+
+// 事件来源，类型统计
+export function getEventSourceAndTypeStatistics(param) {
+  return request({
+    url: '/center-fire/VisuForestCloudBigDataController/getEventSourceAndTypeStatistics',
+    method: 'post',
+    data:param
+  })
+}

src/views/bigdata/chart-event.vue

@@ -1,314 +1,283 @@
 <!-- **************************************NO.2 事件类型 分类*************************************** -->
 <template>
-	<div class="chart-container">
-		<div id="event" style="width: 50%; height:21vh;">
-		</div>
-		<div id="event2" style="width: 50%; height:21vh;">
-		</div>
-	</div>
+  <div class="chart-container">
+    <div id="event" style="width: 50%; height:21vh;">
+    </div>
+    <div id="event2" style="width: 50%; height:21vh;">
+    </div>
+  </div>
 </template>
 
 <script>
-	import * as echarts from 'echarts';
-	export default {
-		name: 'event',
-		data() {
-			return {
-				count: 0
-			}
-		},
-		mounted() {
-			this.myEcharts()
-			this.myEcharts2()
+import {
+  getEventSourceAndTypeStatistics
+} from '@/api/bigdata'
 
-		},
+import * as echarts from 'echarts'
 
-		methods:{
-			// 出处 https://echarts.apache.org/examples/zh/editor.html?c=pie-borderRadius
-			//http://192.144.199.210:8080/editor/index.html?chart_id=K8nTnNyu0caN65uT
-			
-			myEcharts() {
-				
-				
-				var chartDom = document.getElementById('event');
-				var myChart = echarts.init(chartDom);
-				var color = ['#02CDFF', '#62FBE7', '#7930FF','#E148EB','#ecb935']
-				var option;
-				
-				
-				option = {
-				  color: color,
-				  tooltip: {
-				    trigger: 'item',
-					position: 'top'
-				  },
-				  series: [
-				    {
-				      name: '事件类型',
-				      type: 'pie',
-					  center:['50%','60%'],
-				      radius: ['55%', '70%'],
-				      avoidLabelOverlap: false,
-				      
-				      label: {
-				        show: false,
-				        position: 'center'
-				      },
-				      emphasis: {
-				        label: {
-				          show: true,
-				          fontSize: '12',
-				          fontWeight: 'bold'
-				        }
-				      },
-				      labelLine: {
-				        show: false
-				      },
-				      data: [
-				        { value: 1048, name: '事件1' },
-				        { value: 735, name: '事件2' },
-				        { value: 580, name: '事件3' },
-				        { value: 484, name: '事件4' },
-				        { value: 300, name: '事件5' }
-				      ]
-				    },
-					
-				  ]
-				};
-				
-				option && myChart.setOption(option);
-				
-			},
-			myEcharts2() {
-				
-				
-				var chartDom = document.getElementById('event2');
-				var myChart = echarts.init(chartDom);
-				 let dashedPic =
-				    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAM8AAAAOBAMAAAB6G1V9AAAAD1BMVEX////Kysrk5OTj4+TJycoJ0iFPAAAAG0lEQVQ4y2MYBaNgGAMTQQVFOiABhlEwCugOAMqzCykGOeENAAAAAElFTkSuQmCC';
-				let color = ['#FF8700', '#ffc300', '#00e473', '#009DFF', '#0034ff','#E148EB'];
-				var option;
-				let chartData = [
-				    {
-				        name: '双辽市',
-				        value: 40083,
-				        unit: '列',
-				    },
-				    {
-				        name: '梨树县',
-				        value: 33974,
-				        unit: '列',
-				    },
-				    {
-				        name: '伊通县',
-				        value: 15400,
-				        unit: '列',
-				    },
-				    {
-				        name: '铁东区',
-				        value: 11021,
-				        unit: '列',
-				    },
-				    {
-				        name: '铁西区',
-				        value: 30696,
-				        unit: '列',
-				    },
-				
-				];
-				let arrName = [];
-				let arrValue = [];
-				let sum = 0;
-				let pieSeries = [],
-				    lineYAxis = [];
-				
-				// 数据处理
-				chartData.forEach((v, i) => {
-				    arrName.push(v.name);
-				    arrValue.push(v.value);
-				    sum = sum + v.value;
-				});
-				
-				// 图表option整理
-				chartData.forEach((v, i) => {
-				    pieSeries.push({
-				        name: '沪昆线到达晚点情况',
-				        type: 'pie',
-				        clockWise: false,
-				        hoverAnimation: false,
-				        radius: [65 - i * 10 + '%', 66.5 - i * 10 + '%'],
-				        center: ['35%', '60%'],
-				        label: {
-				            show: false,
-				        },
-				        itemStyle: {
-				            borderRadius: 20,
-				        },
-				        data: [
-				            {
-				                value: v.value,
-				                name: v.name,
-				                 itemStyle: {
-				                    normal: {
-				                        borderWidth: 5,
-				                        borderColor:color[i]
-				                    }
-				                }
-				            },
-				            {
-				                value: sum - v.value,
-				                name: '',
-				                itemStyle: {
-				                    color: 'rgba(0,0,0,0)',
-				                },
-				            },
-				        ],
-				    });
-				    pieSeries.push({
-				        name: '',
-				        type: 'pie',
-				        silent: true,
-				        z: 1,
-				        clockWise: false, //顺时加载
-				        hoverAnimation: false, //鼠标移入变大
-				        radius: [65 - i * 10 + '%', 66.5 - i * 10 + '%'],
-				        center: ['35%', '60%'],
-				        label: {
-				            show: false,
-				        },
-				        itemStyle: {
-				            borderCap: 'round',
-				            borderJoin: 'round',
-				        },
-				        data: [
-				            {
-				                value: 7.5,
-				                itemStyle: {
-				                    color: '#E3F0FF',
-				                },
-				            },
-				            {
-				                value: 2.5,
-				                name: '',
-				                itemStyle: {
-				                    color: 'rgba(0,0,0,0)',
-				                },
-				            },
-				        ],
-				    });
-				    v.percent = ((v.value / sum) * 100).toFixed(1) + '%';
-				    lineYAxis.push({
-				        value: i,
-				        textStyle: {
-				            rich: {
-				                circle: {
-				                    color: color[i],
-				                    padding: [0, 0],
-				                },
-				            },
-				        },
-				    });
-				});
-				
-				option = {
-				    color: color,
-				    grid: {
-				        top: '20%',
-				        bottom: '45%',
-				        left: '40%',
-				        containLabel: false,
-				    },
-				    yAxis: [
-				        {
-				            type: 'category',
-				            inverse: true,
-				            axisLine: {
-				                show: false,
-				            },
-				            axisTick: {
-				                show: false,
-				            },
-				            axisLabel: {
-				                formatter: function (params) {
-				                    let item = chartData[params];
-				                    console.log(item);
-				                    return (
-				                        '{circle|●}{name|' +
-				                        item.name +
-				                        '}{bd||}{percent|' +
-				                        item.percent +
-				                        '}'
-				                    );
-				                },
-				                interval: 0,
-				                inside: true,
-				                textStyle: {
-				                    color: '#333',
-				                    fontSize: 10,
-				                    rich: {
-				                        line: {
-				                            width: 170,
-				                            height: 5,
-				                            backgroundColor: { image: dashedPic },
-				                        },
-				                        name: {
-				                            color: '#fff',
-				                            fontSize: 10,
-				                        },
-				                        bd: {
-				                            color: '#72afff',
-				                            padding: [0, 5],
-				                            fontSize: 10,
-				                        },
-				                        percent: {
-				                            color: '#5cdad0',
-				                            fontSize: 10,
-				                        },
-				                        value: {
-				                            color: '#333',
-				                            fontSize: 16,
-				                            fontWeight: 500,
-				                            padding: [0, 0, 0, 10],
-				                        },
-				                        unit: {
-				                            fontSize: 14,
-				                        },
-				                    },
-				                },
-				                show: true,
-				            },
-				            data: lineYAxis,
-				        },
-				    ],
-				    xAxis: [
-				        {
-				            show: false,
-				        },
-				    ],
-				    series: pieSeries,
-				};
-				
-				option && myChart.setOption(option);
-				
-			},
+export default {
+  name: 'event',
+  data() {
+    return {
+      year: 2022,
+      optionData: [],
+      option2Data: []
+    }
+  },
+  mounted() {
+    this.getEventSourceAndTypeStatistics()
+  },
 
+  methods: {
+    // 出处 https://echarts.apache.org/examples/zh/editor.html?c=pie-borderRadius
+    //http://192.144.199.210:8080/editor/index.html?chart_id=K8nTnNyu0caN65uT
+    getEventSourceAndTypeStatistics() {
+      let that = this
+      getEventSourceAndTypeStatistics({ day: that.year }).then(res => {
+        this.optionData=res.data.source
+        this.option2Data=res.data.type
+        that.myEcharts()
+        that.myEcharts2()
+      })
+    },
+    myEcharts() {
+      var chartDom = document.getElementById('event')
+      var myChart = echarts.init(chartDom)
+      var color = ['#02CDFF', '#62FBE7', '#7930FF', '#E148EB', '#ecb935']
+      var option
 
-		},
+      option = {
+        color: color,
+        tooltip: {
+          trigger: 'item',
+          position: 'top'
+        },
+        series: [
+          {
+            name: '事件类型',
+            type: 'pie',
+            center: ['50%', '60%'],
+            radius: ['55%', '70%'],
+            avoidLabelOverlap: false,
 
+            label: {
+              show: false,
+              position: 'center'
+            },
+            emphasis: {
+              label: {
+                show: true,
+                fontSize: '12',
+                fontWeight: 'bold'
+              }
+            },
+            labelLine: {
+              show: false
+            },
+            data: this.optionData
+          }
 
-	}
-</script>
+        ]
+      }
+      option && myChart.setOption(option)
+    },
+    myEcharts2() {
+      var chartDom = document.getElementById('event2')
+      var myChart = echarts.init(chartDom)
+      let dashedPic =
+        'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAM8AAAAOBAMAAAB6G1V9AAAAD1BMVEX////Kysrk5OTj4+TJycoJ0iFPAAAAG0lEQVQ4y2MYBaNgGAMTQQVFOiABhlEwCugOAMqzCykGOeENAAAAAElFTkSuQmCC'
+      let color = ['#FF8700', '#ffc300', '#00e473', '#009DFF', '#0034ff', '#99ff00', '#E148EB', '#E148EB', '#E148EB', '#E148EB']
+      var option
+      let chartData = this.option2Data
+      let arrName = []
+      let arrValue = []
+      let sum = 0
+      let pieSeries = [],
+        lineYAxis = []
 
-<style rel="stylesheet/scss" lang="scss" scoped>
-	.chart-container {
-		width: 100%;
-		height: auto;
-		position: relative;
-		padding-bottom: 10px;
-		display: flex;
-	}
+      // 数据处理
+      chartData.forEach((v, i) => {
+        arrName.push(v.name)
+        arrValue.push(v.value)
+        sum = sum + v.value
+      })
+
+      // 图表option整理
+      chartData.forEach((v, i) => {
+        pieSeries.push({
+          name: '沪昆线到达晚点情况',
+          type: 'pie',
+          clockWise: false,
+          hoverAnimation: false,
+          radius: [65 - i * 10 + '%', 66.5 - i * 10 + '%'],
+          center: ['35%', '60%'],
+          label: {
+            show: false
+          },
+          itemStyle: {
+            borderRadius: 20
+          },
+          data: [
+            {
+              value: v.value,
+              name: v.name,
+              itemStyle: {
+                normal: {
+                  borderWidth: 5,
+                  borderColor: color[i]
+                }
+              }
+            },
+            {
+              value: sum - v.value,
+              name: '',
+              itemStyle: {
+                color: 'rgba(0,0,0,0)'
+              }
+            }
+          ]
+        })
+        pieSeries.push({
+          name: '',
+          type: 'pie',
+          silent: true,
+          z: 1,
+          clockWise: false, //顺时加载
+          hoverAnimation: false, //鼠标移入变大
+          radius: [65 - i * 10 + '%', 66.5 - i * 10 + '%'],
+          center: ['35%', '60%'],
+          label: {
+            show: false
+          },
+          itemStyle: {
+            borderCap: 'round',
+            borderJoin: 'round'
+          },
+          data: [
+            {
+              value: 7.5,
+              itemStyle: {
+                color: '#E3F0FF'
+              }
+            },
+            {
+              value: 2.5,
+              name: '',
+              itemStyle: {
+                color: 'rgba(0,0,0,0)'
+              }
+            }
+          ]
+        })
+        v.percent = ((v.value / sum) * 100).toFixed(1) + '%'
+        lineYAxis.push({
+          value: i,
+          textStyle: {
+            rich: {
+              circle: {
+                color: color[i],
+                padding: [0, 0]
+              }
+            }
+          }
+        })
+      })
+
+      option = {
+        color: color,
+        grid: {
+          top: '20%',
+          bottom: '45%',
+          left: '40%',
+          containLabel: false
+        },
+        yAxis: [
+          {
+            type: 'category',
+            inverse: true,
+            axisLine: {
+              show: false
+            },
+            axisTick: {
+              show: false
+            },
+            axisLabel: {
+              formatter: function(params) {
+                let item = chartData[params]
+                console.log(item)
+                return (
+                  '{circle|●}{name|' +
+                  item.name +
+                  '}{bd||}{percent|' +
+                  item.percent +
+                  '}'
+                )
+              },
+              interval: 0,
+              inside: true,
+              textStyle: {
+                color: '#333',
+                fontSize: 10,
+                rich: {
+                  line: {
+                    width: 170,
+                    height: 5,
+                    backgroundColor: { image: dashedPic }
+                  },
+                  name: {
+                    color: '#fff',
+                    fontSize: 10
+                  },
+                  bd: {
+                    color: '#72afff',
+                    padding: [0, 5],
+                    fontSize: 10
+                  },
+                  percent: {
+                    color: '#5cdad0',
+                    fontSize: 10
+                  },
+                  value: {
+                    color: '#333',
+                    fontSize: 16,
+                    fontWeight: 500,
+                    padding: [0, 0, 0, 10]
+                  },
+                  unit: {
+                    fontSize: 14
+                  }
+                }
+              },
+              show: true
+            },
+            data: lineYAxis
+          }
+        ],
+        xAxis: [
+          {
+            show: false
+          }
+        ],
+        series: pieSeries
+      }
+
+      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>