@ -1,7 +1,11 @@
import { Component , OnInit } from '@angular/core' ; import { HttpClient } from '@angular/common/http' ;
import { Component , ElementRef , OnInit } from '@angular/core' ;
import { FormBuilder , FormGroup , Validators } from '@angular/forms' ; import { FormBuilder , FormGroup , Validators } from '@angular/forms' ;
import { Router } from '@angular/router' import { Router } from '@angular/router'
import * as echarts from 'echarts' ; import * as echarts from 'echarts' ;
import { fromEvent } from 'rxjs' ;
import { debounceTime } from 'rxjs/operators' ;
@Component ( { @Component ( {
selector : 'app-criminal-records-admin' , selector : 'app-criminal-records-admin' ,
templateUrl : './criminal-records-admin.component.html' , templateUrl : './criminal-records-admin.component.html' ,
@ -10,11 +14,72 @@ import * as echarts from 'echarts';
export class CriminalRecordsAdminComponent implements OnInit { export class CriminalRecordsAdminComponent implements OnInit {
validateForm ! : FormGroup ; validateForm ! : FormGroup ;
constructor ( private fb : FormBuilder , private router : Router ) { } constructor ( private element : ElementRef , private http : HttpClient , private fb : FormBuilder , private router : Router ) { }
//饼图
myChart
option = {
mybarChart : any //柱状图
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
}
}
}
]
} ;
//柱状图
mybarChart : any
baroption = { baroption = {
xAxis : { xAxis : {
type : 'category' , type : 'category' ,
@ -76,6 +141,9 @@ export class CriminalRecordsAdminComponent implements OnInit {
type : 'line' , type : 'line' ,
symbol : 'circle' , symbol : 'circle' ,
symbolSize : 8 , symbolSize : 8 ,
label : {
show : true
} ,
itemStyle : { itemStyle : {
color : '#fff' , color : '#fff' ,
shadowColor : '#fff' , shadowColor : '#fff' ,
@ -101,7 +169,7 @@ export class CriminalRecordsAdminComponent implements OnInit {
} , } ,
yAxis : { yAxis : {
type : 'category' , type : 'category' ,
data : [ '北京市第十九加油站' , '北京市第十九加油站' , '北京市第十九加油站' , '北京市第十九加油站' , '北京市第十九加油站' , '北京市第十九加油站' , '北京市第十九加油站' , '北京市第十九加油站' , '北京市第十九加油站' , '北京市第十九加油站' ] , data : [ '北京市第十九加油站1 ' , '北京市第十九加油站2 ' , '北京市第十九加油站3 ' , '北京市第十九加油站4 ' , '北京市第十九加油站5 ' , '北京市第十九加油站6 ' , '北京市第十九加油站7 ' , '北京市第十九加油站8 ' , '北京市第十九加油站9 ' , '北京市第十九加油站10' , '北京市第十九加油站11' , '北京市第十九加油站12' , '北京市第十九加油站' , '北京市第十九加油站' , '北京市第十九加油站' , '北京市第十九加油站' , '北京市第十九加油站' , '北京市第十九加油站' , '北京市第十九加油站' , '北京市第十九加油站20' , '北京市第十九加油站21' , '北京市第十九加油站22' , '北京市第十九加油站23 ' ] ,
axisLine : { axisLine : {
show : false , show : false ,
lineStyle : { lineStyle : {
@ -132,7 +200,8 @@ export class CriminalRecordsAdminComponent implements OnInit {
shadowColor : "#fff" shadowColor : "#fff"
} }
} }
} } ,
inverse : true
} , } ,
series : series :
@ -144,9 +213,9 @@ export class CriminalRecordsAdminComponent implements OnInit {
color : "#fff" , color : "#fff" ,
fontSize : 12 , fontSize : 12 ,
formatter : '{c}' , formatter : '{c}' ,
offset : [ 6 , 0 ] offset : [ 6 , 0 ]
} , } ,
data : [ 40 , 36 , 30 , 25 , 19 , 15 , 14 , 11 , 10 , 8 ] . reverse ( ) , data : [ 40 , 36 , 30 , 25 , 19 , 15 , 14 , 11 , 10 , 8 , 40 , 36 , 30 , 25 , 19 , 15 , 14 , 11 , 10 , 8 , 1 , 2 , 3 ] . reverse ( ) ,
type : 'bar' , type : 'bar' ,
itemStyle : { itemStyle : {
color : { color : {
@ -168,11 +237,35 @@ export class CriminalRecordsAdminComponent implements OnInit {
} }
, ,
grid : { grid : {
left : '138 px' , left : '150 px' ,
right : '6 0px' , right : '8 0px' ,
bottom : '3px' , bottom : '3px' ,
top : '20px' top : '20px'
} } ,
dataZoom : [ //Y轴滑动条
{
type : 'slider' , //滑动条
show : true , //开启
yAxisIndex : 0 , //表示控制第几个y轴
left : '97%' , //滑动条位置
start : 1 , //初始化时，滑动条宽度开始标度
end : 100 , //初始化时，滑动条宽度结束标度<br>
maxValueSpan : 10 , //显示数据的条数(默认显示10个)
showDataShadow : false , //是否显示数据阴影 默认auto
showDetail : false , //即拖拽时候是否显示详细数值信息 默认true
realtime : true , //是否实时更新
filterMode : 'filter' ,
backgroundColor : '#001735' ,
width : '18'
} ,
{
type : 'inside' ,
yAxisIndex :0 ,
zoomOnMouseWheel :false , //滚轮是否触发缩放
moveOnMouseMove :true , //鼠标滚轮触发滚动
moveOnMouseWheel :true
}
]
} }
ngOnInit ( ) : void { ngOnInit ( ) : void {
this . validateForm = this . fb . group ( { this . validateForm = this . fb . group ( {
@ -182,75 +275,23 @@ export class CriminalRecordsAdminComponent implements OnInit {
datePicker : [ null ] datePicker : [ null ]
} ) ; } ) ;
// 基于准备好的dom，初始化echarts实例
//饼图
let myChart = echarts . init ( document . getElementById ( 'piechart' ) ) ; this . myChart = echarts . init ( document . getElementById ( 'piechart' ) ) ;
let option = { this . myChart . setOption ( this . 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 = echarts . init ( document . getElementById ( 'barchart' ) ) ;
this . mybarChart . setOption ( this . baroption ) ; this . mybarChart . setOption ( this . baroption ) ;
this . warningType ( )
}
ngAfterViewInit ( ) : void {
fromEvent ( this . element . nativeElement . querySelector ( ` #tbody ` ) as HTMLCanvasElement , 'scroll' ) . pipe ( debounceTime ( 100 ) ) . subscribe ( ( event : any ) = > { //监听 DOM 滚动事件
if ( event . target . scrollHeight - ( event . target . scrollTop + event . target . clientHeight ) <= 10 ) {
console . log ( '需要加载数据了' , event )
}
} ) ;
} }
getThirtyDays() { getThirtyDays() {
//获取当前日期
//获取当前日期
@ -301,7 +342,15 @@ export class CriminalRecordsAdminComponent implements OnInit {
} }
} }
//预警类型接口
warningTypes : any //预警接口数据
warningTypesDetails : any
warningType() {
this . http . get ( '/api/services/app/Violation/GetAllList' ) . subscribe ( ( data : any ) = > {
this . warningTypesDetails = data . result
this . warningTypes = ( data . result as any ) . groupBy ( ( t ) = > { return t . violationType } ) ;
} )
}
list : any = [ 1 , 1 , 1 , 1 , 1 , 1 , 1 , 1 , 1 , 1 , 1 , 1 ] list : any = [ 1 , 1 , 1 , 1 , 1 , 1 , 1 , 1 , 1 , 1 , 1 , 1 ]
look() { look() {
this . router . navigate ( [ '/records/petrolStation' ] ) this . router . navigate ( [ '/records/petrolStation' ] )
@ -314,9 +363,9 @@ export class CriminalRecordsAdminComponent implements OnInit {
this . selectedType = type this . selectedType = type
this . mybarChart . dispose ( ) this . mybarChart . dispose ( )
this . mybarChart = echarts . init ( document . getElementById ( 'barchart' ) ) ; this . mybarChart = echarts . init ( document . getElementById ( 'barchart' ) ) ;
if ( type == '排名' ) { if ( type == '排名' ) {
this . mybarChart . setOption ( this . baroption2 ) ; this . mybarChart . setOption ( this . baroption2 ) ;
} else { } else {
this . mybarChart . setOption ( this . baroption ) ; this . mybarChart . setOption ( this . baroption ) ;
} }
