You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
175 lines
7.5 KiB
175 lines
7.5 KiB
import { Component, OnInit } from '@angular/core'; |
|
import { Router } from '@angular/router'; |
|
import {EchartsDataService,} from '../../echarts-data.service'; |
|
declare var echarts: any; |
|
@Component({ |
|
selector: 'app-add-unit-one', |
|
templateUrl: './add-unit-one.component.html', |
|
styleUrls: ['./add-unit-one.component.scss'] |
|
}) |
|
export class AddUnitOneComponent implements OnInit { |
|
|
|
constructor(private router: Router,public echartsData:EchartsDataService) { } |
|
|
|
setTimeoutObj//延时器需要清除 |
|
buildData=[] |
|
orData |
|
|
|
ngOnInit(): void { |
|
/* this.buildData.push(this.echartsData.getData(null,`/api/StatisticsAnalysis/BuildingTypes`)) |
|
this.orData=this.echartsData.getData(null,`/api/StatisticsAnalysis/Companies`) */ |
|
this.setTimeoutObj = window.setTimeout(()=>{ |
|
this.initCharts("pieone") |
|
this.initCharts("pietwo") |
|
},1000) |
|
this.echartsData.eventEmit.subscribe((value: any) => { |
|
if (value == 'echarts') { |
|
setTimeout(() => { |
|
this.indexBzt.resize() |
|
}, 500); |
|
|
|
} |
|
}); |
|
} |
|
//更新echarts视图 |
|
updateEcharts(){ |
|
this.indexBzt.resize() |
|
} |
|
//组件销毁时 |
|
ngOnDestroy(){ |
|
window.clearTimeout(this.setTimeoutObj); |
|
this.indexBzt.clear() |
|
this.indexBzt.dispose() |
|
} |
|
zhiNameData = ["浦东支队","黄浦支队","徐汇支队","长宁支队","静安支队","普陀支队","虹口支队","杨浦支队","闵行支队","宝山支队","嘉定支队","松江支队","金山支队","崇明支队"] |
|
buildingData=["高层","地下","轨道交通","化工生产","储罐类","厂房","古建筑","商市场","医院","学校","宾馆","娱乐场所","餐饮业","影剧院","展览建筑","隧道"] |
|
indexBzt//首页饼状图实例 |
|
/* 首页饼状图 */ |
|
initCharts(id){ |
|
|
|
this.indexBzt = echarts.init(document.getElementById(id),'walden'); |
|
let options={ |
|
title: { |
|
text:id=="pieone"? '组织机构统计（8900家）':'建筑类型统计（8900家）', |
|
left: 'center', |
|
top: "5%", |
|
textStyle: { |
|
fontSize:31 |
|
} |
|
}, |
|
tooltip: { |
|
trigger: 'item', |
|
formatter: (params)=>{ |
|
return this.echartsData.tableTooltip(id=="pieone"?this.echartsData.buildingType:this.echartsData.tableDataZhi,params.name) |
|
}, |
|
position:this.echartsData.tableTooltipNoShow2 |
|
}, |
|
legend: { |
|
orient: 'vertical', |
|
right: 0, |
|
top:80, |
|
textStyle:{ |
|
fontSize:14, |
|
color:"#000000" |
|
}, |
|
data: id=="pieone"?this.zhiNameData:this.buildingData |
|
}, |
|
series: [ |
|
{ |
|
name: '访问来源', |
|
type: 'pie', |
|
radius: '60%', |
|
center: ['45%', '53%'], |
|
label:{ |
|
show:true, |
|
fontSize:14, |
|
formatter:'{b}{c}家\n{d|({d}%)}', |
|
rich: { |
|
d: { |
|
align: 'center', |
|
fontSize:18 |
|
} |
|
}, |
|
}, |
|
data:id=="pieone"?[ |
|
{value: 500, name: this.zhiNameData[0]}, |
|
{value: 800, name: this.zhiNameData[1]}, |
|
{value: 900, name: this.zhiNameData[2]}, |
|
{value: 800, name: this.zhiNameData[3]}, |
|
{value: 1200, name: this.zhiNameData[4]}, |
|
{value: 1500, name: this.zhiNameData[5]}, |
|
{value: 1400, name: this.zhiNameData[6]}, |
|
{value: 600, name: this.zhiNameData[7]}, |
|
{value: 568, name: this.zhiNameData[8]}, |
|
{value: 888, name: this.zhiNameData[9]}, |
|
{value: 485, name: this.zhiNameData[10]}, |
|
{value: 966, name: this.zhiNameData[11]}, |
|
{value: 789, name: this.zhiNameData[12]}, |
|
{value: 500, name: this.zhiNameData[13]}, |
|
|
|
]:[ |
|
{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)' |
|
} |
|
} |
|
} |
|
] |
|
}; |
|
this.indexBzt.on('click', (params) => { |
|
this.router.navigate(['/statisticanalysis/addUnit_one/addUnit_two_type'],{queryParams:{'level':params.name}}); |
|
id=="pieone"?this.echartsData.zuzhiorBuilding="zhi":this.echartsData.zuzhiorBuilding="building" |
|
}); |
|
this.indexBzt.setOption(options); |
|
} |
|
biaogeTishi(biaotou:string){ |
|
var shuju='[{"name":"浦东支队","number":"156","zhanbi":"3%"},{"name":"黄浦支队","number":"144","zhanbi":"2.8%"},' |
|
shuju+='{"name":"徐汇支队","number":"133","zhanbi":"2.1%"},{"name":"长宁支队","number":"122","zhanbi":"1.6%"},' |
|
shuju+='{"name":"静安支队","number":"120","zhanbi":"1.3%"},{"name":"普陀支队","number":"100","zhanbi":"1.1%"},' |
|
shuju+='{"name":"虹口支队","number":"95","zhanbi":"1%"},{"name":"杨浦支队","number":"90","zhanbi":"0.9%"},' |
|
shuju+='{"name":"闵行支队","number":"88","zhanbi":"0.8%"},{"name":"宝山支队","number":"83","zhanbi":"0.7%"},' |
|
shuju+='{"name":"徐汇支队","number":"133","zhanbi":"2.1%"},{"name":"长宁支队","number":"122","zhanbi":"1.6%"},' |
|
shuju+='{"name":"嘉定支队","number":"78","zhanbi":"0.6%"},{"name":"松江支队","number":"75","zhanbi":"0.5%"},' |
|
shuju+='{"name":"金山支队","number":"65","zhanbi":"0.4%"},{"name":"崇明支队","number":"55","zhanbi":"0.3%"}]' |
|
var jsonObj = JSON.parse(shuju); |
|
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;">'+biaotou+'</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<jsonObj.length;i++){ |
|
res+='<tr>' |
|
res+='<td style="text-align:center;border:1px solid #000000">'+jsonObj[i].name+'</td>' |
|
res+='<td style="text-align:center;border:1px solid #000000">'+jsonObj[i].number+'</td>' |
|
res+='<td style="text-align:center;border:1px solid #000000">'+jsonObj[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 |
|
} |
|
|
|
|
|
}
|
|
|