Browse Source

[新增]新增单位统计基本完成

master
邵佳豪 4 years ago
parent
commit
84b78879fe
  1. 8
      src/app/statistic-analysis/addUnit/add-unit-one/add-unit-one.component.ts
  2. 30
      src/app/statistic-analysis/addUnit/add-unit-three-bar-details/add-unit-three-bar-details.component.html
  3. 76
      src/app/statistic-analysis/addUnit/add-unit-three-bar-details/add-unit-three-bar-details.component.scss
  4. 25
      src/app/statistic-analysis/addUnit/add-unit-three-bar-details/add-unit-three-bar-details.component.spec.ts
  5. 176
      src/app/statistic-analysis/addUnit/add-unit-three-bar-details/add-unit-three-bar-details.component.ts
  6. 24
      src/app/statistic-analysis/addUnit/add-unit-three-line-details/add-unit-three-line-details.component.html
  7. 76
      src/app/statistic-analysis/addUnit/add-unit-three-line-details/add-unit-three-line-details.component.scss
  8. 25
      src/app/statistic-analysis/addUnit/add-unit-three-line-details/add-unit-three-line-details.component.spec.ts
  9. 192
      src/app/statistic-analysis/addUnit/add-unit-three-line-details/add-unit-three-line-details.component.ts
  10. 24
      src/app/statistic-analysis/addUnit/add-unit-two-time/add-unit-two-time.component.ts
  11. 7
      src/app/statistic-analysis/addUnit/add-unit-two-type-details/add-unit-two-type-details.component.ts
  12. 7
      src/app/statistic-analysis/addUnit/add-unit-two-type-statistics/add-unit-two-type-statistics.component.ts
  13. 38
      src/app/statistic-analysis/echarts-data.service.ts
  14. 4
      src/app/statistic-analysis/statistic-analysis-routing.module.ts
  15. 4
      src/app/statistic-analysis/statistic-analysis.module.ts

8
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+='</table></div></div>'
return res
}
ngOnDestroy(){
window.clearTimeout(this.setTimeoutObj);
}
}

30
src/app/statistic-analysis/addUnit/add-unit-three-bar-details/add-unit-three-bar-details.component.html

@ -0,0 +1,30 @@
<div class="box">
<div class="header">
<div class="queryField">
<form #form="ngForm" (ngSubmit)="Submit(form.value)">
<span>查询年份:</span>
<mat-form-field>
<mat-select [(ngModel)]="selectOneYear" name='selectOneYear'>
<mat-option *ngFor="let item of years" [value]="item">{{item}}</mat-option>
</mat-select>
</mat-form-field>
<span>查询月份:</span>
<mat-form-field>
<mat-select [(ngModel)]="selectStartMonth" name='selectStartMonth'>
<mat-option *ngFor="let item of selectMonth" [value]="item">{{item}}</mat-option>
</mat-select>
</mat-form-field>
<button type="submit" mat-raised-button color="primary">查询</button>
</form>
</div>
<div class="btnbox">
<button mat-stroked-button (click)="backBtn()">返回</button>
</div>
</div>
<div class="echartsbox">
<div id="barEchart">
</div>
</div>
</div>

76
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%);
}
}

25
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<AddUnitThreeBarDetailsComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ AddUnitThreeBarDetailsComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(AddUnitThreeBarDetailsComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

176
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 = '<div class="tishi" style=" backgroundColor:rgba(255,255,255,1);width:100%;height:100%;"><div style="padding:10px 0 5px 0"><span style="color:#000000;font-size:30px;text-align: center;display:block;">'+params.name+'</span></div>'
res+='</br><div style="width:300px;height:100%;padding:0 20px 15px 20px"><table style="width:300px; background:#FFFFFF; color:#000000;border-collapse:collapse;"cellspacing="0"; >';
res+='<thead><tr>';
res+='<td style="text-align:center;width:30%;border:1px solid #000000">名称</td>';
res+='<td style="text-align:center;width:30%;border:1px solid #000000">数量</td>'
res+='<td style="text-align:center;width:30%;border:1px solid #000000">总占比</td>'
res+='</tr></thead>'
res+='<tbody>';
for(var i=0;i<data.length;i++){
res+='<tr>'
res+='<td style="text-align:center;border:1px solid #000000">'+data[i].name+'</td>'
res+='<td style="text-align:center;border:1px solid #000000">'+data[i].number+'</td>'
res+='<td style="text-align:center;border:1px solid #000000">'+data[i].zhanbi+'</td></tr>'
}
res+='</tbody>'
// res+='<tfoot><td style="text-align:center;border:1px solid #000000">总计</td><td style="text-align:center;border:1px solid #000000">1356</td><td style="text-align:center;border:1px solid #000000">19%</td></tfoot>'
res+='</table></div></div>'
return res
}
}

24
src/app/statistic-analysis/addUnit/add-unit-three-line-details/add-unit-three-line-details.component.html

@ -0,0 +1,24 @@
<div class="box">
<div class="header">
<div class="queryField">
<form #form="ngForm" (ngSubmit)="Submit(form.value)">
<span>查询年份:</span>
<mat-form-field>
<mat-select [(ngModel)]="selectOneYear" name='selectOneYear'>
<mat-option *ngFor="let item of years" [value]="item">{{item}}</mat-option>
</mat-select>
</mat-form-field>
<button type="submit" mat-raised-button color="primary">查询</button>
</form>
</div>
<div class="btnbox">
<button mat-stroked-button (click)="backBtn()">返回</button>
</div>
</div>
<div class="echartsbox">
<div id="barEchart">
</div>
</div>
</div>

76
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%);
}
}

25
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<AddUnitThreeLineDetailsComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ AddUnitThreeLineDetailsComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(AddUnitThreeLineDetailsComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

192
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 = '<div class="tishi" style=" backgroundColor:rgba(255,255,255,1);width:100%;height:100%;"><div style="padding:10px 0 5px 0"><span style="color:#000000;font-size:30px;text-align: center;display:block;">'+params.name+'</span></div>'
res+='</br><div style="width:300px;height:100%;padding:0 20px 15px 20px"><table style="width:300px; background:#FFFFFF; color:#000000;border-collapse:collapse;"cellspacing="0"; >';
res+='<thead><tr>';
res+='<td style="text-align:center;width:30%;border:1px solid #000000">名称</td>';
res+='<td style="text-align:center;width:30%;border:1px solid #000000">数量</td>'
res+='<td style="text-align:center;width:30%;border:1px solid #000000">总占比</td>'
res+='</tr></thead>'
res+='<tbody>';
for(var i=0;i<data.length;i++){
res+='<tr>'
res+='<td style="text-align:center;border:1px solid #000000">'+data[i].name+'</td>'
res+='<td style="text-align:center;border:1px solid #000000">'+data[i].number+'</td>'
res+='<td style="text-align:center;border:1px solid #000000">'+data[i].zhanbi+'</td></tr>'
}
res+='</tbody>'
// res+='<tfoot><td style="text-align:center;border:1px solid #000000">总计</td><td style="text-align:center;border:1px solid #000000">1356</td><td style="text-align:center;border:1px solid #000000">19%</td></tfoot>'
res+='</table></div></div>'
return res
}
}

24
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,8 +235,12 @@ export class AddUnitTwoTimeComponent implements OnInit {
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)
}
}
},
// x轴
xAxis: {
@ -279,15 +285,17 @@ 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}});
}
}
});

7
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', // 在上方显示

7
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,

38
src/app/statistic-analysis/echarts-data.service.ts

@ -147,7 +147,45 @@ 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];
}
//用法:

4
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}
];

4
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,

Loading…
Cancel
Save