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.
348 lines
10 KiB
348 lines
10 KiB
import { Component, OnInit ,ElementRef} from '@angular/core'; |
|
import { HttpClient } from '@angular/common/http' |
|
import { HighlightSpanKind } from 'typescript'; |
|
|
|
declare var echarts: any; |
|
declare var westeros: any; |
|
declare var AMap: any; |
|
declare var Loca: any; |
|
@Component({ |
|
selector: 'app-home2', |
|
templateUrl: './home2.component.html', |
|
styleUrls: ['./home2.component.scss'] |
|
}) |
|
export class Home2Component implements OnInit { |
|
|
|
constructor(private http:HttpClient,public element: ElementRef) { } |
|
|
|
unitTypeStatistics:any //单位类型统计 |
|
myUnitTypeChart:any //单位类型统计图表 |
|
unitTypeOption:any = { |
|
title: { |
|
// text: '单位类型统计', |
|
// left: 'center' |
|
}, |
|
tooltip: { |
|
trigger: 'item', |
|
formatter: '占比： <br/>{b} : {c} ({d}%)' |
|
}, |
|
legend: { |
|
// orient: 'vertical', |
|
// top: 'middle', |
|
bottom: 0, |
|
left: 'center', |
|
data: [] |
|
}, |
|
series: [ |
|
{ |
|
type: 'pie', |
|
radius: '65%', |
|
center: ['50%', '50%'], |
|
selectedMode: 'single', |
|
data: [ |
|
], |
|
emphasis: { |
|
itemStyle: { |
|
shadowBlur: 10, |
|
shadowOffsetX: 0, |
|
shadowColor: 'rgba(0, 0, 0, 0.5)' |
|
} |
|
} |
|
} |
|
] |
|
}; //单位类型数据 |
|
|
|
planStateStatistics //预案状态统计 |
|
myPlanStateChart:any //预案状态统计图表 |
|
planStateOption:any = { |
|
title: { |
|
// text: '预案编制情况统计', |
|
// left: 'center' |
|
}, |
|
tooltip: { |
|
trigger: 'item', |
|
formatter: '占比： <br/>{b} : {c} ({d}%)' |
|
}, |
|
legend: { |
|
// orient: 'vertical', |
|
// top: 'middle', |
|
bottom: 0, |
|
left: 'center', |
|
data: ['审核通过','已提交','已公开'] |
|
}, |
|
series: [ |
|
{ |
|
type: 'pie',//类型为饼图 |
|
radius: '65%', |
|
center: ['50%', '50%'], |
|
selectedMode: 'single', |
|
data: [ |
|
], |
|
emphasis: { |
|
itemStyle: { |
|
shadowBlur: 10, |
|
shadowOffsetX: 0, |
|
shadowColor: 'rgba(0, 0, 0, 0.5)' |
|
} |
|
} |
|
} |
|
] |
|
}; //预案状态数据 |
|
|
|
planTypeStatistics //各类型预案统计 |
|
myPlanTypeChart:any //各类型预案图表 |
|
planTypeOption:any = { |
|
title: { |
|
// text: '各类型预案情况统计', |
|
// left: 'center' |
|
}, |
|
tooltip: { |
|
trigger: 'item', |
|
formatter: '占比： <br/>{b} : {c} ({d}%)' |
|
}, |
|
legend: { |
|
// orient: 'vertical', |
|
// top: 'middle', |
|
bottom: 0, |
|
left: 'center', |
|
data: ['卡片预案','二维预案','三维预案','其他预案'] |
|
}, |
|
series: [ |
|
{ |
|
type: 'pie', |
|
radius: '65%', |
|
center: ['50%', '50%'], |
|
selectedMode: 'single', |
|
data: [ |
|
], |
|
emphasis: { |
|
itemStyle: { |
|
shadowBlur: 10, |
|
shadowOffsetX: 0, |
|
shadowColor: 'rgba(0, 0, 0, 0.5)' |
|
} |
|
} |
|
} |
|
] |
|
}; //预案状态数据 |
|
|
|
trendStatistics //趋势统计 |
|
trendChart:any //趋势图表 |
|
trendOption:any = { |
|
title: { |
|
// text: '预案趋势统计' |
|
}, |
|
tooltip: { |
|
trigger: 'axis' |
|
}, |
|
legend: { |
|
data: ['新增预案', '修改预案'] |
|
}, |
|
grid: { |
|
left: '3%', |
|
right: '4%', |
|
bottom: '3%', |
|
containLabel: true |
|
}, |
|
toolbox: { |
|
feature: { |
|
saveAsImage: {} |
|
} |
|
}, |
|
xAxis: { |
|
type: 'category', |
|
boundaryGap: false, |
|
data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月','十二月'] |
|
}, |
|
yAxis: { |
|
type: 'value' |
|
}, |
|
series: [ |
|
{ |
|
name: '新增预案', |
|
type: 'line', |
|
stack: '总量', |
|
data: [] |
|
}, |
|
{ |
|
name: '修改预案', |
|
type: 'line', |
|
stack: '总量', |
|
data: [] |
|
} |
|
] |
|
}; //预案状态数据 |
|
|
|
xxxChart:any |
|
xxxOption:any = { |
|
title: { |
|
// text: '南丁格尔玫瑰图', |
|
// subtext: '纯属虚构', |
|
// left: 'center' |
|
}, |
|
tooltip: { |
|
trigger: 'item', |
|
formatter: '{a} <br/>{b} : {c} ({d}%)' |
|
}, |
|
legend: { |
|
left: 'center', |
|
top: 'bottom', |
|
data: ['1', '2', '3', '4'] |
|
}, |
|
toolbox: { |
|
show: true, |
|
feature: { |
|
mark: {show: true}, |
|
dataView: {show: true, readOnly: false}, |
|
magicType: { |
|
show: true, |
|
type: ['pie', 'funnel'] |
|
}, |
|
restore: {show: true}, |
|
saveAsImage: {show: true} |
|
} |
|
}, |
|
series: [ |
|
{ |
|
name: '面积模式', |
|
type: 'pie', |
|
radius: [30, 110], |
|
// center: ['75%', '50%'], |
|
roseType: 'area', |
|
data: [ |
|
{value: 10, name: '1'}, |
|
{value: 5, name: '2'}, |
|
{value: 15, name: '3'}, |
|
{value: 25, name: '4'} |
|
] |
|
} |
|
] |
|
} |
|
|
|
yyyChart:any |
|
yyyOption:any = { |
|
color: ['#3398DB'], |
|
tooltip: { |
|
trigger: 'axis', |
|
axisPointer: { // 坐标轴指示器，坐标轴触发有效 |
|
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow' |
|
} |
|
}, |
|
grid: { |
|
left: '3%', |
|
right: '4%', |
|
bottom: '3%', |
|
containLabel: true |
|
}, |
|
xAxis: [ |
|
{ |
|
type: 'category', |
|
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'], |
|
axisTick: { |
|
alignWithLabel: true |
|
} |
|
} |
|
], |
|
yAxis: [ |
|
{ |
|
type: 'value' |
|
} |
|
], |
|
series: [ |
|
{ |
|
name: '直接访问', |
|
type: 'bar', |
|
barWidth: '60%', |
|
data: [10, 52, 200, 334, 390, 330, 220] |
|
} |
|
] |
|
}; |
|
|
|
t:any |
|
time:any |
|
theme:any //主题风格 |
|
ngOnInit(): void { |
|
// const map = new AMap.Map(this.element.nativeElement.querySelector('#map'), { |
|
// mapStyle: 'amap://styles/1de318cbb8d12c02303a22c550b9ccc9', |
|
// // pitch: 0, |
|
// features: ['bg', 'road'],//地图显示要素 |
|
// zoom: 6, |
|
// center: [116.408075, 39.950187], |
|
// // viewMode: '3D' |
|
// }); |
|
// const layer = new Loca.DistrictLayer({ |
|
// map: map |
|
// }); |
|
// layer.setMap(map); |
|
|
|
|
|
|
|
this.getTime() |
|
setTimeout(() => { |
|
|
|
this.myUnitTypeChart = echarts.init(this.element.nativeElement.querySelector('#unitType'),'westeros'); |
|
this.myPlanStateChart = echarts.init(this.element.nativeElement.querySelector('#planStates') ,'westeros'); |
|
this.myPlanTypeChart = echarts.init(this.element.nativeElement.querySelector('#planType'),'westeros'); |
|
this.trendChart = echarts.init(this.element.nativeElement.querySelector('#trend'),'westeros'); |
|
this.xxxChart = echarts.init(this.element.nativeElement.querySelector('#xxx'),'westeros'); |
|
this.xxxChart.setOption(this.xxxOption); |
|
this.yyyChart = echarts.init(this.element.nativeElement.querySelector('#yyy'),'westeros'); |
|
this.yyyChart.setOption(this.yyyOption); |
|
}, 0); |
|
|
|
|
|
this.chartsSetOption(); |
|
} |
|
getTime():any{ |
|
this.t = setInterval(()=>{ |
|
var dt = new Date(); |
|
var y = dt.getFullYear(); |
|
var mt = dt.getMonth() + 1; |
|
var day = dt.getDate(); |
|
var h = dt.getHours(); //获取时 |
|
var m = dt.getMinutes(); //获取分 |
|
var s = dt.getSeconds(); //获取秒 |
|
this.time = "当前时间：" + y + "年" + mt + "月" + day + "-" + h + "时" + m + "分" + s + "秒"; |
|
}, 1000); //開始运行 |
|
} |
|
chartsSetOption(){ |
|
this.http.get("/api/StatisticsAnalysis").subscribe((data:any)=>{ |
|
//单位类型统计 |
|
this.unitTypeStatistics = data.companyStatistics.buildingTypeStatistics.buildingTypes |
|
this.unitTypeStatistics.forEach(item => { |
|
item.name = item.buildingTypeName |
|
item.value = item.count |
|
// this.unitTypeOption.legend.data.push(item.buildingTypeName) |
|
}); |
|
this.unitTypeOption.series[0].data = this.unitTypeStatistics |
|
this.myUnitTypeChart.setOption(this.unitTypeOption,true); |
|
//预案状态统计 |
|
this.planStateStatistics = data.planStatistics.planningStatistics |
|
this.planStateOption.series[0].data.push({name:'审核通过',value:data.planStatistics.planningStatistics.approvedCount}) |
|
this.planStateOption.series[0].data.push({name:'已提交',value:data.planStatistics.planningStatistics.committedCount}) |
|
this.planStateOption.series[0].data.push({name:'已公开',value:data.planStatistics.planningStatistics.publicCount}) |
|
this.myPlanStateChart.setOption(this.planStateOption,true); |
|
//各类型预案统计 |
|
this.planTypeStatistics = data.planStatistics.planTypeStatistics |
|
this.planTypeOption.series[0].data.push({name:'卡片预案',value:data.planStatistics.planTypeStatistics.planCardCount}) |
|
this.planTypeOption.series[0].data.push({name:'二维预案',value:data.planStatistics.planTypeStatistics.plan2DCount}) |
|
this.planTypeOption.series[0].data.push({name:'三维预案',value:data.planStatistics.planTypeStatistics.plan3DCount}) |
|
this.planTypeOption.series[0].data.push({name:'其他预案',value:data.planStatistics.planTypeStatistics.planOtherCount}) |
|
this.myPlanTypeChart.setOption(this.planTypeOption,true); |
|
//预案趋势图统计 |
|
this.trendStatistics = data.planStatistics.trendStatistics |
|
// this.trendOption.series = [] |
|
this.trendStatistics.added.forEach(item=>{ |
|
this.trendOption.series[0].data.push(item.count) |
|
}) |
|
this.trendStatistics.modified.forEach(item=>{ |
|
this.trendOption.series[1].data.push(item.count) |
|
}) |
|
this.trendChart.setOption(this.trendOption,true); |
|
|
|
}) |
|
} |
|
ngOnDestroy(){ |
|
window.clearInterval(this.t) //清一遍定时器 |
|
} |
|
}
|
|
|