|
|
|
|
@ -1,5 +1,6 @@
|
|
|
|
|
import { Component, OnInit } from '@angular/core'; |
|
|
|
|
import { FormBuilder, FormGroup, Validators } from '@angular/forms'; |
|
|
|
|
import * as echarts from 'echarts'; |
|
|
|
|
@Component({ |
|
|
|
|
selector: 'app-criminal-records', |
|
|
|
|
templateUrl: './criminal-records.component.html', |
|
|
|
|
@ -8,7 +9,120 @@ import { FormBuilder, FormGroup, Validators } from '@angular/forms';
|
|
|
|
|
export class CriminalRecordsComponent implements OnInit { |
|
|
|
|
validateForm!: FormGroup; |
|
|
|
|
constructor(private fb: FormBuilder) { } |
|
|
|
|
mybarChart: any //柱状图
|
|
|
|
|
baroption = { |
|
|
|
|
xAxis: { |
|
|
|
|
type: 'category', |
|
|
|
|
data: this.getThirtyDays(), |
|
|
|
|
axisLine: { |
|
|
|
|
show: false, |
|
|
|
|
lineStyle: { |
|
|
|
|
color: '#91CCFF' |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
axisTick: {//刻度线
|
|
|
|
|
show: false |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
yAxis: { |
|
|
|
|
type: 'value', |
|
|
|
|
nameTextStyle: { |
|
|
|
|
color: '#C4E2FC' |
|
|
|
|
}, |
|
|
|
|
splitLine: {//分割线
|
|
|
|
|
lineStyle: { |
|
|
|
|
color: ['#0f4374'], |
|
|
|
|
width: 2 |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
axisTick: {//刻度线
|
|
|
|
|
show: false |
|
|
|
|
}, |
|
|
|
|
axisLine: {//轴线
|
|
|
|
|
show: false, |
|
|
|
|
lineStyle: { |
|
|
|
|
color: '#C4E2FC' |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
series: [ |
|
|
|
|
{ |
|
|
|
|
data: [120, 200, 150, 80, 70, 110, 130, 120, 200, 150, 80, 70, 110, 130, 120, 200, 150, 80, 70, 110, 130, 120, 200, 150, 80, 70, 110, 130, 100, 101], |
|
|
|
|
type: 'bar', |
|
|
|
|
itemStyle: { |
|
|
|
|
color: { |
|
|
|
|
type: 'linear', |
|
|
|
|
x: 0, |
|
|
|
|
y: 0, |
|
|
|
|
x2: 0, |
|
|
|
|
y2: 1, |
|
|
|
|
colorStops: [{ |
|
|
|
|
offset: 0, color: '#23F0FF' // 0% 处的颜色
|
|
|
|
|
}, { |
|
|
|
|
offset: 1, color: 'rgba(35, 153, 255, 0.1)' // 100% 处的颜色
|
|
|
|
|
}], |
|
|
|
|
global: false // 缺省为 false
|
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
barWidth: '25%' |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
data: [120, 200, 150, 80, 70, 110, 130, 120, 200, 150, 80, 70, 110, 130, 120, 200, 150, 80, 70, 110, 130, 120, 200, 150, 80, 70, 110, 130, 100, 101], |
|
|
|
|
type: 'line', |
|
|
|
|
symbol: 'circle', |
|
|
|
|
symbolSize: 8, |
|
|
|
|
itemStyle: { |
|
|
|
|
color: '#fff', |
|
|
|
|
shadowColor: '#fff', |
|
|
|
|
shadowBlur: 10 |
|
|
|
|
}, |
|
|
|
|
lineStyle: { |
|
|
|
|
color: '#FFCC8A', |
|
|
|
|
width: 1 |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
], |
|
|
|
|
grid: { |
|
|
|
|
left: '36px', |
|
|
|
|
right: '30px', |
|
|
|
|
bottom: '50px', |
|
|
|
|
top: '45px' |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
getThirtyDays() { |
|
|
|
|
//获取当前日期
|
|
|
|
|
let myDate = new Date(); |
|
|
|
|
var nowY = myDate.getFullYear(); |
|
|
|
|
var nowM = myDate.getMonth() + 1; |
|
|
|
|
var nowD = myDate.getDate(); |
|
|
|
|
var enddateStr = nowY + "-" + (nowM < 10 ? "0" + nowM : nowM) + "-" + (nowD < 10 ? "0" + nowD : nowD);//当前日期
|
|
|
|
|
var enddate = new Date(enddateStr); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//获取三十天前日期
|
|
|
|
|
var lw = new Date(new Date().getTime() - 1000 * 60 * 60 * 24 * 30);//最后一个数字30可改，30天的意思
|
|
|
|
|
var lastY = lw.getFullYear(); |
|
|
|
|
var lastM = lw.getMonth() + 1; |
|
|
|
|
var lastD = lw.getDate(); |
|
|
|
|
var startdateStr = lastY + "-" + (lastM < 10 ? "0" + lastM : lastM) + "-" + (lastD < 10 ? "0" + lastD : lastD);//三十天之前日期
|
|
|
|
|
var startDate = new Date(startdateStr); |
|
|
|
|
|
|
|
|
|
const dateList = [] |
|
|
|
|
while (true) { |
|
|
|
|
startDate.setDate(startDate.getDate() + 1) |
|
|
|
|
if (startDate.getTime() <= enddate.getTime()) { |
|
|
|
|
if (startDate.getDate() < 10) { |
|
|
|
|
// startDate.getFullYear() 获取年，此处没加上年份
|
|
|
|
|
dateList.push((startDate.getMonth() + 1) + '.0' + startDate.getDate()) |
|
|
|
|
} else { |
|
|
|
|
dateList.push((startDate.getMonth() + 1) + '.' + startDate.getDate()) |
|
|
|
|
} |
|
|
|
|
} else { |
|
|
|
|
break |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
return dateList; |
|
|
|
|
} |
|
|
|
|
ngOnInit(): void { |
|
|
|
|
this.validateForm = this.fb.group({ |
|
|
|
|
level: [null], |
|
|
|
|
@ -16,6 +130,75 @@ export class CriminalRecordsComponent implements OnInit {
|
|
|
|
|
site: [null], |
|
|
|
|
datePicker: [null] |
|
|
|
|
}); |
|
|
|
|
// 基于准备好的dom，初始化echarts实例
|
|
|
|
|
let myChart = echarts.init(document.getElementById('piechart')); |
|
|
|
|
let option = { |
|
|
|
|
color: ['#FF4B65', '#23D9FF', '#608AFF', '#B2FF6D', '#FFFF99', '#C4E2FC', '#FF7F00', '#0090FF', '#FFD634', '#105597', '#FF4B65', '#23D9FF', '#71FFF5', '#B2FF6D'], |
|
|
|
|
tooltip: { |
|
|
|
|
trigger: 'item'//触发类型
|
|
|
|
|
}, |
|
|
|
|
series: [ |
|
|
|
|
{ |
|
|
|
|
// name: 'Access From',
|
|
|
|
|
type: 'pie', |
|
|
|
|
radius: [85, 112],//内半径外，外半径
|
|
|
|
|
left: '-30%', |
|
|
|
|
avoidLabelOverlap: false,//防止标签重叠策略
|
|
|
|
|
label: {//每一个标签外网延伸的引导说明
|
|
|
|
|
show: false, |
|
|
|
|
position: 'outside' |
|
|
|
|
}, |
|
|
|
|
labelLine: {//引导线
|
|
|
|
|
show: true, |
|
|
|
|
showAbove: true |
|
|
|
|
}, |
|
|
|
|
emphasis: {//中间高亮区域
|
|
|
|
|
label: { |
|
|
|
|
show: false, |
|
|
|
|
fontSize: '40', |
|
|
|
|
fontWeight: 'bold' |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
data: [ |
|
|
|
|
{ value: 26, name: '工作人员倚靠加油机或者立柱1' }, |
|
|
|
|
{ value: 86, name: '工作人员倚靠加油机或者立柱2' }, |
|
|
|
|
{ value: 34, name: '工作人员倚靠加油机或者立柱3' }, |
|
|
|
|
{ value: 55, name: '工作人员倚靠加油机或者立柱4' }, |
|
|
|
|
{ value: 60, name: '工作人员倚靠加油机或者立柱5' }, |
|
|
|
|
{ value: 26, name: '工作人员倚靠加油机或者立柱6' }, |
|
|
|
|
{ value: 86, name: '工作人员倚靠加油机或者立柱7' }, |
|
|
|
|
{ value: 34, name: '工作人员倚靠加油机或者立柱8' }, |
|
|
|
|
{ value: 55, name: '工作人员倚靠加油机或者立柱9' }, |
|
|
|
|
{ value: 60, name: '工作人员倚靠加油机或者立柱10' }, |
|
|
|
|
{ value: 26, name: '工作人员倚靠加油机或者立柱11' }, |
|
|
|
|
{ value: 86, name: '工作人员倚靠加油机或者立柱12' }, |
|
|
|
|
{ value: 34, name: '工作人员倚靠加油机或者立柱13' }, |
|
|
|
|
{ value: 55, name: '工作人员倚靠加油机或者立柱14' }, |
|
|
|
|
{ value: 60, name: '工作人员倚靠加油机或者立柱15' }, |
|
|
|
|
{ value: 26, name: '工作人员倚靠加油机或者立柱16' }, |
|
|
|
|
{ value: 86, name: '工作人员倚靠加油机或者立柱17' }, |
|
|
|
|
{ value: 34, name: '工作人员倚靠加油机或者立柱18' }, |
|
|
|
|
{ value: 55, name: '工作人员倚靠加油机或者立柱19' }, |
|
|
|
|
{ value: 60, name: '工作人员倚靠加油机或者立柱20' } |
|
|
|
|
], |
|
|
|
|
tooltip: {//鼠标移入提示
|
|
|
|
|
position: 'right', |
|
|
|
|
padding: [14, 19], |
|
|
|
|
backgroundColor: 'rgba(28, 129, 218, 0.4)', |
|
|
|
|
textStyle: { |
|
|
|
|
color: '#fff', |
|
|
|
|
fontSize: 12 |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
] |
|
|
|
|
}; |
|
|
|
|
// 绘制图表
|
|
|
|
|
myChart.setOption(option); |
|
|
|
|
|
|
|
|
|
this.mybarChart = echarts.init(document.getElementById('barchart')); |
|
|
|
|
|
|
|
|
|
this.mybarChart.setOption(this.baroption); |
|
|
|
|
} |
|
|
|
|
submitForm(): void { |
|
|
|
|
for (const i in this.validateForm.controls) { |
|
|
|
|
|
