|
|
|
|
@ -2,6 +2,7 @@ import { Component, OnInit } from '@angular/core';
|
|
|
|
|
import { Router } from '@angular/router'; |
|
|
|
|
import { HttpClient } from '@angular/common/http' |
|
|
|
|
import {EchartsDataService,} from '../../echarts-data.service' |
|
|
|
|
import { map } from 'rxjs/operators'; |
|
|
|
|
declare var echarts: any; |
|
|
|
|
@Component({ |
|
|
|
|
selector: 'app-building-type-one', |
|
|
|
|
@ -34,7 +35,7 @@ export class BuildingTypeOneComponent implements OnInit {
|
|
|
|
|
this.indexData.push(data.companyStatistics.buildingTypeStatistics.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}}) |
|
|
|
|
this.indexData=this.indexData.map(v=>{return {name: v.buildingTypeName,value:v.count,id:v.buildingTypeId}}) |
|
|
|
|
console.log(this.indexData) |
|
|
|
|
this.indexBzt = echarts.init(document.getElementById('indexBzt'),'walden'); |
|
|
|
|
let options={ |
|
|
|
|
@ -50,7 +51,10 @@ export class BuildingTypeOneComponent implements OnInit {
|
|
|
|
|
trigger: 'item', |
|
|
|
|
position: this.echartsData.tableTooltipNoShow2, |
|
|
|
|
formatter: (params)=>{ |
|
|
|
|
return this.echartsData.biaogeTishiZhi(params.name) |
|
|
|
|
//console.log(params)
|
|
|
|
|
this.echartsData.biaogeTishiZhi(params.data) |
|
|
|
|
return this.echartsData.res |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
legend: { |
|
|
|
|
@ -80,24 +84,7 @@ export class BuildingTypeOneComponent implements OnInit {
|
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
data:/* [ |
|
|
|
|
{value: this.indexData[0].count, name: this.indexData[0].buildingTypeName}, |
|
|
|
|
{value: this.indexData[1].count, name: this.indexData[1].buildingTypeName}, |
|
|
|
|
{value: this.indexData[2].count, name: this.indexData[2].buildingTypeName}, |
|
|
|
|
{value: this.indexData[3].count, name: this.indexData[3].buildingTypeName}, |
|
|
|
|
{value: this.indexData[4].count, name: this.indexData[4].buildingTypeName}, |
|
|
|
|
{value: this.indexData[5].count, name: this.indexData[5].buildingTypeName}, |
|
|
|
|
{value: this.indexData[6].count, name: this.indexData[6].buildingTypeName}, |
|
|
|
|
{value: this.indexData[7].count, name: this.indexData[7].buildingTypeName}, |
|
|
|
|
{value: this.indexData[8].count, name: this.indexData[8].buildingTypeName}, |
|
|
|
|
{value: this.indexData[9].count, name: this.indexData[9].buildingTypeName}, |
|
|
|
|
{value: this.indexData[10].count, name: this.indexData[0].buildingTypeName}, |
|
|
|
|
{value: this.indexData[0].count, name: this.indexData[0].buildingTypeName}, |
|
|
|
|
{value: this.indexData[0].count, name: this.indexData[0].buildingTypeName}, |
|
|
|
|
{value: 500, name: '影剧院'}, |
|
|
|
|
{value: 1025, name: '展览建筑'}, |
|
|
|
|
{value: 600, name: '隧道'}
|
|
|
|
|
] */this.indexData, |
|
|
|
|
data:this.indexData, |
|
|
|
|
emphasis: { |
|
|
|
|
itemStyle: { |
|
|
|
|
shadowBlur: 10, |
|
|
|
|
@ -116,34 +103,35 @@ export class BuildingTypeOneComponent implements OnInit {
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
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>' |
|
|
|
|
tishiData |
|
|
|
|
res:string |
|
|
|
|
biaogeTishiZhi(datas){ |
|
|
|
|
let paramsdata:any = { |
|
|
|
|
BuildingTypeId:datas.id |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
this.http.get("/api/StatisticsAnalysis/Companies",{params:paramsdata}).subscribe((data:any)=>{ |
|
|
|
|
this.tishiData=data |
|
|
|
|
this.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:#FFFFFF;font-size:27px;text-align: center;display:block;">'+datas.name+'</span></div>' |
|
|
|
|
this.res+='</br><div style="width:300px;height:100%;padding:0 20px 15px 20px"><table style="width:300px;font-size:16px; color:#FFFFFF;border-collapse:collapse;"cellspacing="0"; >'; |
|
|
|
|
this.res+='<thead style="font-size:18px;"><tr>'; |
|
|
|
|
this.res+='<td style="text-align:center;width:30%;">名称</td>'; |
|
|
|
|
this.res+='<td style="text-align:center;width:30%;">数量</td>' |
|
|
|
|
this.res+='<td style="text-align:center;width:30%;">总占比</td>' |
|
|
|
|
this.res+='</tr></thead>' |
|
|
|
|
this.res+='<tbody>'; |
|
|
|
|
//var res='<div class="tishi" style=" width:100%;height:100%;"><div style="padding:10px 0 5px 0"><span >'+biaotou+'</span></div>'
|
|
|
|
|
for(var i=0;i<this.tishiData.organizationStatistics.organizations.length;i++){ |
|
|
|
|
this.res+='<tr>' |
|
|
|
|
this.res+='<td style="text-align:center;">'+this.tishiData.organizationStatistics.organizations[i].organizationName+'</td>' |
|
|
|
|
this.res+='<td style="text-align:center;">'+this.tishiData.organizationStatistics.organizations[i].count+'</td>' |
|
|
|
|
this.res+='<td style="text-align:center;">10</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 |
|
|
|
|
this.res+='</tbody>' |
|
|
|
|
this.res+='<tfoot style="font-size:18px;"><td style="text-align:center;">总计</td><td style="text-align:center;">1356</td><td style="text-align:center;">19%</td></tfoot>' |
|
|
|
|
this.res+='</table></div></div>' |
|
|
|
|
return this.res |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
chenjingyu
4 years ago