You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
327 lines
9.7 KiB
327 lines
9.7 KiB
import { Component, OnInit } from '@angular/core'; |
|
import { FormBuilder, FormGroup, Validators } from '@angular/forms'; |
|
import { Router } from '@angular/router' |
|
import * as echarts from 'echarts'; |
|
@Component({ |
|
selector: 'app-criminal-records-admin', |
|
templateUrl: './criminal-records-admin.component.html', |
|
styleUrls: ['./criminal-records-admin.component.scss'] |
|
}) |
|
export class CriminalRecordsAdminComponent implements OnInit { |
|
|
|
validateForm!: FormGroup; |
|
constructor(private fb: FormBuilder, private router: Router) { } |
|
|
|
|
|
|
|
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' |
|
} |
|
}; |
|
baroption2 = { |
|
xAxis: { |
|
type: 'value', |
|
show: false |
|
}, |
|
yAxis: { |
|
type: 'category', |
|
data: ['北京市第十九加油站', '北京市第十九加油站', '北京市第十九加油站', '北京市第十九加油站', '北京市第十九加油站', '北京市第十九加油站', '北京市第十九加油站', '北京市第十九加油站', '北京市第十九加油站', '北京市第十九加油站'], |
|
axisLine: { |
|
show: false, |
|
lineStyle: { |
|
color: '#91CCFF', |
|
} |
|
}, |
|
axisTick: {//刻度线 |
|
show: false |
|
}, |
|
axisLabel: { |
|
formatter: function (value, index) { |
|
// 格式化成月/日，只在第一个刻度显示年份 |
|
return '{s|·}' + `{a|${value}}`; |
|
}, |
|
rich: { |
|
a: { |
|
color: '#C4E2FC', |
|
padding: [0, 0, 0, 8], |
|
}, |
|
s: { |
|
color: '#fff', |
|
borderWidth: 1, |
|
borderColor: '#23D9FF', |
|
backgroundColor: '#fff', |
|
width: 4, |
|
height: 4, |
|
shadowBlur: 3, |
|
shadowColor: "#fff" |
|
} |
|
} |
|
} |
|
|
|
}, |
|
series: |
|
{ |
|
label: { |
|
// 柱图头部显示值 |
|
show: true, |
|
position: "right", |
|
color: "#fff", |
|
fontSize: 12, |
|
formatter: '{c}', |
|
offset:[6,0] |
|
}, |
|
data: [40, 36, 30, 25, 19, 15, 14, 11, 10, 8].reverse(), |
|
type: 'bar', |
|
itemStyle: { |
|
color: { |
|
type: 'linear', |
|
x: 0, |
|
y: 0, |
|
x2: 1, |
|
y2: 0, |
|
colorStops: [{ |
|
offset: 0, color: '#063d72' // 0% 处的颜色 |
|
}, { |
|
offset: 1, color: '#FF9963' // 100% 处的颜色 |
|
}], |
|
global: false // 缺省为 false |
|
} |
|
}, |
|
barWidth: '36%', |
|
|
|
} |
|
, |
|
grid: { |
|
left: '138px', |
|
right: '60px', |
|
bottom: '3px', |
|
top: '20px' |
|
} |
|
} |
|
ngOnInit(): void { |
|
this.validateForm = this.fb.group({ |
|
level: [null], |
|
type: [null], |
|
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); |
|
} |
|
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; |
|
} |
|
submitForm(): void { |
|
for (const i in this.validateForm.controls) { |
|
this.validateForm.controls[i].markAsDirty(); |
|
this.validateForm.controls[i].updateValueAndValidity(); |
|
} |
|
} |
|
resetForm(e: MouseEvent): void { |
|
e.preventDefault(); |
|
this.validateForm.reset(); |
|
for (const key in this.validateForm.controls) { |
|
this.validateForm.controls[key].markAsPristine(); |
|
this.validateForm.controls[key].updateValueAndValidity(); |
|
} |
|
} |
|
|
|
|
|
list: any = [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1] |
|
look() { |
|
this.router.navigate(['home/records/petrolStation']) |
|
} |
|
|
|
|
|
selectedType = '分布' |
|
selectedRankingType = '站点排名' |
|
echartClick(type) { |
|
this.selectedType = type |
|
this.mybarChart.dispose() |
|
this.mybarChart = echarts.init(document.getElementById('barchart')); |
|
if(type == '排名'){ |
|
this.mybarChart.setOption(this.baroption2); |
|
}else{ |
|
this.mybarChart.setOption(this.baroption); |
|
} |
|
|
|
} |
|
echartClick2(type) { |
|
this.selectedRankingType = type |
|
} |
|
}
|
|
|