From a370ed548d8936e87871d2459ff691e758b76afe Mon Sep 17 00:00:00 2001 From: chenjingyu Date: Wed, 12 May 2021 14:38:36 +0800 Subject: [PATCH] =?UTF-8?q?[=E6=96=B0=E5=A2=9E]=E5=AE=9E=E6=97=B6=E8=BF=9B?= =?UTF-8?q?=E5=B1=95=E7=9B=91=E7=AE=A1=E5=AF=B9=E6=8E=A5=E5=90=8E=E7=AB=AF?= =?UTF-8?q?=E6=95=B0=E6=8D=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../echarts-data.service.ts | 1 - .../real-monitoring.component.ts | 162 +++++++++++++----- 2 files changed, 121 insertions(+), 42 deletions(-) diff --git a/src/app/statistic-analysis/echarts-data.service.ts b/src/app/statistic-analysis/echarts-data.service.ts index d8d4f60..523f1a7 100644 --- a/src/app/statistic-analysis/echarts-data.service.ts +++ b/src/app/statistic-analysis/echarts-data.service.ts @@ -588,7 +588,6 @@ export class EchartsDataService { }) this.allDate.push(result) this.obdata=JSON.parse(JSON.stringify(this.allDate)) - //console.log(this.obdata) } selectType=0//选择年月 diff --git a/src/app/statistic-analysis/real-monitoring/real-monitoring.component.ts b/src/app/statistic-analysis/real-monitoring/real-monitoring.component.ts index 4eabb7b..d655ff7 100644 --- a/src/app/statistic-analysis/real-monitoring/real-monitoring.component.ts +++ b/src/app/statistic-analysis/real-monitoring/real-monitoring.component.ts @@ -4,7 +4,7 @@ * @Author: sueRimn * @Date: 2021-05-08 09:42:43 * @LastEditors: sueRimn - * @LastEditTime: 2021-05-12 09:58:22 + * @LastEditTime: 2021-05-12 14:37:07 */ import { Component, OnInit } from '@angular/core'; import { ActivatedRoute, Router } from '@angular/router'; @@ -26,19 +26,24 @@ export class RealMonitoringComponent implements OnInit { campaignTwo: FormGroup; */ constructor(private router: Router,public EchartsData:EchartsDataService,private route:ActivatedRoute,public snackBar: MatSnackBar) { } - addtime='0'//添加时间 - endtime='0' + addtime= String(new Date().getFullYear())+'-01'//添加时间 + endtime= String(new Date().getFullYear())+'-0'+String(new Date().getMonth()+1) /* addtime=String(new Date().getFullYear()+new Date().getMonth()) endtime=String(new Date().getFullYear()+new Date().getMonth()) */ ngOnInit(): void { window.setTimeout(()=>{ - this.getechartsdata() + this.getechartsdata(true) },0) } //获取echarts数据 - async getechartsdata(){ - var date=new Date - if(this.endtime=='0'&&this.addtime=='0'){ + async getechartsdata(chushi:boolean){ + /* var date=new Date() + var year=date.getFullYear(); + var month=date.getMonth()+1 + this.addtime=String(year)+'-01' + this.endtime=String(year)+'-0'+String(month) */ + /* if(this.endtime=='0'&&this.addtime=='0'){ + let paramdataleft={ objectType:3, } @@ -53,7 +58,8 @@ export class RealMonitoringComponent implements OnInit { } }); - }else{ + } */ + for(var i=Number(this.addtime.split('-')[0]);i<=Number(this.endtime.split('-')[0]);i++){ let paramdataleft={ objectType:3, @@ -62,27 +68,31 @@ export class RealMonitoringComponent implements OnInit { //获取左侧柱状图的数据 await this.EchartsData.getData(paramdataleft,'/api/StatisticsAnalysis/Trends') this.leftzhuTable=JSON.parse(JSON.stringify(this.EchartsData.allDate)) - console.log(this.leftzhuTable) + //console.log(this.leftzhuTable) this.leftzhuTable[0].forEach((value,index,array) => { - if((array[index].year==Number(this.addtime.split('-')[0])&&array[index].month>=Number(this.addtime.split('-')[1]))||(array[index].year==Number(this.endtime.split('-')[0])&&array[index].month<=Number(this.endtime.split('-')[1]))){ - this.dateNum.push(array[index].count) - this.dateyue.push(array[index].year+'-'+array[index].month) + if(this.addtime.split('-')[0]!=this.endtime.split('-')[0]){ + if((array[index].year==Number(this.addtime.split('-')[0])&&array[index].month>=Number(this.addtime.split('-')[1]))||(array[index].year==Number(this.endtime.split('-')[0])&&array[index].month<=Number(this.endtime.split('-')[1]))){ + this.dateNum.push(array[index].count) + this.dateyue.push(array[index].year+'-'+array[index].month) + } + }else{ + if(array[index].month>=this.addtime.split('-')[1]&&array[index].month<=this.endtime.split('-')[1]){ + this.dateNum.push(array[index].count) + this.dateyue.push(array[index].year+'-'+array[index].month) + } } - /* if(array[index].month>=Number(this.addtime.split('-')[1])||array[index].month<=Number(this.endtime.split('-')[1])){ - - } */ }); } - } + //获取底端柱状图数据 - let param={ - TimeIntervalStart:this.addtime=='0'?'':this.addtime, + let paramBottom={ + TimeIntervalStart:this.addtime=='0'?'':this.endtime, TimeIntervalEnd:this.endtime=='0'?'':this.endtime } - await this.EchartsData.getData(param,'/api/StatisticsAnalysis/Plans/AuditApproved/Organizations') + if(chushi){ + await this.EchartsData.getData(paramBottom,'/api/StatisticsAnalysis/Plans/AuditApproved/Organizations') this.bottomTable=JSON.parse(JSON.stringify(this.EchartsData.allDate)) - //console.log(this.bottomTable) this.addNum= this.bottomTable[0].totalCount this.bottomTable[0].organizations.forEach((value,index,array) => { this.zhiNameData.push(array[index].organizationName) @@ -92,13 +102,17 @@ export class RealMonitoringComponent implements OnInit { } }); + this.bottomzhutu() + } + //右侧饼状图数据 + let param={ + TimeIntervalStart:this.addtime=='0'?'':this.addtime, + TimeIntervalEnd:this.endtime=='0'?'':this.endtime + } await this.EchartsData.getData(param,'/api/StatisticsAnalysis/Plans/AuditApproved/PlanTypes') this.rightbTable=JSON.parse(JSON.stringify(this.EchartsData.allDate)) - //console.log(this.rightbTable) - //console.log(this.dateyue,this.dateNum) - this.leftzhuzhuangtu('bottomEcharts',this.zhiNameData,this.zhiNumData) - this.leftzhuzhuangtu('leftecharts',this.dateyue,this.dateNum) + this.leftzhuzhuangtu() this.rightbingtu() } @@ -114,13 +128,14 @@ export class RealMonitoringComponent implements OnInit { if(this.endtime{ - if(divid!='bottomEcharts'){ + /* this.leftzhutu.getZr().on('click', async (params)=>{ + console.log(111) const pointInPixel= [params.offsetX, params.offsetY]; if (this.leftzhutu.containPixel('grid',pointInPixel)) { let xIndex=this.leftzhutu.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0]; @@ -242,14 +256,13 @@ export class RealMonitoringComponent implements OnInit { //右侧饼状图数据 await this.EchartsData.getData(param,'/api/StatisticsAnalysis/Plans/AuditApproved/PlanTypes') this.rightbTable=JSON.parse(JSON.stringify(this.EchartsData.allDate)) - this.leftzhuzhuangtu('bottomEcharts',this.zhiNameData,this.zhiNumData) - this.leftzhuzhuangtu('leftecharts',this.dateyue,this.dateNum) + this.bottomzhutu() this.rightbingtu() } } - } - }); + + }); */ } @@ -329,5 +342,72 @@ export class RealMonitoringComponent implements OnInit { }; this.rightbing.setOption(this.optionRightbing) } + //最底部柱状图 + bottomzhutu(){ + var ec = echarts as any; + this.bottomzhu = ec.init(document.getElementById(`bottomEcharts`),'walden'); + this.bottomZhuoption = { + grid: { + //top: 10, + containLabel:true, + bottom:10, + left:50 + }, + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'none' + } + }, + xAxis: { + type: 'category', + data: this.zhiNameData, + //axisLabel: this.axisLabel, + axisLabel:{ + //this.axisLabel, + textStyle:{ + fontSize :16, + color:'#000000' + } + + } + }, + yAxis: { + type: 'value', + axisLabel:{ + textStyle:{ + fontSize :16, + color:'#000000' + } + + } + }, + dataZoom:[ + { + type: 'inside' + }, { + type: 'slider' + } + ], + series: [{ + name: '数量', + data: this.zhiNumData, + type: 'bar', + markPoint: { + symbolSize:[65, 65], + data: this.EchartsData.qipao(this.tiaoshiPao,this.zhiNumData,this.zhiNameData) + }, + backgroundStyle: { + color: 'rgba(220, 220, 220, 0.8)' + }, + barWidth :'38', + //label: this.topTextlabel + }] + }; + this.bottomzhu.setOption(this.bottomZhuoption); + /* this.bottomzhu.getZr().on('click',(params)=>{ + console.log(params) + }) */ + } }