From 84b78879fee8d5276aeb137f1a89692bff0ff823 Mon Sep 17 00:00:00 2001 From: SHAOJIAHAO <55341701@qq.com> Date: Fri, 4 Sep 2020 17:22:22 +0800 Subject: [PATCH] =?UTF-8?q?[=E6=96=B0=E5=A2=9E]=E6=96=B0=E5=A2=9E=E5=8D=95?= =?UTF-8?q?=E4=BD=8D=E7=BB=9F=E8=AE=A1=E5=9F=BA=E6=9C=AC=E5=AE=8C=E6=88=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../add-unit-one/add-unit-one.component.ts | 8 +- .../add-unit-three-bar-details.component.html | 30 +++ .../add-unit-three-bar-details.component.scss | 76 +++++++ ...d-unit-three-bar-details.component.spec.ts | 25 +++ .../add-unit-three-bar-details.component.ts | 176 ++++++++++++++++ ...add-unit-three-line-details.component.html | 24 +++ ...add-unit-three-line-details.component.scss | 76 +++++++ ...-unit-three-line-details.component.spec.ts | 25 +++ .../add-unit-three-line-details.component.ts | 192 ++++++++++++++++++ .../add-unit-two-time.component.ts | 28 ++- .../add-unit-two-type-details.component.ts | 7 +- .../add-unit-two-type-statistics.component.ts | 7 +- .../echarts-data.service.ts | 40 +++- .../statistic-analysis-routing.module.ts | 4 + .../statistic-analysis.module.ts | 4 +- 15 files changed, 706 insertions(+), 16 deletions(-) create mode 100644 src/app/statistic-analysis/addUnit/add-unit-three-bar-details/add-unit-three-bar-details.component.html create mode 100644 src/app/statistic-analysis/addUnit/add-unit-three-bar-details/add-unit-three-bar-details.component.scss create mode 100644 src/app/statistic-analysis/addUnit/add-unit-three-bar-details/add-unit-three-bar-details.component.spec.ts create mode 100644 src/app/statistic-analysis/addUnit/add-unit-three-bar-details/add-unit-three-bar-details.component.ts create mode 100644 src/app/statistic-analysis/addUnit/add-unit-three-line-details/add-unit-three-line-details.component.html create mode 100644 src/app/statistic-analysis/addUnit/add-unit-three-line-details/add-unit-three-line-details.component.scss create mode 100644 src/app/statistic-analysis/addUnit/add-unit-three-line-details/add-unit-three-line-details.component.spec.ts create mode 100644 src/app/statistic-analysis/addUnit/add-unit-three-line-details/add-unit-three-line-details.component.ts diff --git a/src/app/statistic-analysis/addUnit/add-unit-one/add-unit-one.component.ts b/src/app/statistic-analysis/addUnit/add-unit-one/add-unit-one.component.ts index 34673d9..adcf012 100644 --- a/src/app/statistic-analysis/addUnit/add-unit-one/add-unit-one.component.ts +++ b/src/app/statistic-analysis/addUnit/add-unit-one/add-unit-one.component.ts @@ -10,8 +10,10 @@ export class AddUnitOneComponent implements OnInit { constructor(private router: Router) { } + setTimeoutObj//延时器需要清除 + ngOnInit(): void { - window.setTimeout(()=>{ + this.setTimeoutObj = window.setTimeout(()=>{ this.initCharts() },0) } @@ -121,4 +123,8 @@ export class AddUnitOneComponent implements OnInit { res+='' return res } + + ngOnDestroy(){ + window.clearTimeout(this.setTimeoutObj); + } } diff --git a/src/app/statistic-analysis/addUnit/add-unit-three-bar-details/add-unit-three-bar-details.component.html b/src/app/statistic-analysis/addUnit/add-unit-three-bar-details/add-unit-three-bar-details.component.html new file mode 100644 index 0000000..1efb7b4 --- /dev/null +++ b/src/app/statistic-analysis/addUnit/add-unit-three-bar-details/add-unit-three-bar-details.component.html @@ -0,0 +1,30 @@ +
+
+
+
+ 查询年份: + + + {{item}} + + + 查询月份: + + + {{item}} + + + +
+
+ +
+ +
+
+
+
+ +
+
+
\ No newline at end of file diff --git a/src/app/statistic-analysis/addUnit/add-unit-three-bar-details/add-unit-three-bar-details.component.scss b/src/app/statistic-analysis/addUnit/add-unit-three-bar-details/add-unit-three-bar-details.component.scss new file mode 100644 index 0000000..ed72dc3 --- /dev/null +++ b/src/app/statistic-analysis/addUnit/add-unit-three-bar-details/add-unit-three-bar-details.component.scss @@ -0,0 +1,76 @@ +.box{ + width: 100%; + height: 92%; + display: flex; + flex-direction: column; + overflow: hidden; + position: relative; + .echartsbox{ + width: 100%; + height: 100%; + // overflow: auto; + } + #Line{ + width: 50%; + height: 420px; + margin: 50px auto; + } +} +.publicCss{ + height: 350px; + width: 50%; + display: inline-block; + box-sizing: border-box; + padding: 20px; +} + +//头部搜索栏 +.header { + border-bottom: 1px solid #999; + height: 80px; + min-height: 81px;; + box-sizing: border-box; + // padding: 0 15px; + display: flex; + flex-direction: row; + flex-wrap: wrap; + align-items:center; + justify-content:center; + .queryField { + margin: 0 10px; + font-size: 14px; + .mat-form-field { + width: 130px; + max-height: 50px;; + margin: 0 15px 0 10px; + } + } + .btnbox{ + height: 80px; + display: flex; + flex-direction:column; + justify-content: space-around; + position: fixed; + top: 64px; + right: 4%; + width: 88px; + button{ + width: 88px; + height: 36px; + } + + } + } + .echartsbox{ + width: 100%; + height: 100%; + overflow: auto; + #barEchart{ + width: 100%; + height: 350px; + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%,-50%); + } +} \ No newline at end of file diff --git a/src/app/statistic-analysis/addUnit/add-unit-three-bar-details/add-unit-three-bar-details.component.spec.ts b/src/app/statistic-analysis/addUnit/add-unit-three-bar-details/add-unit-three-bar-details.component.spec.ts new file mode 100644 index 0000000..8081b73 --- /dev/null +++ b/src/app/statistic-analysis/addUnit/add-unit-three-bar-details/add-unit-three-bar-details.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { AddUnitThreeBarDetailsComponent } from './add-unit-three-bar-details.component'; + +describe('AddUnitThreeBarDetailsComponent', () => { + let component: AddUnitThreeBarDetailsComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ AddUnitThreeBarDetailsComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(AddUnitThreeBarDetailsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/statistic-analysis/addUnit/add-unit-three-bar-details/add-unit-three-bar-details.component.ts b/src/app/statistic-analysis/addUnit/add-unit-three-bar-details/add-unit-three-bar-details.component.ts new file mode 100644 index 0000000..2f8bd1e --- /dev/null +++ b/src/app/statistic-analysis/addUnit/add-unit-three-bar-details/add-unit-three-bar-details.component.ts @@ -0,0 +1,176 @@ +import { Component, OnInit } from '@angular/core'; +import { Router } from '@angular/router'; +import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog'; +import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar'; +import { ActivatedRoute } from '@angular/router'; +import { EchartsDataService } from '../../echarts-data.service'; +declare var echarts: any; +@Component({ + selector: 'app-add-unit-three-bar-details', + templateUrl: './add-unit-three-bar-details.component.html', + styleUrls: ['./add-unit-three-bar-details.component.scss'] +}) +export class AddUnitThreeBarDetailsComponent implements OnInit { + + constructor(private router: Router,public dialog: MatDialog,public snackBar: MatSnackBar,private serviceData: EchartsDataService,public route: ActivatedRoute) { } + time:String + buildingTypeName:String + level:String + + setTimeoutObj//延时器需要清除 + ngOnInit(): void { + this.dateInit () + this.route.queryParams.subscribe(params => { + this.time = params['time']; + this.buildingTypeName = params['buildingTpye']; + this.level = params['level']; + }); + this.setTimeoutObj = window.setTimeout(()=>{ + this.detailEcharts() + },0) + } + ngOnDestroy(){ + window.clearTimeout(this.setTimeoutObj); + } + + selectType:string = 'month'; //选择当前的 查询类型 按月/年 + + //查询数据 + years:any = [] + selectMonth:any = [1,2,3,4,5,6,7,8,9,10,11,12] + + //日期初始化 + dateInit () { + let date = (new Date()).getFullYear() + for (let i=date; i>=date-10;i--) { + this.years.unshift(i) + } + } + selectOneYear:any = (new Date()).getFullYear() //开始年份 + selectStartMonth:any = 1 //开始月份 + Submit (e) { + + } + selectStartYear:any = (new Date()).getFullYear() //开始年份 + + + topTextlabel = { + show: true, // 开启显示 + position: 'top', // 在上方显示 + distance: 10, // 距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。 + verticalAlign: 'middle', + textStyle: { // 数值样式 + color: 'black', + fontSize: 12 + } + }//柱状图数值顶部显示 + zhongNameData = ["浦东中队","黄埔中队","徐汇中队","长宁中队","静安中队","普陀中队","虹口中队","杨浦中队","闵行中队","宝山中队","嘉定中队"] + zhongNumData = [200,190,180,170,160,150,140,130,120,110,100] + + zhiNameData = ["浦东支队","黄埔支队","徐汇支队","长宁支队","静安支队","普陀支队","虹口支队","杨浦支队","闵行支队","宝山支队","嘉定支队"] + zhiNumData = [300,290,280,270,260,250,240,230,220,210,200] + + + detailPlanEchart + option + detailEcharts(){ + this.detailPlanEchart = echarts.init(document.getElementById('barEchart')); + this.option = { + title: { + text: this.time + '(' +this.buildingTypeName + ')', + left: "center", + textStyle: { + fontSize: 28 + } + }, + xAxis: { + type: 'category', + data: this.zhiNameData, + // axisLabel: this.axisLabel + }, + yAxis: { + type: 'value' + }, + tooltip: { + trigger: 'item', + formatter: (params)=>{ + return this.tableTooltip(params) + }, + backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度 + borderWidth:'1', + borderRadius :'0', + position:this.serviceData.tableTooltipNoShow2 + }, + series: [{ + data: this.zhiNumData, + type: 'bar', + showBackground: true, + barWidth :'58', + backgroundStyle: { + color: 'rgba(220, 220, 220, 0.8)' + }, + label: this.topTextlabel + }] + + }; + this.detailPlanEchart.setOption(this.option); + this.detailPlanEchart.on("click",(params)=>{ + if(this.level == "zhidui"){//如果是支队则跳转 + // this.router.navigate(['/statisticanalysis/addUnit_one/addUnit_two_time/three_barDetails'],{queryParams:{'level':'zhongdui','time':params.name,'buildingTpye':this.buildingTypeName}}); + this.level = "zhongdui" + this.option.title.text = params.name + '(' +this.buildingTypeName + ')' + this.option.xAxis.data = this.zhongNameData + this.option.series[0].data = this.zhongNumData + this.detailPlanEchart.setOption(this.option) + }else{ + const config = new MatSnackBarConfig(); + config.verticalPosition = 'top'; + config.duration = 3000 + this.snackBar.open('已到达最底层','确定',config); + } + }) + } + //返回按钮 + backBtn(){ + if(this.level == "zhongdui"){ + this.level = "zhidui" + this.option.title.text = this.time + '(' +this.buildingTypeName + ')' + this.option.xAxis.data = this.zhiNameData + this.option.series[0].data = this.zhiNumData + this.detailPlanEchart.setOption(this.option) + }else{ + window.history.go(-1) + } + } + + tableTooltip(params:any){ + var data + if(this.level == "zhidui"){ + data = this.serviceData.tableDataZhong + }else{ + data = [ + {name:params.name,number:params.value,zhanbi:(params.value/1340 * 100).toFixed(2) + "%"} + ] + } + var res = '
'+params.name+'
' + res+='
'; + res+=''; + res+=''; + res+='' + res+='' + res+='' + res+=''; + for(var i=0;i' + res+='' + res+='' + } + + res+='' + // res+='' + res+='
名称数量总占比
'+data[i].number+''+data[i].zhanbi+'
总计135619%
' + return res + } + +} diff --git a/src/app/statistic-analysis/addUnit/add-unit-three-line-details/add-unit-three-line-details.component.html b/src/app/statistic-analysis/addUnit/add-unit-three-line-details/add-unit-three-line-details.component.html new file mode 100644 index 0000000..1ffb927 --- /dev/null +++ b/src/app/statistic-analysis/addUnit/add-unit-three-line-details/add-unit-three-line-details.component.html @@ -0,0 +1,24 @@ +
+
+
+
+ 查询年份: + + + {{item}} + + + +
+
+ +
+ +
+
+
+
+ +
+
+
\ No newline at end of file diff --git a/src/app/statistic-analysis/addUnit/add-unit-three-line-details/add-unit-three-line-details.component.scss b/src/app/statistic-analysis/addUnit/add-unit-three-line-details/add-unit-three-line-details.component.scss new file mode 100644 index 0000000..febdae8 --- /dev/null +++ b/src/app/statistic-analysis/addUnit/add-unit-three-line-details/add-unit-three-line-details.component.scss @@ -0,0 +1,76 @@ +.box{ + width: 100%; + height: 92%; + display: flex; + flex-direction: column; + overflow: hidden; + position: relative; + .echartsbox{ + width: 100%; + height: 100%; + overflow: auto; + } + #Line{ + width: 50%; + height: 420px; + margin: 50px auto; + } +} +.publicCss{ + height: 350px; + width: 50%; + display: inline-block; + box-sizing: border-box; + padding: 20px; +} + +//头部搜索栏 +.header { + border-bottom: 1px solid #999; + height: 80px; + min-height: 81px;; + box-sizing: border-box; + // padding: 0 15px; + display: flex; + flex-direction: row; + flex-wrap: wrap; + align-items:center; + justify-content:center; + .queryField { + margin: 0 10px; + font-size: 14px; + .mat-form-field { + width: 130px; + max-height: 50px;; + margin: 0 15px 0 10px; + } + } + .btnbox{ + height: 80px; + display: flex; + flex-direction:column; + justify-content: space-around; + position: fixed; + top: 64px; + right: 4%; + width: 88px; + button{ + width: 88px; + height: 36px; + } + + } + } + .echartsbox{ + width: 100%; + height: 100%; + overflow: auto; + #barEchart{ + width: 60%; + height: 350px; + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%,-50%); + } +} \ No newline at end of file diff --git a/src/app/statistic-analysis/addUnit/add-unit-three-line-details/add-unit-three-line-details.component.spec.ts b/src/app/statistic-analysis/addUnit/add-unit-three-line-details/add-unit-three-line-details.component.spec.ts new file mode 100644 index 0000000..3b947b0 --- /dev/null +++ b/src/app/statistic-analysis/addUnit/add-unit-three-line-details/add-unit-three-line-details.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { AddUnitThreeLineDetailsComponent } from './add-unit-three-line-details.component'; + +describe('AddUnitThreeLineDetailsComponent', () => { + let component: AddUnitThreeLineDetailsComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ AddUnitThreeLineDetailsComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(AddUnitThreeLineDetailsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/statistic-analysis/addUnit/add-unit-three-line-details/add-unit-three-line-details.component.ts b/src/app/statistic-analysis/addUnit/add-unit-three-line-details/add-unit-three-line-details.component.ts new file mode 100644 index 0000000..3f27283 --- /dev/null +++ b/src/app/statistic-analysis/addUnit/add-unit-three-line-details/add-unit-three-line-details.component.ts @@ -0,0 +1,192 @@ +import { Component, OnInit } from '@angular/core'; +import { Router } from '@angular/router'; +import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog'; +import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar'; +import { ActivatedRoute } from '@angular/router'; +import { EchartsDataService } from '../../echarts-data.service'; +declare var echarts: any; +@Component({ + selector: 'app-add-unit-three-line-details', + templateUrl: './add-unit-three-line-details.component.html', + styleUrls: ['./add-unit-three-line-details.component.scss'] +}) +export class AddUnitThreeLineDetailsComponent implements OnInit { + + constructor(private router: Router,public dialog: MatDialog,public snackBar: MatSnackBar,private serviceData: EchartsDataService,public route: ActivatedRoute) { } + year:String + buildingTypeName:String + level:String + setTimeoutObj//延时器需要清除 + ngOnInit(): void { + this.dateInit () + this.route.queryParams.subscribe(params => { + this.year = params['year']; + this.buildingTypeName = params['buildingType']; + }); + this.setTimeoutObj = window.setTimeout(()=>{ + this.detailEcharts() + }) + } + + ngOnDestroy(){ + window.clearTimeout(this.setTimeoutObj); + } + + selectType:string = 'month'; //选择当前的 查询类型 按月/年 + + //查询数据 + years:any = [] + selectMonth:any = [1,2,3,4,5,6,7,8,9,10,11,12] + + //日期初始化 + dateInit () { + let date = (new Date()).getFullYear() + for (let i=date; i>=date-10;i--) { + this.years.unshift(i) + } + } + selectOneYear:any = (new Date()).getFullYear() //开始年份 + selectStartMonth:any = 1 //开始月份 + Submit (e) { + + } + selectStartYear:any = (new Date()).getFullYear() //开始年份 + + + topTextlabel = { + show: true, // 开启显示 + position: 'top', // 在上方显示 + distance: 10, // 距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。 + verticalAlign: 'middle', + textStyle: { // 数值样式 + color: 'black', + fontSize: 12 + } + }//柱状图数值顶部显示 + zhongNameData = ["浦东中队","黄埔中队","徐汇中队","长宁中队","静安中队","普陀中队","虹口中队","杨浦中队","闵行中队","宝山中队","嘉定中队"] + zhongNumData = [200,190,180,170,160,150,140,130,120,110,100] + + zhiNameData = ["浦东支队","黄埔支队","徐汇支队","长宁支队","静安支队","普陀支队","虹口支队","杨浦支队","闵行支队","宝山支队","嘉定支队"] + zhiNumData = [300,290,280,270,260,250,240,230,220,210,200] + + + detailPlanEchart + option + date = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月','9月'] + dateNum = [270, 253, 244, 199, 189, 173, 160, 198,200] + detailEcharts(){ + this.detailPlanEchart = echarts.init(document.getElementById('barEchart'), 'skinUpp'); + this.option = { + grid: { + top: 50, + left:40, + right: 20, + bottom: 20, + }, + // 标题 + title: { + text: this.buildingTypeName + '(' + this.year + ')', + top: -4, + left: 'center', + textStyle:{ + //文字颜色 + color:'#000', + } + }, + //提示框 + tooltip: { + trigger: 'axis', + backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度 + borderWidth:'1', + borderRadius :'0', + formatter: (params)=>{ + if(params[0].seriesName == "year"){ + return this.serviceData.tableTooltip(this.serviceData.monthTooltip,params[0].name) + }else{ + return this.serviceData.tableTooltip(this.serviceData.tableDataZhi,params[0].name) + } + }, + position:this.serviceData.tableTooltipNoShow2 + }, + // x轴 + xAxis: { + type: 'category', + data: this.date, + axisLabel: { + color: "#000", //刻度线标签颜色 + }, + //设置坐标轴字体颜色和宽度 + axisLine: { + lineStyle: { + color: "#000", + }, + }, + splitLine: {//分割线配置 + show:true, + lineStyle: { + color: '#999', + } + } + }, + // y轴 + yAxis: { + type: 'value', + name: '个', + axisLabel: { + color: "#000" //刻度线标签颜色 + }, + //设置坐标轴字体颜色和宽度 + axisLine: { + lineStyle: { + color: "#000", + } + } + }, + // 数据 + series: [{ + name: 'xxx', + type: 'line', + data: this.dateNum, + } + ], + }; + this.detailPlanEchart.setOption(this.option); + this.detailPlanEchart.getZr().on('click',params=>{ + const pointInPixel= [params.offsetX, params.offsetY]; + if (this.detailPlanEchart.containPixel('grid',pointInPixel)) { + let xIndex=this.detailPlanEchart.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0]; + /*事件处理代码书写位置*/ + this.router.navigate(['/statisticanalysis/addUnit_one/addUnit_two_time/three_barDetails'],{queryParams:{'level':'zhidui','time':this.option.xAxis.data[xIndex],'buildingTpye':this.buildingTypeName}}); + } + }); + } + //返回按钮 + backBtn(){ + window.history.go(-1) + } + + tableTooltip(params:any){ + var data = [ + {name:params.name,number:params.value,zhanbi:(params.value/1340 * 100).toFixed(2) + "%"} + ] + var res = '
'+params.name+'
' + res+='
'; + res+=''; + res+=''; + res+='' + res+='' + res+='' + res+=''; + for(var i=0;i' + res+='' + res+='' + } + + res+='' + // res+='' + res+='
名称数量总占比
'+data[i].number+''+data[i].zhanbi+'
总计135619%
' + return res + } +} diff --git a/src/app/statistic-analysis/addUnit/add-unit-two-time/add-unit-two-time.component.ts b/src/app/statistic-analysis/addUnit/add-unit-two-time/add-unit-two-time.component.ts index 8cb7df2..e4b0cfe 100644 --- a/src/app/statistic-analysis/addUnit/add-unit-two-time/add-unit-two-time.component.ts +++ b/src/app/statistic-analysis/addUnit/add-unit-two-time/add-unit-two-time.component.ts @@ -17,15 +17,17 @@ export class AddUnitTwoTimeComponent implements OnInit { this.router.navigate(['/statisticanalysis/addUnit_one/addUnit_two_time']) } constructor(private router: Router,public dialog: MatDialog,public snackBar: MatSnackBar,private serviceData: EchartsDataService) { } - + setTimeoutObj//延时器需要清除 ngOnInit(): void { this.dateInit () - setTimeout(() => { + this.setTimeoutObj = setTimeout(() => { this.oneInit (this.date,this.dateNum) - this.twoInit (this.date,this.dateNum,'year') + this.twoInit (this.date,this.dateNum,'month') }, 0); } - + ngOnDestroy(){ + window.clearTimeout(this.setTimeoutObj); + } selectType:string = 'month'; //选择当前的 查询类型 按月/年 //查询数据 @@ -233,7 +235,11 @@ export class AddUnitTwoTimeComponent implements OnInit { borderWidth:'1', borderRadius :'0', formatter: (params)=>{ - return this.serviceData.tableTooltip(this.serviceData.tableDataZhi,params[0].name) + if(params[0].seriesName == "year"){ + return this.serviceData.tableTooltip(this.serviceData.monthTooltip,params[0].name) + }else{ + return this.serviceData.tableTooltip(this.serviceData.tableDataZhi,params[0].name) + } } }, // x轴 @@ -279,16 +285,18 @@ export class AddUnitTwoTimeComponent implements OnInit { ], }; item.echart.setOption(option,true); - // item.echart.on('click', (params) => { - // console.log(params) - // }); item.echart.getZr().on('click',params=>{ const pointInPixel= [params.offsetX, params.offsetY]; if (item.echart.containPixel('grid',pointInPixel)) { let xIndex=item.echart.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0]; /*事件处理代码书写位置*/ - console.log(option.series[0].data[xIndex],option.xAxis.data[xIndex]) - + // console.log(option.series[0].data[xIndex],option.xAxis.data[xIndex],option.title.text,option.series[0].name) + if(option.series[0].name == "year"){ + this.router.navigate(['/statisticanalysis/addUnit_one/addUnit_two_time/three_lineDetails'],{queryParams:{'year':this.date2[xIndex],'buildingType':option.title.text}}); + }else{ + this.router.navigate(['/statisticanalysis/addUnit_one/addUnit_two_time/three_barDetails'],{queryParams:{'level':'zhidui','time':option.xAxis.data[xIndex],'buildingTpye':option.title.text}}); + } + } }); }) diff --git a/src/app/statistic-analysis/addUnit/add-unit-two-type-details/add-unit-two-type-details.component.ts b/src/app/statistic-analysis/addUnit/add-unit-two-type-details/add-unit-two-type-details.component.ts index 63ea6f2..a429a73 100644 --- a/src/app/statistic-analysis/addUnit/add-unit-two-type-details/add-unit-two-type-details.component.ts +++ b/src/app/statistic-analysis/addUnit/add-unit-two-type-details/add-unit-two-type-details.component.ts @@ -19,16 +19,19 @@ export class AddUnitTwoTypeDetailsComponent implements OnInit { organizationName:String buildingTypeName:String - + setTimeoutObj//延时器需要清除 ngOnInit(): void { this.route.queryParams.subscribe(params => { this.organizationName = params['organizationName']; this.buildingTypeName = params['buildingTypeName']; }); - window.setTimeout(()=>{ + this.setTimeoutObj = window.setTimeout(()=>{ this.detailEcharts() }) } + ngOnDestroy(){ + window.clearTimeout(this.setTimeoutObj); + } topTextlabel = { show: true, // 开启显示 position: 'top', // 在上方显示 diff --git a/src/app/statistic-analysis/addUnit/add-unit-two-type-statistics/add-unit-two-type-statistics.component.ts b/src/app/statistic-analysis/addUnit/add-unit-two-type-statistics/add-unit-two-type-statistics.component.ts index cd4ade9..d614f6e 100644 --- a/src/app/statistic-analysis/addUnit/add-unit-two-type-statistics/add-unit-two-type-statistics.component.ts +++ b/src/app/statistic-analysis/addUnit/add-unit-two-type-statistics/add-unit-two-type-statistics.component.ts @@ -16,12 +16,17 @@ export class AddUnitTwoTypeStatisticsComponent implements OnInit { reverse(){ this.router.navigate(['/statisticanalysis/addUnit_one/addUnit_two_time']) } + + setTimeoutObj//延时器需要清除 ngOnInit(): void { - window.setTimeout(()=>{ + this.setTimeoutObj = window.setTimeout(()=>{ this.initCharts() this.barEcharts() },0) } + ngOnDestroy(){ + window.clearTimeout(this.setTimeoutObj); + } axisLabel = { interval: 0, diff --git a/src/app/statistic-analysis/echarts-data.service.ts b/src/app/statistic-analysis/echarts-data.service.ts index 7774f89..e2f8846 100644 --- a/src/app/statistic-analysis/echarts-data.service.ts +++ b/src/app/statistic-analysis/echarts-data.service.ts @@ -146,8 +146,46 @@ export class EchartsDataService { return [pointX, pointY]; } + + tableTooltipNoShow2(point, params, dom, rect, size) { + // 鼠标坐标和提示框位置的参考坐标系是：以外层div的左上角那一点为原点，x轴向右，y轴向下 + // 提示框位置 + var x = 0; // x坐标位置 + var y = 0; // y坐标位置 + + // 当前鼠标位置 + var pointX = point[0]; + var pointY = point[1]; + + // 外层div大小 + var viewWidth = size.viewSize[0]; + // var viewHeight = size.viewSize[1]; + + // 提示框大小 + var boxWidth = size.contentSize[0]; + var boxHeight = size.contentSize[1]; + + // boxWidth > pointX 说明鼠标左边放不下提示框 + if (boxWidth > pointX) { + x = 35; + } else { // 左边放的下 + x = pointX + 80; + } + // 说明鼠标右边放不下提示框 + if(viewWidth - 100 - pointX < boxWidth){ + x = pointX - boxWidth; + } + - + // boxHeight > pointY 说明鼠标上边放不下提示框 + if (boxHeight > pointY) { + y = 65; + } else { // 上边放得下 + y = pointY - boxHeight; + } + console.log(pointX,pointY) + return [x, y]; + } //用法： diff --git a/src/app/statistic-analysis/statistic-analysis-routing.module.ts b/src/app/statistic-analysis/statistic-analysis-routing.module.ts index 3a53d39..194a254 100644 --- a/src/app/statistic-analysis/statistic-analysis-routing.module.ts +++ b/src/app/statistic-analysis/statistic-analysis-routing.module.ts @@ -17,6 +17,8 @@ import { AddUnitTwoTypeStatisticsComponent } from './addUnit/add-unit-two-type-s import { AddUnitTwoTypeDetailsComponent } from './addUnit/add-unit-two-type-details/add-unit-two-type-details.component'; import { AddUnitTwoTimeComponent } from './addUnit/add-unit-two-time/add-unit-two-time.component'; import {ScheduledUpdatesComponent} from './scheduled-updates/scheduled-updates.component' +import { AddUnitThreeLineDetailsComponent } from './addUnit/add-unit-three-line-details/add-unit-three-line-details.component'; +import { AddUnitThreeBarDetailsComponent } from './addUnit/add-unit-three-bar-details/add-unit-three-bar-details.component'; const routes: Routes = [ { path: 'statePageOne', component: PageOneComponent}, @@ -33,6 +35,8 @@ const routes: Routes = [ { path: 'addUnit_one/addUnit_two_type', component: AddUnitTwoTypeStatisticsComponent}, { path: 'addUnit_one/addUnit_two_typeDetails', component: AddUnitTwoTypeDetailsComponent}, { path: 'addUnit_one/addUnit_two_time', component: AddUnitTwoTimeComponent}, + { path: 'addUnit_one/addUnit_two_time/three_lineDetails', component: AddUnitThreeLineDetailsComponent}, + { path: 'addUnit_one/addUnit_two_time/three_barDetails', component: AddUnitThreeBarDetailsComponent}, { path: 'scheduledUpdates', component: ScheduledUpdatesComponent} ]; diff --git a/src/app/statistic-analysis/statistic-analysis.module.ts b/src/app/statistic-analysis/statistic-analysis.module.ts index aaa1b65..c8998ef 100644 --- a/src/app/statistic-analysis/statistic-analysis.module.ts +++ b/src/app/statistic-analysis/statistic-analysis.module.ts @@ -60,11 +60,13 @@ import { AddUnitTwoTypeStatisticsComponent } from './addUnit/add-unit-two-type-s import { AddUnitTwoTypeDetailsComponent } from './addUnit/add-unit-two-type-details/add-unit-two-type-details.component'; import { AddUnitTwoTimeComponent } from './addUnit/add-unit-two-time/add-unit-two-time.component'; import { ScheduledUpdatesComponent } from './scheduled-updates/scheduled-updates.component'; +import { AddUnitThreeLineDetailsComponent } from './addUnit/add-unit-three-line-details/add-unit-three-line-details.component'; +import { AddUnitThreeBarDetailsComponent } from './addUnit/add-unit-three-bar-details/add-unit-three-bar-details.component'; @NgModule({ - declarations: [PageOneComponent, PageTwoTimeComponent, PageTwoNameComponent, PageZhongDuiDetailsComponent,echartsComponent, DeleteOneComponent, DeleteTwoComponent, DeleteThereComponent, DeleteFourComponent, BuildingTypeOneComponent, BuildingTypeTwoForwardComponent, BuildingTypeTwoReverseComponent, BuildingTypeThreeDetailsComponent, AddUnitOneComponent, AddUnitTwoTypeStatisticsComponent, AddUnitTwoTypeDetailsComponent, AddUnitTwoTimeComponent,ScheduledUpdatesComponent], + declarations: [PageOneComponent, PageTwoTimeComponent, PageTwoNameComponent, PageZhongDuiDetailsComponent,echartsComponent, DeleteOneComponent, DeleteTwoComponent, DeleteThereComponent, DeleteFourComponent, BuildingTypeOneComponent, BuildingTypeTwoForwardComponent, BuildingTypeTwoReverseComponent, BuildingTypeThreeDetailsComponent, AddUnitOneComponent, AddUnitTwoTypeStatisticsComponent, AddUnitTwoTypeDetailsComponent, AddUnitTwoTimeComponent,ScheduledUpdatesComponent, AddUnitThreeLineDetailsComponent, AddUnitThreeBarDetailsComponent], imports: [ CommonModule, StatisticAnalysisRoutingModule,