shaojiahao
/
ShangHaiYuan-AnXin
2
0
Fork 0
Code Issues 11 Pull Requests Projects Releases Wiki Activity
Browse Source

[新增]首页对接真实数据

zhuzhou
chenjingyu 4 years ago
parent
d5f5e59e98
commit
598d97f3fd
2 changed files with 340 additions and 351 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 14
      src/app/statistic-analysis/home/home.component.html
  2. 677
      src/app/statistic-analysis/home/home.component.ts

14
src/app/statistic-analysis/home/home.component.html
Unescape View File

@ -19,18 +19,18 @@
<div class="progress-item"> <div class="progress-item">
<div class="progress-name">本年时间进度</div> <div class="progress-name">本年时间进度</div>
<div class="progress"> <div class="progress">
<div class="progress-num">90%</div> <div class="progress-num">0%</div>
<div class="progress-bar"> <div class="progress-bar">
<div style="width: 90%;" class="progress-bar-inner progress-bar-gradient"></div> <div style="width: 12%;" class="progress-bar-inner progress-bar-gradient"></div>
</div> </div>
</div> </div>
</div> </div>
<div class="progress-item"> <div class="progress-item">
<div class="progress-name">年计划完成率</div> <div class="progress-name">年计划完成率</div>
<div class="progress"> <div class="progress">
<div class="progress-num">88%</div> <div class="progress-num">0%</div>
<div class="progress-bar"> <div class="progress-bar">
<div style="width: 88%;" class="progress-bar-inner progress-bar-gradient"></div> <div style="width: 12%;" class="progress-bar-inner progress-bar-gradient"></div>
</div> </div>
</div> </div>
</div> </div>
@ -63,10 +63,10 @@
<div class="item-tit">重点单位总量</div> <div class="item-tit">重点单位总量</div>
<div class="item-txt" id="number01">{{keyUnitNum}}</div> <div class="item-txt" id="number01">{{keyUnitNum}}</div>
</div> </div>
<div class="number-item"> <!-- <div class="number-item">
<div class="item-tit">数据采集总量</div> <div class="item-tit">数据采集总量</div>
<div class="item-txt" id="number02">{{dataGetNum}}</div> <div class="item-txt" id="number02">{{dataGetNum}}</div>
</div> </div> -->
</div> </div>
<!-- 图表 --> <!-- 图表 -->
<!-- <div class="panel panel06 mt-mlger"> <!-- <div class="panel panel06 mt-mlger">
@ -92,7 +92,7 @@
<div class="total-num">{{twoPlanNum}}</div> <div class="total-num">{{twoPlanNum}}</div>
</div> </div>
<div class="total-item" (click)="cardPlan()"> <div class="total-item" (click)="cardPlan()">
<div class="total-name">卡片预案总数</div> <div class="total-name">文本预案总数</div>
<div class="total-num">{{cardPlanNum}}</div> <div class="total-num">{{cardPlanNum}}</div>
</div> </div>
<div class="total-item" (click)="otherPlan()"> <div class="total-item" (click)="otherPlan()">

677
src/app/statistic-analysis/home/home.component.ts
Unescape View File

