|
|
|
@ -15,8 +15,11 @@ export class HomeComponent implements OnInit {
|
|
|
|
|
constructor(private http:HttpClient, private render2: Renderer2,public element: ElementRef,private router: Router,public emitService: EchartsDataService) { } |
|
|
|
|
|
|
|
|
|
map:any; //地图
|
|
|
|
|
ngOnInit() { |
|
|
|
|
this.emitService.eventEmit.subscribe((value: any) => { |
|
|
|
|
yuandata |
|
|
|
|
ngOnInit() { |
|
|
|
|
this.level=sessionStorage.getItem("level") |
|
|
|
|
this.getechartsdata() |
|
|
|
|
/* this.emitService.eventEmit.subscribe((value: any) => { |
|
|
|
|
if (value == 'echarts') { |
|
|
|
|
setTimeout(() => { |
|
|
|
|
this.updateEcharts() |
|
|
|
@ -27,23 +30,48 @@ export class HomeComponent implements OnInit {
|
|
|
|
|
setTimeout(() => { |
|
|
|
|
this.updateEcharts() |
|
|
|
|
}, 0); |
|
|
|
|
}) |
|
|
|
|
}) */ |
|
|
|
|
|
|
|
|
|
window.setTimeout(()=>{ |
|
|
|
|
this.unitType() |
|
|
|
|
/* this.unitType() |
|
|
|
|
this.unitData() |
|
|
|
|
this.keyUnit() |
|
|
|
|
this.keyUnit() */ |
|
|
|
|
this.mapInit() //初始化地图
|
|
|
|
|
},0) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
//更新echarts视图
|
|
|
|
|
updateEcharts(){ |
|
|
|
|
/* updateEcharts(){ |
|
|
|
|
this.planState.resize() |
|
|
|
|
this.chartDwsjcj.resize() |
|
|
|
|
this.chartZdgzqy.resize() |
|
|
|
|
|
|
|
|
|
} */ |
|
|
|
|
//获取数据
|
|
|
|
|
ordata |
|
|
|
|
buildtableData |
|
|
|
|
lengthdata=[]//建筑提示数据
|
|
|
|
|
buildcount=0//建筑总数
|
|
|
|
|
indexData=[]//建筑所有数据
|
|
|
|
|
async getechartsdata(){ |
|
|
|
|
let paramsdata:any = { |
|
|
|
|
OrganizationId:this.orid||'', |
|
|
|
|
//organizationId:'1'
|
|
|
|
|
} |
|
|
|
|
//获取组织机构数据
|
|
|
|
|
await this.emitService.getData(paramsdata,`/api/StatisticsAnalysis/Companies`) |
|
|
|
|
this.ordata=JSON.parse(JSON.stringify(this.emitService.allDate)) |
|
|
|
|
console.log(this.ordata) |
|
|
|
|
this.keyUnitNum=this.ordata[0].organizationStatistics.totalCount |
|
|
|
|
this.unitData() |
|
|
|
|
//获取预案状态统计数据
|
|
|
|
|
await this.emitService.getData(paramsdata,`/api/StatisticsAnalysis/Plans`) |
|
|
|
|
this.unitType() |
|
|
|
|
//获取建筑类型统计数据
|
|
|
|
|
await this.emitService.getData(paramsdata,`/api/StatisticsAnalysis/BuildingTypes`) |
|
|
|
|
this.keyUnit() |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
threePlan(){ |
|
|
|
|
// this.router.navigate(['/planManagement/entryPlan'])
|
|
|
|
@ -64,16 +92,18 @@ export class HomeComponent implements OnInit {
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
ngOnDestroy(): void { |
|
|
|
|
this.planState.clear() |
|
|
|
|
/* this.planState.clear() |
|
|
|
|
this.planState.dispose() |
|
|
|
|
this.chartDwsjcj.clear() |
|
|
|
|
this.chartDwsjcj.dispose() |
|
|
|
|
this.chartZdgzqy.clear() |
|
|
|
|
this.chartZdgzqy.dispose() |
|
|
|
|
this.chartZdgzqy.dispose() */ |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
//初始化地图
|
|
|
|
|
adcode:any //行政编码
|
|
|
|
|
level//组织级别
|
|
|
|
|
orid |
|
|
|
|
mapInit () { |
|
|
|
|
//创建地图
|
|
|
|
|
this.map = new AMap.Map('chartMap', { |
|
|
|
@ -149,8 +179,19 @@ export class HomeComponent implements OnInit {
|
|
|
|
|
// 更新地图视野以适合区划面
|
|
|
|
|
this.map.setFitView(districtExplorer.getAllFeaturePolygons()); |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
if(this.level=="0"||this.level=="1"||this.level=="2"){ |
|
|
|
|
//区域内点击
|
|
|
|
|
districtExplorer.on('featureClick', (e, feature) =>{ |
|
|
|
|
//console.log(feature)
|
|
|
|
|
let paramsdata:any ={ |
|
|
|
|
name:feature.properties.name, |
|
|
|
|
level:Number(this.level)+1 |
|
|
|
|
} |
|
|
|
|
this.http.get("/api/Organizations/GetIdByName",{params:paramsdata}).subscribe((data:any)=>{ |
|
|
|
|
console.log(data) |
|
|
|
|
this.orid=data[0] |
|
|
|
|
this.getechartsdata() |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
let props = feature.properties; |
|
|
|
|
adcode = props.adcode |
|
|
|
@ -203,20 +244,22 @@ export class HomeComponent implements OnInit {
|
|
|
|
|
this.map.setFitView(districtExplorer.getAllFeaturePolygons()); |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
this.planState.setOption(this.planStateOptionsZhong); |
|
|
|
|
this.chartDwsjcj.setOption(this.chartDwsjcjOptionsZhong); |
|
|
|
|
this.chartZdgzqy.setOption(this.chartZdgzqyOptionsZhong); |
|
|
|
|
this.planNum = ["0","0","3","1","6","5"] |
|
|
|
|
this.keyUnitNum = 666 |
|
|
|
|
this.dataGetNum = 456 |
|
|
|
|
|
|
|
|
|
this.threePlanNum = "867" |
|
|
|
|
//this.planState.setOption(this.planStateOptionsZhong);
|
|
|
|
|
//this.chartDwsjcj.setOption(this.chartDwsjcjOptionsZhong);
|
|
|
|
|
//this.chartZdgzqy.setOption(this.chartZdgzqyOptionsZhong);
|
|
|
|
|
/* this.planNum = ["0","0","3","1","6","5"] |
|
|
|
|
this.keyUnitNum = 666 */ |
|
|
|
|
//this.dataGetNum = 456
|
|
|
|
|
|
|
|
|
|
/* this.threePlanNum = "867" |
|
|
|
|
this.twoPlanNum = "485" |
|
|
|
|
this.cardPlanNum = "756" |
|
|
|
|
this.otherPlanNum = "658" |
|
|
|
|
this.otherPlanNum = "658" */ |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
districtExplorer.on('outsideClick', (e) => { |
|
|
|
|
this.orid='' |
|
|
|
|
this.getechartsdata() |
|
|
|
|
// console.log('区域外点击');
|
|
|
|
|
let adcode |
|
|
|
|
if(sessionStorage.getItem("realName") == "上海总队"){ |
|
|
|
@ -266,25 +309,27 @@ export class HomeComponent implements OnInit {
|
|
|
|
|
// 更新地图视野以适合区划面
|
|
|
|
|
this.map.setFitView(districtExplorer.getAllFeaturePolygons()); |
|
|
|
|
}); |
|
|
|
|
this.planState.setOption(this.planStateOptionsZhi); |
|
|
|
|
/* this.planState.setOption(this.planStateOptionsZhi); |
|
|
|
|
this.chartDwsjcj.setOption(this.chartDwsjcjOptionsZhi); |
|
|
|
|
this.chartZdgzqy.setOption(this.chartZdgzqyOptionsZhi); |
|
|
|
|
this.planNum = ["0","2","2","6","7","8"] |
|
|
|
|
this.chartZdgzqy.setOption(this.chartZdgzqyOptionsZhi); */ |
|
|
|
|
/* this.planNum = ["0","2","2","6","7","8"] |
|
|
|
|
this.keyUnitNum = 8036 |
|
|
|
|
this.dataGetNum = 6578 |
|
|
|
|
this.dataGetNum = 6578 */ |
|
|
|
|
|
|
|
|
|
this.threePlanNum = "4374" |
|
|
|
|
/* this.threePlanNum = "4374" |
|
|
|
|
this.twoPlanNum = "9693" |
|
|
|
|
this.cardPlanNum = "6403" |
|
|
|
|
this.otherPlanNum = "2208" |
|
|
|
|
this.otherPlanNum = "2208" */ |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
planNum = ["0","2","2","6","7","8"] |
|
|
|
|
keyUnitNum = 8036 |
|
|
|
|
planNum = [] |
|
|
|
|
keyUnitNum |
|
|
|
|
dataGetNum = 6578 |
|
|
|
|
|
|
|
|
|
threePlanNum = "4374" |
|
|
|
@ -302,103 +347,111 @@ export class HomeComponent implements OnInit {
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
planState |
|
|
|
|
planStateOptionsZhi = { |
|
|
|
|
title: { |
|
|
|
|
text: '预案状态统计(7005份)', |
|
|
|
|
left: 'left',
|
|
|
|
|
textStyle:{ |
|
|
|
|
color:'#fff', |
|
|
|
|
fontWeight:'normal' |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
tooltip: { |
|
|
|
|
trigger: 'item', |
|
|
|
|
formatter: '{b} : {c} ({d}%)' |
|
|
|
|
}, |
|
|
|
|
series: [ |
|
|
|
|
{ |
|
|
|
|
name: '访问来源', |
|
|
|
|
type: 'pie', |
|
|
|
|
radius: '60%', |
|
|
|
|
center: ['50%', '58%'], |
|
|
|
|
label:{ |
|
|
|
|
show:true, |
|
|
|
|
//fontSize:10,
|
|
|
|
|
formatter:'{b}\n{d|{c}份}', |
|
|
|
|
rich: { |
|
|
|
|
d: { |
|
|
|
|
align: 'center', |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
}, |
|
|
|
|
data: [ |
|
|
|
|
{value: 1585, name: '预案新增'}, |
|
|
|
|
{value: 2000, name: '审核通过',itemStyle:{color:'#02A7F0'}}, |
|
|
|
|
{value: 2600, name: '预案编制'}, |
|
|
|
|
{value: 1500, name: '审核退回'}, |
|
|
|
|
{value: 1800, name: '预案审核中'} |
|
|
|
|
], |
|
|
|
|
emphasis: { |
|
|
|
|
itemStyle: { |
|
|
|
|
shadowBlur: 10, |
|
|
|
|
shadowOffsetX: 0, |
|
|
|
|
shadowColor: 'rgba(0, 0, 0, 0.5)' |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//预案状态统计
|
|
|
|
|
pagedata |
|
|
|
|
pagedataCount |
|
|
|
|
unitType () { |
|
|
|
|
this.planNum=[] |
|
|
|
|
this.pagedata=JSON.parse(JSON.stringify(this.emitService.allDate)) |
|
|
|
|
console.log(this.pagedata) |
|
|
|
|
this.pagedataCount=String(this.pagedata[0].planStatusStatistics.totalCount) |
|
|
|
|
for(var i=0;i<this.pagedataCount.length;i++){ |
|
|
|
|
this.planNum.push(this.pagedataCount[i]) |
|
|
|
|
} |
|
|
|
|
//this.planNum.push(this.pagedataCount.split(','))
|
|
|
|
|
if(this.pagedata[0].planTypeStatistics.planTypes.length<=0){ |
|
|
|
|
this.threePlanNum='0' |
|
|
|
|
this.twoPlanNum='0' |
|
|
|
|
this.cardPlanNum='0' |
|
|
|
|
this.otherPlanNum='0' |
|
|
|
|
}else{ |
|
|
|
|
this.pagedata[0].planTypeStatistics.planTypes.forEach((value,index,array) => { |
|
|
|
|
if(array[index].planTypeName=='Plan2D'){ |
|
|
|
|
this.twoPlanNum=array[index].count |
|
|
|
|
}else if(array[index].planTypeName=='Plan3D'){ |
|
|
|
|
this.threePlanNum=array[index].count |
|
|
|
|
}else if(array[index].planTypeName=='Other'){ |
|
|
|
|
this.otherPlanNum=array[index].count |
|
|
|
|
}else if(array[index].planTypeName=='PlanText'){ |
|
|
|
|
this.cardPlanNum=array[index].count |
|
|
|
|
} |
|
|
|
|
] |
|
|
|
|
}; |
|
|
|
|
planStateOptionsZhong = { |
|
|
|
|
title: { |
|
|
|
|
text: '预案状态统计(895份)', |
|
|
|
|
left: 'left',
|
|
|
|
|
textStyle:{ |
|
|
|
|
color:'#fff', |
|
|
|
|
fontWeight:'normal' |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
if(this.pagedata[0].planCategoryStatistics.planCategories.length<=0){ |
|
|
|
|
this.aPlan='0' |
|
|
|
|
this.bPlan='0' |
|
|
|
|
this.cPlan='0' |
|
|
|
|
this.dPlan='0' |
|
|
|
|
this.ePlan='0' |
|
|
|
|
}else{ |
|
|
|
|
this.pagedata[0].planCategoryStatistics.planCategories.forEach((value,index,array) => { |
|
|
|
|
if(array[index].planCategoryName=='LevelOne'){ |
|
|
|
|
this.aPlan=array[index].count |
|
|
|
|
}else if(array[index].planCategoryName=='LevelTwo'){ |
|
|
|
|
this.bPlan=array[index].count |
|
|
|
|
}else if(array[index].planCategoryName=='LevelThree'){ |
|
|
|
|
this.cPlan=array[index].count |
|
|
|
|
}else if(array[index].planCategoryName=='LevelFour'){ |
|
|
|
|
this.dPlan=array[index].count |
|
|
|
|
}else if(array[index].planCategoryName=='LevelFive'){ |
|
|
|
|
this.ePlan=array[index].count |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
tooltip: { |
|
|
|
|
trigger: 'item', |
|
|
|
|
formatter: '{b} : {c} ({d}%)' |
|
|
|
|
}, |
|
|
|
|
series: [ |
|
|
|
|
{ |
|
|
|
|
name: '访问来源', |
|
|
|
|
type: 'pie', |
|
|
|
|
radius: '60%', |
|
|
|
|
center: ['50%', '58%'], |
|
|
|
|
label:{ |
|
|
|
|
show:true, |
|
|
|
|
formatter:'{b}\n{d|{c}份}', |
|
|
|
|
rich: { |
|
|
|
|
d: { |
|
|
|
|
align: 'center', |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* */ |
|
|
|
|
let planStateOptionsZhi = { |
|
|
|
|
title: { |
|
|
|
|
text: `预案状态统计(${this.pagedata[0].planStatusStatistics.totalCount}份)`, |
|
|
|
|
left: 'left',
|
|
|
|
|
textStyle:{ |
|
|
|
|
color:'#fff', |
|
|
|
|
fontWeight:'normal' |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
tooltip: { |
|
|
|
|
trigger: 'item', |
|
|
|
|
formatter: '{b} : {c} ({d}%)' |
|
|
|
|
}, |
|
|
|
|
series: [ |
|
|
|
|
{ |
|
|
|
|
name: '访问来源', |
|
|
|
|
type: 'pie', |
|
|
|
|
radius: '60%', |
|
|
|
|
center: ['50%', '58%'], |
|
|
|
|
label:{ |
|
|
|
|
show:true, |
|
|
|
|
//fontSize:10,
|
|
|
|
|
formatter:'{b}\n{d|{c}份}', |
|
|
|
|
rich: { |
|
|
|
|
d: { |
|
|
|
|
align: 'center', |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
}, |
|
|
|
|
data: [ |
|
|
|
|
{value: 200, name: '预案新增'}, |
|
|
|
|
{value: 234, name: '审核通过',itemStyle:{color:'#02A7F0'}}, |
|
|
|
|
{value: 165, name: '预案编制'}, |
|
|
|
|
{value: 189, name: '审核退回'}, |
|
|
|
|
{value: 211, name: '预案审核中'} |
|
|
|
|
data: [ |
|
|
|
|
{value:this.pagedata[0].planStatusStatistics.planStatuses[0]!=undefined? this.pagedata[0].planStatusStatistics.planStatuses[0].count:0, name: '预案新增',type:1,planStatusName:this.pagedata[0].planStatusStatistics.planStatuses[0]!=undefined?this.pagedata[0].planStatusStatistics.planStatuses[0].planStatusName:''}, |
|
|
|
|
{value:this.pagedata[0].planStatusStatistics.planStatuses[2]!=undefined? this.pagedata[0].planStatusStatistics.planStatuses[2].count:0, name: '预案审核通过',type:3,planStatusName:this.pagedata[0].planStatusStatistics.planStatuses[2]!=undefined? this.pagedata[0].planStatusStatistics.planStatuses[2].planStatusName:''}, |
|
|
|
|
{value:this.pagedata[0].planStatusStatistics.planStatuses[4]!=undefined? this.pagedata[0].planStatusStatistics.planStatuses[4].count:0, name: '预案编制',type:5,planStatusName:this.pagedata[0].planStatusStatistics.planStatuses[4]!=undefined?this.pagedata[0].planStatusStatistics.planStatuses[4].planStatusName:''}, |
|
|
|
|
{value:this.pagedata[0].planStatusStatistics.planStatuses[3]!=undefined? this.pagedata[0].planStatusStatistics.planStatuses[3].count:0, name: '预案审核退回',type:4,planStatusName:this.pagedata[0].planStatusStatistics.planStatuses[3]!=undefined? this.pagedata[0].planStatusStatistics.planStatuses[3].planStatusName:''}, |
|
|
|
|
{value:this.pagedata[0].planStatusStatistics.planStatuses[1]!=undefined? this.pagedata[0].planStatusStatistics.planStatuses[1].count:0, name: '预案审核中',type:2,planStatusName:this.pagedata[0].planStatusStatistics.planStatuses[1]!=undefined? this.pagedata[0].planStatusStatistics.planStatuses[1].planStatusName:''} |
|
|
|
|
], |
|
|
|
|
emphasis: { |
|
|
|
|
itemStyle: { |
|
|
|
|
shadowBlur: 10, |
|
|
|
|
shadowOffsetX: 0, |
|
|
|
|
shadowColor: 'rgba(0, 0, 0, 0.5)' |
|
|
|
|
} |
|
|
|
|
emphasis: { |
|
|
|
|
itemStyle: { |
|
|
|
|
shadowBlur: 10, |
|
|
|
|
shadowOffsetX: 0, |
|
|
|
|
shadowColor: 'rgba(0, 0, 0, 0.5)' |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
] |
|
|
|
|
}; |
|
|
|
|
//预案状态统计
|
|
|
|
|
unitType () { |
|
|
|
|
] |
|
|
|
|
}; |
|
|
|
|
this.planState = echarts.init(document.getElementById('chartHynyxf'), 'walden'); |
|
|
|
|
this.planState.setOption(this.planStateOptionsZhi); |
|
|
|
|
this.planState.setOption(planStateOptionsZhi); |
|
|
|
|
this.planState.on("click",(params) => { |
|
|
|
|
this.router.navigate(['/statisticanalysis/statePageOne']) |
|
|
|
|
}) |
|
|
|
@ -406,97 +459,9 @@ export class HomeComponent implements OnInit {
|
|
|
|
|
|
|
|
|
|
//新增、删除单位统计
|
|
|
|
|
chartDwsjcj |
|
|
|
|
chartDwsjcjOptionsZhi = { |
|
|
|
|
// 标题
|
|
|
|
|
title: { |
|
|
|
|
text: '新增、删除单位统计', |
|
|
|
|
left: 0, |
|
|
|
|
top: 0, |
|
|
|
|
textStyle:{ |
|
|
|
|
color:'#fff', |
|
|
|
|
fontWeight:'normal' |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
grid: { |
|
|
|
|
left: 30, |
|
|
|
|
right: 0, |
|
|
|
|
bottom:20 |
|
|
|
|
}, |
|
|
|
|
//图例
|
|
|
|
|
legend: { |
|
|
|
|
top: 0, |
|
|
|
|
data: ['新增单位', '删除单位', ], |
|
|
|
|
icon: 'circle', |
|
|
|
|
itemGap: 20, |
|
|
|
|
}, |
|
|
|
|
//提示框
|
|
|
|
|
tooltip: { |
|
|
|
|
trigger: 'axis', |
|
|
|
|
}, |
|
|
|
|
// x轴
|
|
|
|
|
xAxis: { |
|
|
|
|
type: 'category', |
|
|
|
|
data: ["浦东支队","黄浦支队","徐汇支队","长宁支队","静安支队","普陀支队","虹口支队","杨浦支队","闵行支队","宝山支队","嘉定支队","松江支队","金山支队","崇明支队"], |
|
|
|
|
axisLabel: { |
|
|
|
|
interval: 0, |
|
|
|
|
|
|
|
|
|
formatter:function(value){ |
|
|
|
|
var ret = "";//拼接加\n返回的类目项
|
|
|
|
|
var maxLength = 5;//每项显示文字个数
|
|
|
|
|
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; |
|
|
|
|
} |
|
|
|
|
} //function
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
// y轴
|
|
|
|
|
yAxis: { |
|
|
|
|
type: 'value', |
|
|
|
|
splitLine: { |
|
|
|
|
show: true, |
|
|
|
|
lineStyle: { |
|
|
|
|
color: 'rgba(255,255,255,.4)' |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
// 数据
|
|
|
|
|
series: [ |
|
|
|
|
{ |
|
|
|
|
name: '新增单位', |
|
|
|
|
type: 'bar', |
|
|
|
|
data: [320, 302, 301, 234, 390, 330, 320, 390, 330, 320, 390, 301, 234, 390 ], |
|
|
|
|
label: { |
|
|
|
|
show: false, |
|
|
|
|
position: "top", |
|
|
|
|
formatter: '{c}', |
|
|
|
|
color: "#fff", |
|
|
|
|
} |
|
|
|
|
}, { |
|
|
|
|
name: '删除单位', |
|
|
|
|
type: 'bar', |
|
|
|
|
data: [300, 202, 101, 134, 290, 430, 220, 490, 430, 490, 430, 202, 101, 134 ], |
|
|
|
|
label: { |
|
|
|
|
show: false, |
|
|
|
|
position: "top", |
|
|
|
|
formatter: '{c}', |
|
|
|
|
color: "#fff", |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
], |
|
|
|
|
}; |
|
|
|
|
addtable |
|
|
|
|
addxdata=[] |
|
|
|
|
addydata=[] |
|
|
|
|
chartDwsjcjOptionsZhong = { |
|
|
|
|
// color: ['#FB33C2', '#00CFF0', '#2C3DE0'],
|
|
|
|
|
// 标题
|
|
|
|
@ -589,154 +554,178 @@ export class HomeComponent implements OnInit {
|
|
|
|
|
], |
|
|
|
|
}; |
|
|
|
|
unitData () { |
|
|
|
|
this.addxdata=[] |
|
|
|
|
this.addydata=[] |
|
|
|
|
this.addtable=JSON.parse(JSON.stringify(this.emitService.allDate)) |
|
|
|
|
this.addtable[0].organizationStatistics.organizations.forEach((value,index,array) => { |
|
|
|
|
this.addxdata.push(array[index].organizationName) |
|
|
|
|
this.addydata.push(array[index].count) |
|
|
|
|
}); |
|
|
|
|
let chartDwsjcjOptionsZhi = { |
|
|
|
|
// 标题
|
|
|
|
|
title: { |
|
|
|
|
text: `新增单位统计(${this.addtable[0].totalCount}家)`, |
|
|
|
|
left: 0, |
|
|
|
|
top: 0, |
|
|
|
|
textStyle:{ |
|
|
|
|
color:'#fff', |
|
|
|
|
fontWeight:'normal' |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
grid: { |
|
|
|
|
//containLabel:true,
|
|
|
|
|
left: 30, |
|
|
|
|
right: 0, |
|
|
|
|
bottom:30 |
|
|
|
|
}, |
|
|
|
|
//图例
|
|
|
|
|
/* legend: { |
|
|
|
|
top: 0, |
|
|
|
|
data: ['新增单位' ], |
|
|
|
|
icon: 'circle', |
|
|
|
|
itemGap: 20, |
|
|
|
|
}, */ |
|
|
|
|
//提示框
|
|
|
|
|
tooltip: { |
|
|
|
|
trigger: 'axis', |
|
|
|
|
}, |
|
|
|
|
// x轴
|
|
|
|
|
xAxis: { |
|
|
|
|
type: 'category', |
|
|
|
|
data: this.addxdata, |
|
|
|
|
axisLabel: { |
|
|
|
|
interval: 0, |
|
|
|
|
|
|
|
|
|
formatter:function(value){ |
|
|
|
|
var ret = "";//拼接加\n返回的类目项
|
|
|
|
|
var maxLength = 5;//每项显示文字个数
|
|
|
|
|
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; |
|
|
|
|
} |
|
|
|
|
} //function
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
// y轴
|
|
|
|
|
yAxis: { |
|
|
|
|
type: 'value', |
|
|
|
|
splitLine: { |
|
|
|
|
show: true, |
|
|
|
|
lineStyle: { |
|
|
|
|
color: 'rgba(255,255,255,.4)' |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
// 数据
|
|
|
|
|
series: [ |
|
|
|
|
{ |
|
|
|
|
name: '新增单位', |
|
|
|
|
type: 'bar', |
|
|
|
|
data: this.addydata, |
|
|
|
|
label: { |
|
|
|
|
show: false, |
|
|
|
|
position: "top", |
|
|
|
|
formatter: '{c}', |
|
|
|
|
color: "#fff", |
|
|
|
|
}, |
|
|
|
|
barMaxWidth:'20%' |
|
|
|
|
} |
|
|
|
|
/* , { |
|
|
|
|
name: '删除单位', |
|
|
|
|
type: 'bar', |
|
|
|
|
data: [300, 202, 101, 134, 290, 430, 220, 490, 430, 490, 430, 202, 101, 134 ], |
|
|
|
|
label: { |
|
|
|
|
show: false, |
|
|
|
|
position: "top", |
|
|
|
|
formatter: '{c}', |
|
|
|
|
color: "#fff", |
|
|
|
|
} |
|
|
|
|
} */ |
|
|
|
|
], |
|
|
|
|
}; |
|
|
|
|
this.chartDwsjcj = echarts.init(document.getElementById('chartDwsjcj'),'walden'); |
|
|
|
|
this.chartDwsjcj.setOption(this.chartDwsjcjOptionsZhi); |
|
|
|
|
this.chartDwsjcj.setOption(chartDwsjcjOptionsZhi); |
|
|
|
|
this.chartDwsjcj.on("click",(params) => { |
|
|
|
|
if(params.seriesName == "新增单位"){ |
|
|
|
|
this.router.navigate(['/statisticanalysis/addUnit_one']) |
|
|
|
|
}else{ |
|
|
|
|
this.router.navigate(['/statisticanalysis/delete_one']) |
|
|
|
|
} |
|
|
|
|
this.router.navigate(['/statisticanalysis/addUnit_one']) |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
chartZdgzqy |
|
|
|
|
chartZdgzqyOptionsZhi = { |
|
|
|
|
title: { |
|
|
|
|
text: '建筑类型统计(8900家)', |
|
|
|
|
top: -5, |
|
|
|
|
left: 'left',
|
|
|
|
|
textStyle:{ |
|
|
|
|
color:'#fff', |
|
|
|
|
fontWeight:'normal' |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
tooltip: { |
|
|
|
|
trigger: 'item', |
|
|
|
|
formatter: '{b} : {c}家 ({d}%)' |
|
|
|
|
}, |
|
|
|
|
// legend: {
|
|
|
|
|
// orient: 'vertical',
|
|
|
|
|
// right: 150,
|
|
|
|
|
// top:80,
|
|
|
|
|
// data: ['高层', '地下', '轨道交通', '化工生产', '储罐类' , '厂房','古建筑', '商市场', '医院', '学校', '宾馆' , '娱乐场所','餐饮业', '影剧院', '展览建筑' , '隧道']
|
|
|
|
|
// },
|
|
|
|
|
series: [ |
|
|
|
|
{ |
|
|
|
|
name: '访问来源', |
|
|
|
|
type: 'pie', |
|
|
|
|
radius: '70%', |
|
|
|
|
center: ['50%', '61%'], |
|
|
|
|
label:{ |
|
|
|
|
show:true, |
|
|
|
|
// fontSize:13,
|
|
|
|
|
formatter:'{b}{c}家', |
|
|
|
|
rich: { |
|
|
|
|
d: { |
|
|
|
|
align: 'center', |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
data: [ |
|
|
|
|
{value: 500, name: '高层'}, |
|
|
|
|
{value: 800, name: '地下'}, |
|
|
|
|
{value: 900, name: '轨道交通'}, |
|
|
|
|
{value: 800, name: '化工生产'}, |
|
|
|
|
{value: 1200, name: '储罐类'}, |
|
|
|
|
{value: 1500, name: '厂房'}, |
|
|
|
|
{value: 1400, name: '古建筑'}, |
|
|
|
|
{value: 600, name: '商市场'}, |
|
|
|
|
{value: 568, name: '医院'}, |
|
|
|
|
{value: 888, name: '学校'}, |
|
|
|
|
{value: 485, name: '宾馆'}, |
|
|
|
|
{value: 966, name: '娱乐场所'}, |
|
|
|
|
{value: 789, name: '餐饮业'}, |
|
|
|
|
{value: 500, name: '影剧院'}, |
|
|
|
|
{value: 1025, name: '展览建筑'}, |
|
|
|
|
{value: 600, name: '隧道'} |
|
|
|
|
], |
|
|
|
|
emphasis: { |
|
|
|
|
itemStyle: { |
|
|
|
|
shadowBlur: 10, |
|
|
|
|
shadowOffsetX: 0, |
|
|
|
|
shadowColor: 'rgba(0, 0, 0, 0.5)' |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//建筑类型统计
|
|
|
|
|
keyUnit () { |
|
|
|
|
this.buildcount=0 |
|
|
|
|
this.buildtableData=JSON.parse(JSON.stringify(this.emitService.allDate)) |
|
|
|
|
//console.log(this.buildtableData)
|
|
|
|
|
for(var i=0;i<this.buildtableData[0].buildingTypes.length;i++){ |
|
|
|
|
this.lengthdata.push(this.buildtableData[0].buildingTypes[i].buildingTypeName) |
|
|
|
|
this.buildcount=this.buildcount+this.buildtableData[0].buildingTypes[i].count |
|
|
|
|
this.indexData.push(this.buildtableData[0].buildingTypes[i]) |
|
|
|
|
} |
|
|
|
|
//JSON.parse(JSON.stringify(this.indexData).replace(/buildingTypeName/g, 'name'))
|
|
|
|
|
this.indexData=this.indexData.map(v=>{return {name: v.buildingTypeName,value:v.count,id:v.buildingTypeId}}) |
|
|
|
|
let chartZdgzqyOptionsZhi = { |
|
|
|
|
title: { |
|
|
|
|
text: `建筑类型统计(${this.buildcount}家)`, |
|
|
|
|
top: -5, |
|
|
|
|
left: 'left',
|
|
|
|
|
textStyle:{ |
|
|
|
|
color:'#fff', |
|
|
|
|
fontWeight:'normal' |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
] |
|
|
|
|
}; |
|
|
|
|
chartZdgzqyOptionsZhong = { |
|
|
|
|
title: { |
|
|
|
|
text: '建筑类型统计(1015家)', |
|
|
|
|
left: 'left',
|
|
|
|
|
textStyle:{ |
|
|
|
|
color:'#fff', |
|
|
|
|
fontWeight:'normal' |
|
|
|
|
}, |
|
|
|
|
top: -3, |
|
|
|
|
// textStyle: {
|
|
|
|
|
// fontSize:31
|
|
|
|
|
// }
|
|
|
|
|
}, |
|
|
|
|
tooltip: { |
|
|
|
|
trigger: 'item', |
|
|
|
|
formatter: '{b} : {c}家 ({d}%)' |
|
|
|
|
}, |
|
|
|
|
// legend: {
|
|
|
|
|
// orient: 'vertical',
|
|
|
|
|
// right: 150,
|
|
|
|
|
// top:80,
|
|
|
|
|
// data: ['高层', '地下', '轨道交通', '化工生产', '储罐类' , '厂房','古建筑', '商市场', '医院', '学校', '宾馆' , '娱乐场所','餐饮业', '影剧院', '展览建筑' , '隧道']
|
|
|
|
|
// },
|
|
|
|
|
series: [ |
|
|
|
|
{ |
|
|
|
|
name: '访问来源', |
|
|
|
|
type: 'pie', |
|
|
|
|
radius: '70%', |
|
|
|
|
center: ['50%', '60%'], |
|
|
|
|
label:{ |
|
|
|
|
show:true, |
|
|
|
|
// fontSize:13,
|
|
|
|
|
formatter:'{b}{c}家', |
|
|
|
|
rich: { |
|
|
|
|
d: { |
|
|
|
|
align: 'center', |
|
|
|
|
} |
|
|
|
|
tooltip: { |
|
|
|
|
trigger: 'item', |
|
|
|
|
formatter: '{b} : {c}家 ({d}%)' |
|
|
|
|
}, |
|
|
|
|
// legend: {
|
|
|
|
|
// orient: 'vertical',
|
|
|
|
|
// right: 150,
|
|
|
|
|
// top:80,
|
|
|
|
|
// data: ['高层', '地下', '轨道交通', '化工生产', '储罐类' , '厂房','古建筑', '商市场', '医院', '学校', '宾馆' , '娱乐场所','餐饮业', '影剧院', '展览建筑' , '隧道']
|
|
|
|
|
// },
|
|
|
|
|
series: [ |
|
|
|
|
{ |
|
|
|
|
name: '访问来源', |
|
|
|
|
type: 'pie', |
|
|
|
|
radius: '70%', |
|
|
|
|
center: ['50%', '61%'], |
|
|
|
|
label:{ |
|
|
|
|
show:true, |
|
|
|
|
// fontSize:13,
|
|
|
|
|
formatter:'{b}{c}家', |
|
|
|
|
rich: { |
|
|
|
|
d: { |
|
|
|
|
align: 'center', |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
data: [ |
|
|
|
|
{value: 123, name: '高层'}, |
|
|
|
|
{value: 105, name: '地下'}, |
|
|
|
|
{value: 95, name: '轨道交通'}, |
|
|
|
|
{value: 96, name: '化工生产'}, |
|
|
|
|
{value: 89, name: '储罐类'}, |
|
|
|
|
{value: 111, name: '厂房'}, |
|
|
|
|
{value: 95, name: '古建筑'}, |
|
|
|
|
{value: 94, name: '商市场'}, |
|
|
|
|
{value: 85, name: '医院'}, |
|
|
|
|
{value: 83, name: '学校'}, |
|
|
|
|
{value: 81, name: '宾馆'}, |
|
|
|
|
{value: 79, name: '娱乐场所'}, |
|
|
|
|
{value: 82, name: '餐饮业'}, |
|
|
|
|
{value: 97, name: '影剧院'}, |
|
|
|
|
{value: 82, name: '展览建筑'}, |
|
|
|
|
{value: 72, name: '隧道'} |
|
|
|
|
], |
|
|
|
|
emphasis: { |
|
|
|
|
itemStyle: { |
|
|
|
|
shadowBlur: 10, |
|
|
|
|
shadowOffsetX: 0, |
|
|
|
|
shadowColor: 'rgba(0, 0, 0, 0.5)' |
|
|
|
|
data: this.indexData, |
|
|
|
|
emphasis: { |
|
|
|
|
itemStyle: { |
|
|
|
|
shadowBlur: 10, |
|
|
|
|
shadowOffsetX: 0, |
|
|
|
|
shadowColor: 'rgba(0, 0, 0, 0.5)' |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
] |
|
|
|
|
}; |
|
|
|
|
//建筑类型统计
|
|
|
|
|
keyUnit () { |
|
|
|
|
] |
|
|
|
|
}; |
|
|
|
|
this.chartZdgzqy = echarts.init(document.getElementById('chartZdgzqy'), 'walden'); |
|
|
|
|
|
|
|
|
|
this.chartZdgzqy.setOption(this.chartZdgzqyOptionsZhi); |
|
|
|
|
this.chartZdgzqy.setOption(chartZdgzqyOptionsZhi); |
|
|
|
|
this.chartZdgzqy.on("click",(params) => { |
|
|
|
|
this.router.navigate(['/statisticanalysis/buildingType_one']) |
|
|
|
|
}) |
|
|
|
|