chenjingyu
4 years ago
16 changed files with 807 additions and 30 deletions
@ -0,0 +1,32 @@ |
|||||||
|
<!-- |
||||||
|
* @Descripttion: |
||||||
|
* @version: |
||||||
|
* @Author: sueRimn |
||||||
|
* @Date: 2020-09-17 10:56:18 |
||||||
|
* @LastEditors: sueRimn |
||||||
|
* @LastEditTime: 2020-09-17 14:08:14 |
||||||
|
--> |
||||||
|
<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)="goBack()">返回</button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="echartsbox"> |
||||||
|
<div id="barEchart"> |
||||||
|
|
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
@ -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: 80%; |
||||||
|
height: 550px; |
||||||
|
//position: absolute; |
||||||
|
left: 50%; |
||||||
|
top: 50%; |
||||||
|
transform: translate(-50%,-50%); |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,25 @@ |
|||||||
|
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
||||||
|
|
||||||
|
import { PageThereYearComponent } from './page-there-year.component'; |
||||||
|
|
||||||
|
describe('PageThereYearComponent', () => { |
||||||
|
let component: PageThereYearComponent; |
||||||
|
let fixture: ComponentFixture<PageThereYearComponent>; |
||||||
|
|
||||||
|
beforeEach(async(() => { |
||||||
|
TestBed.configureTestingModule({ |
||||||
|
declarations: [ PageThereYearComponent ] |
||||||
|
}) |
||||||
|
.compileComponents(); |
||||||
|
})); |
||||||
|
|
||||||
|
beforeEach(() => { |
||||||
|
fixture = TestBed.createComponent(PageThereYearComponent); |
||||||
|
component = fixture.componentInstance; |
||||||
|
fixture.detectChanges(); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should create', () => { |
||||||
|
expect(component).toBeTruthy(); |
||||||
|
}); |
||||||
|
}); |
||||||
@ -0,0 +1,199 @@ |
|||||||
|
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-page-there-year', |
||||||
|
templateUrl: './page-there-year.component.html', |
||||||
|
styleUrls: ['./page-there-year.component.scss'] |
||||||
|
}) |
||||||
|
export class PageThereYearComponent 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.bianli() |
||||||
|
this.route.queryParams.subscribe(params => { |
||||||
|
this.year = params['level']; |
||||||
|
this.buildingTypeName = params['headtext']; |
||||||
|
}); |
||||||
|
this.setTimeoutObj = window.setTimeout(()=>{ |
||||||
|
this.detailEcharts() |
||||||
|
}) |
||||||
|
} |
||||||
|
ngOnDestroy(){ |
||||||
|
window.clearTimeout(this.setTimeoutObj); |
||||||
|
this.detailPlanEchart.clear() |
||||||
|
this.detailPlanEchart.dispose() |
||||||
|
} |
||||||
|
|
||||||
|
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] |
||||||
|
tiaoshiPao:any |
||||||
|
//气泡提示数据获取
|
||||||
|
bianli(){ |
||||||
|
var arrshuzu='['; |
||||||
|
for(var i=0;i<this.dateNum.length;i++){ |
||||||
|
arrshuzu+='{"value":'+this.dateNum[i]+',"coord":['+i+','+this.dateNum[i]+'],"name":'+'"'+this.date[i]+'"'+'},' |
||||||
|
} |
||||||
|
arrshuzu=arrshuzu.substring(0,arrshuzu.length-1) |
||||||
|
arrshuzu+=']' |
||||||
|
this.tiaoshiPao=JSON.parse(arrshuzu) |
||||||
|
console.log(this.tiaoshiPao) |
||||||
|
//return tishiPao
|
||||||
|
} |
||||||
|
//返回
|
||||||
|
goBack () { |
||||||
|
history.go(-1) |
||||||
|
//this.echartsData.statefulInspectionToggle = true
|
||||||
|
} |
||||||
|
|
||||||
|
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.year}${this.buildingTypeName}`, |
||||||
|
top: -4, |
||||||
|
left: 'center', |
||||||
|
textStyle:{ |
||||||
|
//文字颜色
|
||||||
|
color:'#000', |
||||||
|
fontSize: 30 |
||||||
|
} |
||||||
|
}, |
||||||
|
//提示框
|
||||||
|
tooltip: { |
||||||
|
trigger: 'axis', |
||||||
|
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", //刻度线标签颜色
|
||||||
|
textStyle:{ |
||||||
|
fontSize :18, |
||||||
|
color:'#000000' |
||||||
|
} |
||||||
|
}, |
||||||
|
//设置坐标轴字体颜色和宽度
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: { |
||||||
|
color: "#000", |
||||||
|
}, |
||||||
|
}, |
||||||
|
splitLine: {//分割线配置
|
||||||
|
show:true, |
||||||
|
lineStyle: { |
||||||
|
color: '#999', |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
// y轴
|
||||||
|
yAxis: { |
||||||
|
type: 'value', |
||||||
|
name: '个', |
||||||
|
axisLabel: { |
||||||
|
//color: "#000", //刻度线标签颜色
|
||||||
|
textStyle:{ |
||||||
|
fontSize :18, |
||||||
|
color:'#000000' |
||||||
|
} |
||||||
|
}, |
||||||
|
//设置坐标轴字体颜色和宽度
|
||||||
|
axisLine: { |
||||||
|
lineStyle: { |
||||||
|
color: "#000", |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
// 数据
|
||||||
|
series: [{ |
||||||
|
name: 'xxx', |
||||||
|
type: 'line', |
||||||
|
markPoint: { |
||||||
|
symbolSize:[65, 65], |
||||||
|
data: this.tiaoshiPao |
||||||
|
}, |
||||||
|
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/stataPageThere'],{queryParams:{'level':this.option.xAxis.data[xIndex],'headtext':this.buildingTypeName,'zhong':'1'}}); |
||||||
|
} |
||||||
|
}); |
||||||
|
} |
||||||
|
//返回按钮
|
||||||
|
backBtn(){ |
||||||
|
window.history.go(-1) |
||||||
|
}
|
||||||
|
|
||||||
|
} |
||||||
@ -0,0 +1,38 @@ |
|||||||
|
<!-- |
||||||
|
* @Descripttion: |
||||||
|
* @version: |
||||||
|
* @Author: sueRimn |
||||||
|
* @Date: 2020-09-17 10:53:38 |
||||||
|
* @LastEditors: sueRimn |
||||||
|
* @LastEditTime: 2020-09-17 11:06:12 |
||||||
|
--> |
||||||
|
<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)="goBack()">返回</button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="zhu"> |
||||||
|
<div id="zhidui"> |
||||||
|
|
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
@ -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; |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
.zhu{ |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
overflow: auto; |
||||||
|
#zhidui{ |
||||||
|
width: 100%; |
||||||
|
height: 550px; |
||||||
|
position: absolute; |
||||||
|
left: 50%; |
||||||
|
top: 50%; |
||||||
|
transform: translate(-50%,-50%); |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,25 @@ |
|||||||
|
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
||||||
|
|
||||||
|
import { PageThereComponent } from './page-there.component'; |
||||||
|
|
||||||
|
describe('PageThereComponent', () => { |
||||||
|
let component: PageThereComponent; |
||||||
|
let fixture: ComponentFixture<PageThereComponent>; |
||||||
|
|
||||||
|
beforeEach(async(() => { |
||||||
|
TestBed.configureTestingModule({ |
||||||
|
declarations: [ PageThereComponent ] |
||||||
|
}) |
||||||
|
.compileComponents(); |
||||||
|
})); |
||||||
|
|
||||||
|
beforeEach(() => { |
||||||
|
fixture = TestBed.createComponent(PageThereComponent); |
||||||
|
component = fixture.componentInstance; |
||||||
|
fixture.detectChanges(); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should create', () => { |
||||||
|
expect(component).toBeTruthy(); |
||||||
|
}); |
||||||
|
}); |
||||||
@ -0,0 +1,215 @@ |
|||||||
|
import { Component, OnInit } from '@angular/core'; |
||||||
|
import { Router,ActivatedRoute } from '@angular/router'; |
||||||
|
import {EchartsDataService} from '../../echarts-data.service'; |
||||||
|
import { MatSnackBarConfig, MatSnackBar } from '@angular/material/snack-bar'; |
||||||
|
import { DateAdapter } from '@angular/material/core'; |
||||||
|
declare var echarts: any; |
||||||
|
|
||||||
|
@Component({ |
||||||
|
selector: 'app-page-there', |
||||||
|
templateUrl: './page-there.component.html', |
||||||
|
styleUrls: ['./page-there.component.scss'] |
||||||
|
}) |
||||||
|
export class PageThereComponent implements OnInit { |
||||||
|
|
||||||
|
constructor(private router: Router,private activatedRoute: ActivatedRoute,public echartsData:EchartsDataService,public snackBar: MatSnackBar,private adapter: DateAdapter<any>) { } |
||||||
|
|
||||||
|
zhutu//echarts实例
|
||||||
|
option |
||||||
|
time:String |
||||||
|
buildingTypeName:String |
||||||
|
setTimeoutObj//延时器需要清除
|
||||||
|
headtext:string; |
||||||
|
zhong:string |
||||||
|
|
||||||
|
ngOnDestroy():void{ |
||||||
|
this.zhutu.clear() |
||||||
|
this.zhutu.dispose() |
||||||
|
} |
||||||
|
|
||||||
|
ngOnInit(): void { |
||||||
|
this.tiaoshiPao=this.echartsData.qipao(this.tiaoshiPao,this.zhiNumData,this.zhiNameData) |
||||||
|
this.dateInit(); |
||||||
|
//let headtext:string;
|
||||||
|
let datayuex:string; |
||||||
|
let headName:string; |
||||||
|
// console.log(this.activatedRoute.queryParams.subscribe)
|
||||||
|
//headtext=this.activatedRoute.queryParams["headtext"];
|
||||||
|
this.activatedRoute.queryParams.subscribe(param=>{ |
||||||
|
this.headtext=param.headtext |
||||||
|
datayuex=param.level |
||||||
|
this.zhong=param.zhong |
||||||
|
headName=datayuex+''+this.headtext; |
||||||
|
//console.log(headName)
|
||||||
|
});
|
||||||
|
window.setTimeout(()=>{ |
||||||
|
this.zhuzhuangtu(headName) |
||||||
|
},0) |
||||||
|
} |
||||||
|
|
||||||
|
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) |
||||||
|
} |
||||||
|
// console.log(this.years)
|
||||||
|
} |
||||||
|
|
||||||
|
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 |
||||||
|
} |
||||||
|
}//柱状图数值顶部显示
|
||||||
|
zhiNameData = ["浦东支队","黄埔支队","徐汇支队","长宁支队","静安支队","普陀支队","虹口支队","杨浦支队","闵行支队","宝山支队","嘉定支队","松江支队","金山支队","崇明支队"] |
||||||
|
zhiNumData = [200,190,180,170,160,150,140,130,120,110,100,90,80,70] |
||||||
|
zhongNameData = ["浦东中队","黄埔中队","徐汇中队","长宁中队","静安中队","普陀中队","虹口中队","杨浦中队","闵行中队","宝山中队","嘉定中队","松江中队","金山中队","崇明中队"] |
||||||
|
tiaoshiPao:any |
||||||
|
//气泡提示数据获取
|
||||||
|
bianli(){ |
||||||
|
var arrshuzu='['; |
||||||
|
for(var i=0;i<this.zhiNumData.length;i++){ |
||||||
|
arrshuzu+='{"value":'+this.zhiNumData[i]+',"coord":['+i+','+this.zhiNumData[i]+'],"name":'+'"'+this.zhiNameData[i]+'"'+'},' |
||||||
|
} |
||||||
|
arrshuzu=arrshuzu.substring(0,arrshuzu.length-1) |
||||||
|
arrshuzu+=']' |
||||||
|
this.tiaoshiPao=JSON.parse(arrshuzu) |
||||||
|
console.log(this.tiaoshiPao) |
||||||
|
//return tishiPao
|
||||||
|
} |
||||||
|
date = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月','九月'] |
||||||
|
dateNum = [270, 253, 244, 199, 189, 173, 160, 198,200] |
||||||
|
//返回
|
||||||
|
goBack () { |
||||||
|
history.go(-1) |
||||||
|
this.echartsData.statefulInspectionToggle = true |
||||||
|
} |
||||||
|
|
||||||
|
axisLabel = { |
||||||
|
interval: 0,
|
||||||
|
formatter:function(value)
|
||||||
|
{
|
||||||
|
var ret = "";//拼接加\n返回的类目项
|
||||||
|
var maxLength = 2;//每项显示文字个数
|
||||||
|
var valLength = value.length;//X轴类目项的文字个数
|
||||||
|
var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
|
||||||
|
if (rowN > 1)//如果类目项的文字大于3,
|
||||||
|
{
|
||||||
|
for (var i = 0; i < rowN; i++) {
|
||||||
|
var temp = "";//每次截取的字符串
|
||||||
|
var start = i * maxLength;//开始截取的位置
|
||||||
|
var end = start + maxLength;//结束截取的位置
|
||||||
|
//这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
|
||||||
|
temp = value.substring(start, end) + "\n";
|
||||||
|
ret += temp; //凭借最终的字符串
|
||||||
|
}
|
||||||
|
return ret;
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
return value;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}//echarts两个字换行
|
||||||
|
/* 柱状图 */ |
||||||
|
zhuzhuangtu(headName:string){ |
||||||
|
var ec = echarts as any; |
||||||
|
this.zhutu = ec.init(document.getElementById('zhidui'),'walden'); |
||||||
|
this.option = { |
||||||
|
title: { |
||||||
|
text: headName, |
||||||
|
left: "center", |
||||||
|
top: "0", |
||||||
|
textStyle: { |
||||||
|
fontSize: 30 |
||||||
|
} |
||||||
|
}, |
||||||
|
/* grid: { |
||||||
|
left: '5%',
|
||||||
|
bottom:'35%'
|
||||||
|
}, */ |
||||||
|
xAxis: { |
||||||
|
type: 'category', |
||||||
|
data: this.zhiNameData, |
||||||
|
//axisLabel: this.axisLabel,
|
||||||
|
axisLabel:{ |
||||||
|
//this.axisLabel,
|
||||||
|
textStyle:{ |
||||||
|
fontSize :18, |
||||||
|
color:'#000000' |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
}, |
||||||
|
yAxis: { |
||||||
|
type: 'value', |
||||||
|
axisLabel:{ |
||||||
|
textStyle:{ |
||||||
|
fontSize :18, |
||||||
|
color:'#000000' |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
}, |
||||||
|
tooltip: { |
||||||
|
trigger: 'item', |
||||||
|
formatter: (params)=>{ |
||||||
|
return this.echartsData.biaogeTishi(params.name) |
||||||
|
}, |
||||||
|
position: this.echartsData.tableTooltipNoShowq |
||||||
|
/* backgroundColor:'rgba(255,255,255,1)', |
||||||
|
borderWidth:'1', |
||||||
|
borderRadius :'0' */ |
||||||
|
}, |
||||||
|
series: [{ |
||||||
|
data: this.zhiNumData, |
||||||
|
type: 'bar', |
||||||
|
markPoint: { |
||||||
|
symbolSize:[65, 65], |
||||||
|
data: this.tiaoshiPao |
||||||
|
}, |
||||||
|
backgroundStyle: { |
||||||
|
color: 'rgba(220, 220, 220, 0.8)' |
||||||
|
}, |
||||||
|
barWidth :'38', |
||||||
|
//label: this.topTextlabel
|
||||||
|
}] |
||||||
|
}; |
||||||
|
this.zhutu.getZr().on('click',params=>{ |
||||||
|
// console.log(params.name)
|
||||||
|
const pointInPixel= [params.offsetX, params.offsetY]; |
||||||
|
if (this.zhutu.containPixel('grid',pointInPixel)) { |
||||||
|
let xIndex=this.zhutu.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0]; |
||||||
|
/*事件处理代码书写位置*/ |
||||||
|
/* this.echartsData.statefulInspectionName = this.option.xAxis.data[xIndex]+'预案新增' |
||||||
|
this.echartsData.statefulInspectionToggle = false */ |
||||||
|
this.router.navigate(['/statisticanalysis/PageZhongDuiDetails'],{queryParams:{'level':this.option.xAxis.data[xIndex],'headtext':headName}}); |
||||||
|
} |
||||||
|
}); |
||||||
|
/* this.zhutu.on('click', (params) => { |
||||||
|
console.log(params) |
||||||
|
this.echartsData.statefulInspectionName =params.name; |
||||||
|
this.router.navigateByUrl(`/statisticanalysis/delete_one/delete_four`); |
||||||
|
}); */ |
||||||
|
this.zhutu.setOption(this.option); |
||||||
|
} |
||||||
|
} |
||||||
Loading…
Reference in new issue