@ -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) { } constructor(private http:HttpClient, private render2: Renderer2,public element: ElementRef,private router: Router,public emitService: EchartsDataService) { }
map:any; //地图 map:any; //地图
ngOnInit() { yuandata
this.emitService.eventEmit.subscribe((value: any) => { ngOnInit() {
this.level=sessionStorage.getItem("level")
this.getechartsdata()
/* this.emitService.eventEmit.subscribe((value: any) => {
if (value == 'echarts') { if (value == 'echarts') {
setTimeout(() => { setTimeout(() => {
this.updateEcharts() this.updateEcharts()
@ -27,23 +30,48 @@ export class HomeComponent implements OnInit {
setTimeout(() => { setTimeout(() => {
this.updateEcharts() this.updateEcharts()
}, 0); }, 0);
}) }) */
window.setTimeout(()=>{ window.setTimeout(()=>{
this.unitType() /* this.unitType()
this.unitData() this.unitData()
this.keyUnit() this.keyUnit() */
this.mapInit() //初始化地图 this.mapInit() //初始化地图
},0) },0)
} }
//更新echarts视图 //更新echarts视图
updateEcharts(){ /* updateEcharts(){
this.planState.resize() this.planState.resize()
this.chartDwsjcj.resize() this.chartDwsjcj.resize()
this.chartZdgzqy.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(){ threePlan(){
// this.router.navigate(['/planManagement/entryPlan']) // this.router.navigate(['/planManagement/entryPlan'])
@ -64,16 +92,18 @@ export class HomeComponent implements OnInit {
} }
ngOnDestroy(): void { ngOnDestroy(): void {
this.planState.clear() /* this.planState.clear()
this.planState.dispose() this.planState.dispose()
this.chartDwsjcj.clear() this.chartDwsjcj.clear()
this.chartDwsjcj.dispose() this.chartDwsjcj.dispose()
this.chartZdgzqy.clear() this.chartZdgzqy.clear()
this.chartZdgzqy.dispose() this.chartZdgzqy.dispose() */
} }
//初始化地图 //初始化地图
adcode:any //行政编码 adcode:any //行政编码
level//组织级别
orid
mapInit () { mapInit () {
//创建地图 //创建地图
this.map = new AMap.Map('chartMap', { this.map = new AMap.Map('chartMap', {
@ -149,8 +179,19 @@ export class HomeComponent implements OnInit {
// 更新地图视野以适合区划面 // 更新地图视野以适合区划面
this.map.setFitView(districtExplorer.getAllFeaturePolygons()); this.map.setFitView(districtExplorer.getAllFeaturePolygons());
}); });
if(this.level=="0"||this.level=="1"||this.level=="2"){
//区域内点击
districtExplorer.on('featureClick', (e, feature) =>{ 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; let props = feature.properties;
adcode = props.adcode adcode = props.adcode
@ -203,20 +244,22 @@ export class HomeComponent implements OnInit {
this.map.setFitView(districtExplorer.getAllFeaturePolygons()); this.map.setFitView(districtExplorer.getAllFeaturePolygons());
}); });
this.planState.setOption(this.planStateOptionsZhong); //this.planState.setOption(this.planStateOptionsZhong);
this.chartDwsjcj.setOption(this.chartDwsjcjOptionsZhong); //this.chartDwsjcj.setOption(this.chartDwsjcjOptionsZhong);
this.chartZdgzqy.setOption(this.chartZdgzqyOptionsZhong); //this.chartZdgzqy.setOption(this.chartZdgzqyOptionsZhong);
this.planNum = ["0","0","3","1","6","5"] /* this.planNum = ["0","0","3","1","6","5"]
this.keyUnitNum = 666 this.keyUnitNum = 666 */
this.dataGetNum = 456 //this.dataGetNum = 456
this.threePlanNum = "867" /* this.threePlanNum = "867"
this.twoPlanNum = "485" this.twoPlanNum = "485"
this.cardPlanNum = "756" this.cardPlanNum = "756"
this.otherPlanNum = "658" this.otherPlanNum = "658" */
}); });
districtExplorer.on('outsideClick', (e) => { districtExplorer.on('outsideClick', (e) => {
this.orid=''
this.getechartsdata()
// console.log('区域外点击'); // console.log('区域外点击');
let adcode let adcode
if(sessionStorage.getItem("realName") == "上海总队"){ if(sessionStorage.getItem("realName") == "上海总队"){
@ -266,25 +309,27 @@ export class HomeComponent implements OnInit {
// 更新地图视野以适合区划面 // 更新地图视野以适合区划面
this.map.setFitView(districtExplorer.getAllFeaturePolygons()); this.map.setFitView(districtExplorer.getAllFeaturePolygons());
}); });
this.planState.setOption(this.planStateOptionsZhi); /* this.planState.setOption(this.planStateOptionsZhi);
this.chartDwsjcj.setOption(this.chartDwsjcjOptionsZhi); this.chartDwsjcj.setOption(this.chartDwsjcjOptionsZhi);
this.chartZdgzqy.setOption(this.chartZdgzqyOptionsZhi); this.chartZdgzqy.setOption(this.chartZdgzqyOptionsZhi); */
this.planNum = ["0","2","2","6","7","8"] /* this.planNum = ["0","2","2","6","7","8"]
this.keyUnitNum = 8036 this.keyUnitNum = 8036
this.dataGetNum = 6578 this.dataGetNum = 6578 */
this.threePlanNum = "4374" /* this.threePlanNum = "4374"
this.twoPlanNum = "9693" this.twoPlanNum = "9693"
this.cardPlanNum = "6403" this.cardPlanNum = "6403"
this.otherPlanNum = "2208" this.otherPlanNum = "2208" */
}) })
}
}); });
} }
planNum = ["0","2","2","6","7","8"] planNum = []
keyUnitNum = 8036 keyUnitNum
dataGetNum = 6578 dataGetNum = 6578
threePlanNum = "4374" threePlanNum = "4374"
@ -302,103 +347,111 @@ export class HomeComponent implements OnInit {
} }
planState planState
planStateOptionsZhi = {
title: {
text: '预案状态统计（7005份）', //预案状态统计
left: 'left', pagedata
textStyle:{ pagedataCount
color:'#fff', unitType () {
fontWeight:'normal' this.planNum=[]
} this.pagedata=JSON.parse(JSON.stringify(this.emitService.allDate))
}, console.log(this.pagedata)
tooltip: { this.pagedataCount=String(this.pagedata[0].planStatusStatistics.totalCount)
trigger: 'item', for(var i=0;i<this.pagedataCount.length;i++){
formatter: '{b} : {c} ({d}%)' this.planNum.push(this.pagedataCount[i])
}, }
series: [ //this.planNum.push(this.pagedataCount.split(','))
{ if(this.pagedata[0].planTypeStatistics.planTypes.length<=0){
name: '访问来源', this.threePlanNum='0'
type: 'pie', this.twoPlanNum='0'
radius: '60%', this.cardPlanNum='0'
center: ['50%', '58%'], this.otherPlanNum='0'
label:{ }else{
show:true, this.pagedata[0].planTypeStatistics.planTypes.forEach((value,index,array) => {
//fontSize:10, if(array[index].planTypeName=='Plan2D'){
formatter:'{b}\n{d|{c}份}', this.twoPlanNum=array[index].count
rich: { }else if(array[index].planTypeName=='Plan3D'){
d: { this.threePlanNum=array[index].count
align: 'center', }else if(array[index].planTypeName=='Other'){
} this.otherPlanNum=array[index].count
}, }else if(array[index].planTypeName=='PlanText'){
this.cardPlanNum=array[index].count
},
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)'
}
}
} }
] });
}; }
planStateOptionsZhong = { if(this.pagedata[0].planCategoryStatistics.planCategories.length<=0){
title: { this.aPlan='0'
text: '预案状态统计（895份）', this.bPlan='0'
left: 'left', this.cPlan='0'
textStyle:{ this.dPlan='0'
color:'#fff', this.ePlan='0'
fontWeight:'normal' }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: [ let planStateOptionsZhi = {
{ title: {
name: '访问来源', text: `预案状态统计（${this.pagedata[0].planStatusStatistics.totalCount}份）`,
type: 'pie', left: 'left',
radius: '60%', textStyle:{
center: ['50%', '58%'], color:'#fff',
label:{ fontWeight:'normal'
show:true, }
formatter:'{b}\n{d|{c}份}', },
rich: { tooltip: {
d: { trigger: 'item',
align: 'center', 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: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:''},
data: [ {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: 200, name: '预案新增'}, {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: 234, name: '审核通过',itemStyle:{color:'#02A7F0'}}, {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: 165, name: '预案编制'}, {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:''}
{value: 189, name: '审核退回'},
{value: 211, name: '预案审核中'}
], ],
emphasis: { emphasis: {
itemStyle: { itemStyle: {
shadowBlur: 10, shadowBlur: 10,
shadowOffsetX: 0, shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)' shadowColor: 'rgba(0, 0, 0, 0.5)'
} }
}
} }
} ]
] };
};
//预案状态统计
unitType () {
this.planState = echarts.init(document.getElementById('chartHynyxf'), 'walden'); this.planState = echarts.init(document.getElementById('chartHynyxf'), 'walden');
this.planState.setOption(this.planStateOptionsZhi); this.planState.setOption(planStateOptionsZhi);
this.planState.on("click",(params) => { this.planState.on("click",(params) => {
this.router.navigate(['/statisticanalysis/statePageOne']) this.router.navigate(['/statisticanalysis/statePageOne'])
}) })
@ -406,97 +459,9 @@ export class HomeComponent implements OnInit {
//新增、删除单位统计 //新增、删除单位统计
chartDwsjcj chartDwsjcj
chartDwsjcjOptionsZhi = { addtable
// 标题 addxdata=[]
title: { addydata=[]
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",
}
}
],
};
chartDwsjcjOptionsZhong = { chartDwsjcjOptionsZhong = {
// color: ['#FB33C2', '#00CFF0', '#2C3DE0'], // color: ['#FB33C2', '#00CFF0', '#2C3DE0'],
// 标题 // 标题
@ -589,154 +554,178 @@ export class HomeComponent implements OnInit {
], ],
}; };
unitData () { 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 = echarts.init(document.getElementById('chartDwsjcj'),'walden');
this.chartDwsjcj.setOption(this.chartDwsjcjOptionsZhi); this.chartDwsjcj.setOption(chartDwsjcjOptionsZhi);
this.chartDwsjcj.on("click",(params) => { this.chartDwsjcj.on("click",(params) => {
if(params.seriesName == "新增单位"){ this.router.navigate(['/statisticanalysis/addUnit_one'])
this.router.navigate(['/statisticanalysis/addUnit_one'])
}else{
this.router.navigate(['/statisticanalysis/delete_one'])
}
}) })
} }
chartZdgzqy chartZdgzqy
chartZdgzqyOptionsZhi = {
title: {
text: '建筑类型统计（8900家）', //建筑类型统计
top: -5, keyUnit () {
left: 'left', this.buildcount=0
textStyle:{ this.buildtableData=JSON.parse(JSON.stringify(this.emitService.allDate))
color:'#fff', //console.log(this.buildtableData)
fontWeight:'normal' 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
tooltip: { this.indexData.push(this.buildtableData[0].buildingTypes[i])
trigger: 'item', }
formatter: '{b} : {c}家 ({d}%)' //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}})
// legend: { let chartZdgzqyOptionsZhi = {
// orient: 'vertical', title: {
// right: 150, text: `建筑类型统计（${this.buildcount}家）`,
// top:80, top: -5,
// data: ['高层', '地下', '轨道交通', '化工生产', '储罐类' , '厂房','古建筑', '商市场', '医院', '学校', '宾馆' , '娱乐场所','餐饮业', '影剧院', '展览建筑' , '隧道'] left: 'left',
// }, textStyle:{
series: [ color:'#fff',
{ fontWeight:'normal'
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)'
}
} }
}
]
};
chartZdgzqyOptionsZhong = {
title: {
text: '建筑类型统计（1015家）',
left: 'left',
textStyle:{
color:'#fff',
fontWeight:'normal'
}, },
top: -3, tooltip: {
// textStyle: { trigger: 'item',
// fontSize:31 formatter: '{b} : {c}家 ({d}%)'
// } },
}, // legend: {
tooltip: { // orient: 'vertical',
trigger: 'item', // right: 150,
formatter: '{b} : {c}家 ({d}%)' // top:80,
}, // data: ['高层', '地下', '轨道交通', '化工生产', '储罐类' , '厂房','古建筑', '商市场', '医院', '学校', '宾馆' , '娱乐场所','餐饮业', '影剧院', '展览建筑' , '隧道']
// legend: { // },
// orient: 'vertical', series: [
// right: 150, {
// top:80, name: '访问来源',
// data: ['高层', '地下', '轨道交通', '化工生产', '储罐类' , '厂房','古建筑', '商市场', '医院', '学校', '宾馆' , '娱乐场所','餐饮业', '影剧院', '展览建筑' , '隧道'] type: 'pie',
// }, radius: '70%',
series: [ center: ['50%', '61%'],
{ label:{
name: '访问来源', show:true,
type: 'pie', // fontSize:13,
radius: '70%', formatter:'{b}{c}家',
center: ['50%', '60%'], rich: {
label:{ d: {
show:true, align: 'center',
// fontSize:13, }
formatter:'{b}{c}家', },
rich: {
d: {
align: 'center',
}
}, },
}, data: this.indexData,
data: [ emphasis: {
{value: 123, name: '高层'}, itemStyle: {
{value: 105, name: '地下'}, shadowBlur: 10,
{value: 95, name: '轨道交通'}, shadowOffsetX: 0,
{value: 96, name: '化工生产'}, shadowColor: 'rgba(0, 0, 0, 0.5)'
{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)'
} }
} }
} ]
] };
};
//建筑类型统计
keyUnit () {
this.chartZdgzqy = echarts.init(document.getElementById('chartZdgzqy'), 'walden'); this.chartZdgzqy = echarts.init(document.getElementById('chartZdgzqy'), 'walden');
this.chartZdgzqy.setOption(chartZdgzqyOptionsZhi);
this.chartZdgzqy.setOption(this.chartZdgzqyOptionsZhi);
this.chartZdgzqy.on("click",(params) => { this.chartZdgzqy.on("click",(params) => {
this.router.navigate(['/statisticanalysis/buildingType_one']) this.router.navigate(['/statisticanalysis/buildingType_one'])
}) })

Write Preview
Loading…
Cancel
Save