Browse Source

[综合分析]所有页面主题修改

master
chenjingyu 5 years ago
parent
commit
29a3a1a46e
  1. 18
      src/app/statistic-analysis/addUnit/add-unit-one/add-unit-one.component.ts
  2. 2
      src/app/statistic-analysis/addUnit/add-unit-three-bar-details/add-unit-three-bar-details.component.scss
  3. 80
      src/app/statistic-analysis/addUnit/add-unit-three-bar-details/add-unit-three-bar-details.component.ts
  4. 12
      src/app/statistic-analysis/addUnit/add-unit-two-time/add-unit-two-time.component.html
  5. 21
      src/app/statistic-analysis/addUnit/add-unit-two-time/add-unit-two-time.component.scss
  6. 30
      src/app/statistic-analysis/addUnit/add-unit-two-time/add-unit-two-time.component.ts
  7. 11
      src/app/statistic-analysis/addUnit/add-unit-two-type-details/add-unit-two-type-details.component.html
  8. 15
      src/app/statistic-analysis/addUnit/add-unit-two-type-details/add-unit-two-type-details.component.scss
  9. 80
      src/app/statistic-analysis/addUnit/add-unit-two-type-details/add-unit-two-type-details.component.ts
  10. 14
      src/app/statistic-analysis/addUnit/add-unit-two-type-statistics/add-unit-two-type-statistics.component.html
  11. 13
      src/app/statistic-analysis/addUnit/add-unit-two-type-statistics/add-unit-two-type-statistics.component.scss
  12. 125
      src/app/statistic-analysis/addUnit/add-unit-two-type-statistics/add-unit-two-type-statistics.component.ts
  13. 19
      src/app/statistic-analysis/buildingType/building-type-one/building-type-one.component.ts
  14. 11
      src/app/statistic-analysis/buildingType/building-type-three-details/building-type-three-details.component.html
  15. 24
      src/app/statistic-analysis/buildingType/building-type-three-details/building-type-three-details.component.scss
  16. 77
      src/app/statistic-analysis/buildingType/building-type-three-details/building-type-three-details.component.ts
  17. 15
      src/app/statistic-analysis/buildingType/building-type-two-forward/building-type-two-forward.component.html
  18. 5
      src/app/statistic-analysis/buildingType/building-type-two-forward/building-type-two-forward.component.scss
  19. 141
      src/app/statistic-analysis/buildingType/building-type-two-forward/building-type-two-forward.component.ts
  20. 123
      src/app/statistic-analysis/buildingType/building-type-two-reverse/building-type-two-reverse.component.ts
  21. 2
      src/app/statistic-analysis/deleteUnit/delete-four/delete-four.component.scss
  22. 69
      src/app/statistic-analysis/deleteUnit/delete-four/delete-four.component.ts
  23. 25
      src/app/statistic-analysis/deleteUnit/delete-one/delete-one.component.ts
  24. 17
      src/app/statistic-analysis/deleteUnit/delete-there-line-details/delete-there-line-details.component.scss
  25. 51
      src/app/statistic-analysis/deleteUnit/delete-there-line-details/delete-there-line-details.component.ts
  26. 2
      src/app/statistic-analysis/deleteUnit/delete-there/delete-there.component.scss
  27. 175
      src/app/statistic-analysis/deleteUnit/delete-there/delete-there.component.ts
  28. 60
      src/app/statistic-analysis/deleteUnit/delete-two/delete-two.component.html
  29. 117
      src/app/statistic-analysis/deleteUnit/delete-two/delete-two.component.scss
  30. 63
      src/app/statistic-analysis/deleteUnit/delete-two/delete-two.component.ts
  31. 110
      src/app/statistic-analysis/echarts-data.service.ts
  32. 7
      src/app/statistic-analysis/home/home.component.ts
  33. 12
      src/app/statistic-analysis/scheduled-updates/publicEcharts.html
  34. 95
      src/app/statistic-analysis/scheduled-updates/scheduled-updates.component.ts
  35. 12
      src/app/statistic-analysis/scheduled-updates/verified.html
  36. 21
      src/app/statistic-analysis/state/page-one/page-one.component.ts
  37. 10
      src/app/statistic-analysis/state/page-two-name/page-two-name.component.html
  38. 1
      src/app/statistic-analysis/state/page-two-name/page-two-name.component.scss
  39. 222
      src/app/statistic-analysis/state/page-two-name/page-two-name.component.ts
  40. 14
      src/app/statistic-analysis/state/page-two-time/page-two-time.component.html
  41. 106
      src/app/statistic-analysis/state/page-two-time/page-two-time.component.ts
  42. 2
      src/app/statistic-analysis/state/page-zhong-dui-details/page-zhong-dui-details.component.scss
  43. 75
      src/app/statistic-analysis/state/page-zhong-dui-details/page-zhong-dui-details.component.ts
  44. 512
      src/assets/chartstheme/walden.js
  45. 167
      src/assets/chartstheme/walden.project.json

18
src/app/statistic-analysis/addUnit/add-unit-one/add-unit-one.component.ts

@ -1,5 +1,6 @@
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',
@ -8,7 +9,7 @@ declare var echarts: any;
})
export class AddUnitOneComponent implements OnInit {
constructor(private router: Router) { }
constructor(private router: Router,public echartsData:EchartsDataService) { }
setTimeoutObj//延时器需要清除
@ -28,7 +29,7 @@ export class AddUnitOneComponent implements OnInit {
indexBzt//首页饼状图实例
/* 首页饼状图 */
initCharts(){
this.indexBzt = echarts.init(document.getElementById('indexBzt'));
this.indexBzt = echarts.init(document.getElementById('indexBzt'),'walden');
let options={
title: {
text: '新增单位统计(8900家)',
@ -41,16 +42,17 @@ export class AddUnitOneComponent implements OnInit {
tooltip: {
trigger: 'item',
formatter: (params)=>{
return this.biaogeTishi(params.name)
},
backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度
borderWidth:'1',
borderRadius :'0'
return this.echartsData.biaogeTishiZhi(params.name)
}
},
legend: {
orient: 'vertical',
right: 150,
top:80,
textStyle:{
fontSize:18,
color:"#000000"
},
data: ['高层', '地下', '轨道交通', '化工生产', '储罐类' , '厂房','古建筑', '商市场', '医院', '学校', '宾馆' , '娱乐场所','餐饮业', '影剧院', '展览建筑' , '隧道']
},
series: [
@ -61,7 +63,7 @@ export class AddUnitOneComponent implements OnInit {
center: ['50%', '53%'],
label:{
show:true,
fontSize:13,
fontSize:18,
formatter:'{b}{c}家\n{d|({d}%)}',
rich: {
d: {

2
src/app/statistic-analysis/addUnit/add-unit-three-bar-details/add-unit-three-bar-details.component.scss

@ -67,7 +67,7 @@
overflow: auto;
#barEchart{
width: 100%;
height: 350px;
height: 550px;
position: absolute;
left: 50%;
top: 50%;

80
src/app/statistic-analysis/addUnit/add-unit-three-bar-details/add-unit-three-bar-details.component.ts

@ -21,10 +21,12 @@ export class AddUnitThreeBarDetailsComponent implements OnInit {
ngOnInit(): void {
this.dateInit ()
this.route.queryParams.subscribe(params => {
this.time = params['time'];
this.buildingTypeName = params['buildingTpye'];
this.level = params['level'];
this.bianli()
});
this.setTimeoutObj = window.setTimeout(()=>{
this.detailEcharts()
@ -68,51 +70,87 @@ export class AddUnitThreeBarDetailsComponent implements OnInit {
}
}//柱状图数值顶部显示
zhongNameData = ["浦东中队","黄埔中队","徐汇中队","长宁中队","静安中队","普陀中队","虹口中队","杨浦中队","闵行中队","宝山中队","嘉定中队"]
zhongNumData = [200,190,180,170,160,150,140,130,120,110,100]
zhongNumData = [300,290,280,270,260,250,240,230,220,210,200]
zhiNameData = ["浦东支队","黄埔支队","徐汇支队","长宁支队","静安支队","普陀支队","虹口支队","杨浦支队","闵行支队","宝山支队","嘉定支队"]
zhiNumData = [300,290,280,270,260,250,240,230,220,210,200]
tiaoshiPao:any
//气泡提示数据获取
bianli(){
this.tiaoshiPao=null
var arrshuzu='[';
if(this.level == 'zhidui'){
for(var i=0;i<this.zhiNumData.length;i++){
arrshuzu+='{"value":'+this.zhiNumData[i]+',"coord":['+i+','+this.zhiNumData[i]+'],"name":'+'"'+this.zhiNameData[i]+'"'+'},'
}
}
else{
for(var i=0;i<this.zhongNumData.length;i++){
arrshuzu+='{"value":'+this.zhongNumData[i]+',"coord":['+i+','+this.zhongNumData[i]+'],"name":'+'"'+this.zhongNameData[i]+'"'+'},'
}
}
arrshuzu=arrshuzu.substring(0,arrshuzu.length-1)
arrshuzu+=']'
this.tiaoshiPao=JSON.parse(arrshuzu)
console.log(this.tiaoshiPao)
//return tishiPao
}
detailPlanEchart
option
detailEcharts(){
this.detailPlanEchart = echarts.init(document.getElementById('barEchart'));
this.detailPlanEchart = echarts.init(document.getElementById('barEchart'),'walden');
this.option = {
title: {
text: this.time + '(' +this.buildingTypeName + ')',
text: this.time + '(' +this.buildingTypeName + ')'+':总数(666)',
left: "center",
textStyle: {
fontSize: 28
fontSize: 30
}
},
xAxis: {
type: 'category',
data: this.zhiNameData,
// axisLabel: this.axisLabel
axisLabel:{
//this.axisLabel,
textStyle:{
fontSize :18,
color:'#000000'
}
}
},
yAxis: {
type: 'value'
type: 'value',
axisLabel:{
//this.axisLabel,
textStyle:{
fontSize :18,
color:'#000000'
}
}
},
tooltip: {
trigger: 'item',
formatter: (params)=>{
return this.tableTooltip(params)
},
backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度
borderWidth:'1',
borderRadius :'0',
position:this.serviceData.tableTooltipNoShow2
},
series: [{
data: this.zhiNumData,
type: 'bar',
showBackground: true,
markPoint: {
symbolSize:[65, 65],
data: this.tiaoshiPao
},
barWidth :'58',
backgroundStyle: {
color: 'rgba(220, 220, 220, 0.8)'
},
label: this.topTextlabel
//label: this.topTextlabel
}]
};
@ -155,23 +193,23 @@ export class AddUnitThreeBarDetailsComponent implements OnInit {
{name:params.name,number:params.value,zhanbi:(params.value/1340 * 100).toFixed(2) + "%"}
]
}
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;">'+params.name+'</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>'
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:#FFFFFF;font-size:27px;text-align: center;display:block;">'+params.name+'</span></div>'
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"; >';
res+='<thead style="font-size:18px;"><tr>';
res+='<td style="text-align:center;width:30%;">名称</td>';
res+='<td style="text-align:center;width:30%;">数量</td>'
res+='<td style="text-align:center;width:30%;">总占比</td>'
res+='</tr></thead>'
res+='<tbody>';
for(var i=0;i<data.length;i++){
res+='<tr>'
res+='<td style="text-align:center;border:1px solid #000000">'+data[i].name+'</td>'
res+='<td style="text-align:center;border:1px solid #000000">'+data[i].number+'</td>'
res+='<td style="text-align:center;border:1px solid #000000">'+data[i].zhanbi+'</td></tr>'
res+='<td style="text-align:center;">'+data[i].name+'</td>'
res+='<td style="text-align:center;">'+data[i].number+'</td>'
res+='<td style="text-align:center;">'+data[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+='<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>'
res+='</table></div></div>'
return res
}

12
src/app/statistic-analysis/addUnit/add-unit-two-time/add-unit-two-time.component.html

@ -1,3 +1,11 @@
<!--
* @Descripttion:
* @version:
* @Author: sueRimn
* @Date: 2020-09-05 13:50:45
* @LastEditors: sueRimn
* @LastEditTime: 2020-09-10 08:53:50
-->
<div class="box">
<div class="header">
<div class="queryField">
@ -60,8 +68,8 @@
<button mat-raised-button color="primary" style="margin-left: 10px;" (click)='toggleFalse()'>纵向查询</button>
</div> -->
<div class="btnbox">
<button mat-stroked-button (click)="forward()">类型统计</button>
<button mat-stroked-button (click)="reverse()" [ngClass]="{'selectedBtn': true}">区间选择</button>
<button mat-stroked-button (click)="forward()" style="margin-left: 20px;">类型统计</button>
<button mat-stroked-button (click)="reverse()" [ngClass]="{'selectedBtn': true}"style="margin-left: 50px;">区间选择</button>
</div>
</div>
<div class="echartsbox">

21
src/app/statistic-analysis/addUnit/add-unit-two-time/add-unit-two-time.component.scss

@ -46,18 +46,17 @@
}
}
.btnbox{
height: 80px;
display: flex;
flex-direction:column;
justify-content: space-around;
position: fixed;
top: 64px;
right: 4%;
width: 88px;
button{
width: 88px;
height: 36px;
}
flex-direction:row-reverse;
//float: right;
justify-content: center;
align-items: center;
height: 100%;
button{
width: 88px;
height: 36px;
}
margin-right:4%;
}
}

30
src/app/statistic-analysis/addUnit/add-unit-two-time/add-unit-two-time.component.ts

@ -20,6 +20,7 @@ export class AddUnitTwoTimeComponent implements OnInit {
setTimeoutObj//延时器需要清除
ngOnInit(): void {
this.dateInit ()
this.bianli()
this.setTimeoutObj = setTimeout(() => {
this.oneInit (this.date,this.dateNum)
this.twoInit (this.date,this.dateNum,'month')
@ -133,6 +134,19 @@ export class AddUnitTwoTimeComponent implements OnInit {
date = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月','9月']
dateNum = [270, 253, 244, 199, 189, 173, 160, 198,200]
tiaoshiPao:any
//气泡提示数据获取
bianli(){
var arrshuzu='[';
for(var i=0;i<this.dateNum.length;i++){
arrshuzu+='{"value":'+this.dateNum[i]+',"coord":['+i+','+this.dateNum[i]+'],"name":'+'"'+this.date[i]+'"'+'},'
}
arrshuzu=arrshuzu.substring(0,arrshuzu.length-1)
arrshuzu+=']'
this.tiaoshiPao=JSON.parse(arrshuzu)
console.log(this.tiaoshiPao)
//return tishiPao
}
date2 = ['2019', '2020']
dateNum2 = [220, 180]
@ -161,9 +175,6 @@ export class AddUnitTwoTimeComponent implements OnInit {
//提示框
tooltip: {
trigger: 'axis',
backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度
borderWidth:'1',
borderRadius :'0',
formatter: (params)=>{
return this.serviceData.tableTooltip(this.serviceData.buildingType,params[0].name)
},
@ -207,6 +218,11 @@ export class AddUnitTwoTimeComponent implements OnInit {
series: [{
name: '新增数量',
type: 'line',
markPoint: {
symbolSize:[65, 65],
data: this.tiaoshiPao
},
data: dateNum,
}
],
@ -239,9 +255,6 @@ export class AddUnitTwoTimeComponent implements OnInit {
//提示框
tooltip: {
trigger: 'axis',
backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度
borderWidth:'1',
borderRadius :'0',
formatter: (params)=>{
if(params[0].seriesName == "year"){
return this.serviceData.tableTooltip(this.serviceData.monthTooltip,params[0].name)
@ -288,6 +301,11 @@ export class AddUnitTwoTimeComponent implements OnInit {
series: [{
name: typeName,
type: 'line',
markPoint: {
symbolSize:[65, 65],
data: this.tiaoshiPao
},
data: dateNum,
}
],

11
src/app/statistic-analysis/addUnit/add-unit-two-type-details/add-unit-two-type-details.component.html

@ -1,8 +1,15 @@
<!--
* @Descripttion:
* @version:
* @Author: sueRimn
* @Date: 2020-09-05 08:59:24
* @LastEditors: sueRimn
* @LastEditTime: 2020-09-09 14:28:23
-->
<div class="box">
<div class="topbox">
<div class="btnbox">
<button mat-stroked-button (click)="forward()">类型查询</button>
<button mat-stroked-button (click)="reverse()">区间选择</button>
<button mat-stroked-button (click)="goBack ()">返回</button>
</div>
</div>
<div class="echartsbox">

15
src/app/statistic-analysis/addUnit/add-unit-two-type-details/add-unit-two-type-details.component.scss

@ -11,18 +11,17 @@
min-height: 80px;
border-bottom: 1px gray solid;
.btnbox{
height: 80px;
display: flex;
flex-direction:column;
justify-content: space-around;
position: fixed;
top: 64px;
right: 4%;
width: 88px;
flex-direction:row-reverse;
float: right;
justify-content: center;
align-items: center;
height: 100%;
button{
width: 88px;
height: 36px;
}
margin-right:4%;
}
}
@ -32,7 +31,7 @@
overflow: auto;
#barEchart{
width: 100%;
height: 350px;
height: 550px;
position: absolute;
left: 50%;
top: 50%;

80
src/app/statistic-analysis/addUnit/add-unit-two-type-details/add-unit-two-type-details.component.ts

@ -1,6 +1,7 @@
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { ActivatedRoute } from '@angular/router';
import {EchartsDataService} from '../../echarts-data.service';
declare var echarts: any;
@Component({
selector: 'app-add-unit-two-type-details',
@ -9,18 +10,24 @@ declare var echarts: any;
})
export class AddUnitTwoTypeDetailsComponent implements OnInit {
constructor(public route: ActivatedRoute,private router: Router) { }
constructor(public route: ActivatedRoute,private router: Router,public echartsData:EchartsDataService) { }
forward(){
this.router.navigate(['/statisticanalysis/addUnit_one/addUnit_two_type'])
}
reverse(){
this.router.navigate(['/statisticanalysis/addUnit_one/addUnit_two_time'])
}
//返回
goBack () {
history.go(-1)
this.echartsData.statefulInspectionToggle = true
}
organizationName:String
buildingTypeName:String
setTimeoutObj//延时器需要清除
ngOnInit(): void {
this.bianli()
this.route.queryParams.subscribe(params => {
this.organizationName = params['organizationName'];
this.buildingTypeName = params['buildingTypeName'];
@ -46,44 +53,73 @@ export class AddUnitTwoTypeDetailsComponent implements OnInit {
}//柱状图数值顶部显示
zhongNameData = ["浦东中队","黄埔中队","徐汇中队","长宁中队","静安中队","普陀中队","虹口中队","杨浦中队","闵行中队","宝山中队","嘉定中队"]
zhongNumData = [200,190,180,170,160,150,140,130,120,110,100]
tiaoshiPao:any
//气泡提示数据获取
bianli(){
var arrshuzu='[';
for(var i=0;i<this.zhongNumData.length;i++){
arrshuzu+='{"value":'+this.zhongNumData[i]+',"coord":['+i+','+this.zhongNumData[i]+'],"name":'+'"'+this.zhongNameData[i]+'"'+'},'
}
arrshuzu=arrshuzu.substring(0,arrshuzu.length-1)
arrshuzu+=']'
this.tiaoshiPao=JSON.parse(arrshuzu)
console.log(this.tiaoshiPao)
//return tishiPao
}
detailPlanEchart//echarts实例
detailEcharts(){
this.detailPlanEchart = echarts.init(document.getElementById('barEchart'));
this.detailPlanEchart = echarts.init(document.getElementById('barEchart'),'walden');
var option = {
title: {
text: this.buildingTypeName + '(' +this.organizationName + ')',
text: this.buildingTypeName + '(' +this.organizationName + ')'+':总数(666)',
left: "center",
bottom: "500",
textStyle: {
fontSize: 28
fontSize: 30
}
},
xAxis: {
type: 'category',
data: this.zhongNameData,
// axisLabel: this.axisLabel
axisLabel:{
//this.axisLabel,
textStyle:{
fontSize :18,
color:'#000000'
}
}
},
yAxis: {
type: 'value'
type: 'value',
axisLabel:{
//this.axisLabel,
textStyle:{
fontSize :18,
color:'#000000'
}
}
},
tooltip: {
trigger: 'item',
formatter: (params)=>{
return this.tableTooltip(params)
},
backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度
borderWidth:'1',
borderRadius :'0'
}
},
series: [{
data: this.zhongNumData,
type: 'bar',
showBackground: true,
barWidth :'58',
markPoint: {
symbolSize:[65, 65],
data: this.tiaoshiPao
},
barWidth :'38',
backgroundStyle: {
color: 'rgba(220, 220, 220, 0.8)'
},
label: this.topTextlabel
//label: this.topTextlabel
}]
};
this.detailPlanEchart.setOption(option);
@ -94,19 +130,19 @@ export class AddUnitTwoTypeDetailsComponent implements OnInit {
var data = [
{name:params.name,number:params.value,zhanbi:(params.value/1340 * 100).toFixed(2) + "%"}
]
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;">'+params.name+'</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>'
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:#FFFFFF;font-size:27px;text-align: center;display:block;">'+params.name+'</span></div>'
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"; >';
res+='<thead style="font-size:18px;"><tr>';
res+='<td style="text-align:center;width:30%;">名称</td>';
res+='<td style="text-align:center;width:30%;">数量</td>'
res+='<td style="text-align:center;width:30%;">总占比</td>'
res+='</tr></thead>'
res+='<tbody>';
for(var i=0;i<data.length;i++){
res+='<tr>'
res+='<td style="text-align:center;border:1px solid #000000">'+data[i].name+'</td>'
res+='<td style="text-align:center;border:1px solid #000000">'+data[i].number+'</td>'
res+='<td style="text-align:center;border:1px solid #000000">'+data[i].zhanbi+'</td></tr>'
res+='<td style="text-align:center;">'+data[i].name+'</td>'
res+='<td style="text-align:center;">'+data[i].number+'</td>'
res+='<td style="text-align:center;">'+data[i].zhanbi+'</td></tr>'
}
res+='</tbody>'

14
src/app/statistic-analysis/addUnit/add-unit-two-type-statistics/add-unit-two-type-statistics.component.html

@ -1,15 +1,23 @@
<!--
* @Descripttion:
* @version:
* @Author: sueRimn
* @Date: 2020-09-05 13:50:45
* @LastEditors: sueRimn
* @LastEditTime: 2020-09-10 08:56:11
-->
<div class="box">
<div class="topbox">
<div class="btnbox">
<button mat-stroked-button (click)="forward()" [ngClass]="{'selectedBtn': url == '/statisticanalysis/addUnit_one/addUnit_two_type'}">类型统计</button>
<button mat-stroked-button (click)="reverse()" [ngClass]="{'selectedBtn': url == '/statisticanalysis/addUnit_one/addUnit_two_time'}">区间选择</button>
<button mat-stroked-button (click)="forward()" [ngClass]="{'selectedBtn': url == '/statisticanalysis/addUnit_one/addUnit_two_type'}" >类型统计</button>
<button mat-stroked-button (click)="reverse()" [ngClass]="{'selectedBtn': url == '/statisticanalysis/addUnit_one/addUnit_two_time'}"style="margin-right: 30px;">区间选择</button>
</div>
</div>
<div class="echartsbox">
<div id="pie">
</div>
<div>
<div style="padding-top: 100px;">
<div class="publicCss" id="gaoceng"></div>
<div class="publicCss" id="dixia"></div>
<div class="publicCss" id="guidao"></div>

13
src/app/statistic-analysis/addUnit/add-unit-two-type-statistics/add-unit-two-type-statistics.component.scss

@ -11,18 +11,17 @@
min-height: 80px;
border-bottom: 1px gray solid;
.btnbox{
height: 80px;
display: flex;
flex-direction:column;
justify-content: space-around;
position: fixed;
top: 64px;
right: 4%;
width: 88px;
flex-direction:row-reverse;
float: right;
justify-content: center;
align-items: center;
height: 100%;
button{
width: 88px;
height: 36px;
}
margin-right:4%;
}
}

125
src/app/statistic-analysis/addUnit/add-unit-two-type-statistics/add-unit-two-type-statistics.component.ts

@ -1,5 +1,6 @@
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-two-type-statistics',
@ -8,7 +9,7 @@ declare var echarts: any;
})
export class AddUnitTwoTypeStatisticsComponent implements OnInit {
constructor(private router: Router) { }
constructor(private router: Router,public data:EchartsDataService) { }
forward(){
this.router.navigate(['/statisticanalysis/addUnit_one/addUnit_two_type'])
@ -20,6 +21,7 @@ export class AddUnitTwoTypeStatisticsComponent implements OnInit {
setTimeoutObj//延时器需要清除
ngOnInit(): void {
this.setTimeoutObj = window.setTimeout(()=>{
this.bianli()
this.initCharts()
this.barEcharts()
},0)
@ -36,6 +38,10 @@ export class AddUnitTwoTypeStatisticsComponent implements OnInit {
axisLabel = {
interval: 0,
textStyle:{
fontSize :16,
color:'#000000'
},
formatter:function(value)
{
var ret = "";//拼接加\n返回的类目项
@ -105,6 +111,19 @@ export class AddUnitTwoTypeStatisticsComponent implements OnInit {
{name:"崇明中队",number:"55",zhanbi:"0.3%"} ]
zhiNameData = ["浦东支队","黄埔支队","徐汇支队","长宁支队","静安支队","普陀支队","虹口支队","杨浦支队","闵行支队","宝山支队","嘉定支队","松江支队","金山支队","崇明支队"]
zhiNumData = [200,190,180,170,160,150,140,130,120,110,100,90,80,70]
tiaoshiPao:any
//气泡提示数据获取
bianli(){
var arrshuzu='[';
for(var i=0;i<this.zhiNumData.length;i++){
arrshuzu+='{"value":'+this.zhiNumData[i]+',"coord":['+i+','+this.zhiNumData[i]+'],"name":'+'"'+this.zhiNameData[i]+'"'+'},'
}
arrshuzu=arrshuzu.substring(0,arrshuzu.length-1)
arrshuzu+=']'
this.tiaoshiPao=JSON.parse(arrshuzu)
console.log(this.tiaoshiPao)
//return tishiPao
}
forArr = [{id:'gaoceng',name:'高层',echart:null},
{id:'dixia',name:'地下',echart:null},
{id:'guidao',name:'轨道交通',echart:null},
@ -124,7 +143,7 @@ export class AddUnitTwoTypeStatisticsComponent implements OnInit {
indexBzt //顶部饼状图
/* 顶部饼状图 */
initCharts(){
this.indexBzt = echarts.init(document.getElementById('pie'));
this.indexBzt = echarts.init(document.getElementById('pie'),'walden');
let options={
title: {
text: '新增单位统计(8900家)',
@ -139,48 +158,16 @@ export class AddUnitTwoTypeStatisticsComponent implements OnInit {
formatter: (params)=>{
return this.tableTooltip(this.tableDataZhi,params.name)
},
backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度
borderWidth:'1',
borderRadius :'0',
position: function (point, params, dom, rect, size) {
// 鼠标坐标和提示框位置的参考坐标系是:以外层div的左上角那一点为原点,x轴向右,y轴向下
// 提示框位置
var x = 0; // x坐标位置
var y = 0; // y坐标位置
// 当前鼠标位置
var pointX = point[0];
var pointY = point[1];
// 外层div大小
// var viewWidth = size.viewSize[0];
// var viewHeight = size.viewSize[1];
// 提示框大小
var boxWidth = size.contentSize[0];
var boxHeight = size.contentSize[1];
// boxWidth > pointX 说明鼠标左边放不下提示框
if (boxWidth > pointX) {
x = 35;
} else { // 左边放的下
x = pointX + 80;
}
// boxHeight > pointY 说明鼠标上边放不下提示框
if (boxHeight > pointY) {
y = 65;
} else { // 上边放得下
y = pointY - boxHeight;
}
return [pointX, pointY];
}
position: this.data.tableTooltipNoShow2
},
legend: {
orient: 'vertical',
right: 150,
top:80,
textStyle:{
fontSize:18,
color:"#000000"
},
data: ['高层', '地下', '轨道交通', '化工生产', '储罐类' , '厂房','古建筑', '商市场', '医院', '学校', '宾馆' , '娱乐场所','餐饮业', '影剧院', '展览建筑' , '隧道']
},
series: [
@ -191,7 +178,7 @@ export class AddUnitTwoTypeStatisticsComponent implements OnInit {
center: ['50%', '60%'],
label:{
show:true,
fontSize:13,
fontSize:16,
formatter:'{b}{c}家\n{d|({d}%)}',
rich: {
d: {
@ -236,12 +223,13 @@ export class AddUnitTwoTypeStatisticsComponent implements OnInit {
barEcharts(){
this.forArr.forEach(item=>{
let _this = this
item.echart = echarts.init(document.getElementById(item.id));
item.echart = echarts.init(document.getElementById(item.id),'walden');
let option = {
title: {
text: item.name,
text: item.name+':总数(1024)',
left: "center",
top: "15",
top: "0",
//bottom: '80%',
textStyle: {
fontSize: 23
}
@ -252,26 +240,26 @@ export class AddUnitTwoTypeStatisticsComponent implements OnInit {
axisLabel: this.axisLabel
},
yAxis: {
type: 'value'
type: 'value',
axisLabel:this.axisLabel,
},
tooltip: {
trigger: 'item',
formatter: (params)=>{
return this.tableTooltip(this.tableDataZhong,params.name)
},
backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度
borderWidth:'1',
borderRadius :'0'
}
},
series: [{
data: this.zhiNumData,
type: 'bar',
showBackground: true,
markPoint: {
data: this.tiaoshiPao
},
backgroundStyle: {
color: 'rgba(220, 220, 220, 0.8)'
},
barWidth :'28',
label: this.topTextlabel
//label: this.topTextlabel
}]
};
item.echart.setOption(option);
@ -284,25 +272,26 @@ export class AddUnitTwoTypeStatisticsComponent implements OnInit {
//提示框表格
tableTooltip(dataArr,title:string){
let data = dataArr
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:26px;text-align: center;display:block;">'+title+'</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<data.length;i++){
res+='<tr>'
res+='<td style="text-align:center;border:1px solid #000000">'+data[i].name+'</td>'
res+='<td style="text-align:center;border:1px solid #000000">'+data[i].number+'</td>'
res+='<td style="text-align:center;border:1px solid #000000">'+data[i].zhanbi+'</td></tr>'
}
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:#FFFFFF;font-size:27px;text-align: center;display:block;">'+title+'</span></div>'
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"; >';
res+='<thead style="font-size:18px;"><tr>';
res+='<td style="text-align:center;width:30%;">名称</td>';
res+='<td style="text-align:center;width:30%;">数量</td>'
res+='<td style="text-align:center;width:30%;">总占比</td>'
res+='</tr></thead>'
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.tableDataZhong.length;i++){
res+='<tr>'
res+='<td style="text-align:center;">'+this.tableDataZhong[i].name+'</td>'
res+='<td style="text-align:center;">'+this.tableDataZhong[i].number+'</td>'
res+='<td style="text-align:center;">'+this.tableDataZhong[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
res+='</tbody>'
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>'
res+='</table></div></div>'
return res
}
}

19
src/app/statistic-analysis/buildingType/building-type-one/building-type-one.component.ts

@ -1,5 +1,6 @@
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import {EchartsDataService,} from '../../echarts-data.service'
declare var echarts: any;
@Component({
selector: 'app-building-type-one',
@ -8,7 +9,7 @@ declare var echarts: any;
})
export class BuildingTypeOneComponent implements OnInit {
constructor(private router: Router) { }
constructor(private router: Router,public echartsData:EchartsDataService) { }
ngOnInit(): void {
window.setTimeout(()=>{
@ -22,7 +23,7 @@ export class BuildingTypeOneComponent implements OnInit {
/* 首页饼状图 */
indexBzt
initCharts(){
this.indexBzt = echarts.init(document.getElementById('indexBzt'));
this.indexBzt = echarts.init(document.getElementById('indexBzt'),'walden');
let options={
title: {
text: '建筑类型统计(8900家)',
@ -34,17 +35,19 @@ export class BuildingTypeOneComponent implements OnInit {
},
tooltip: {
trigger: 'item',
position: this.echartsData.tableTooltipNoShow2,
formatter: (params)=>{
return this.biaogeTishi(params.name)
},
backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度
borderWidth:'1',
borderRadius :'0'
return this.echartsData.biaogeTishiZhi(params.name)
}
},
legend: {
orient: 'vertical',
right: 150,
top:80,
textStyle:{
fontSize:18,
color:"#000000"
},
data: ['高层', '地下', '轨道交通', '化工生产', '储罐类' , '厂房','古建筑', '商市场', '医院', '学校', '宾馆' , '娱乐场所','餐饮业', '影剧院', '展览建筑' , '隧道']
},
series: [
@ -55,7 +58,7 @@ export class BuildingTypeOneComponent implements OnInit {
center: ['50%', '53%'],
label:{
show:true,
fontSize:13,
fontSize:16,
formatter:'{b}{c}家\n{d|({d}%)}',
rich: {
d: {

11
src/app/statistic-analysis/buildingType/building-type-three-details/building-type-three-details.component.html

@ -1,8 +1,15 @@
<!--
* @Descripttion:
* @version:
* @Author: sueRimn
* @Date: 2020-09-05 08:59:24
* @LastEditors: sueRimn
* @LastEditTime: 2020-09-09 14:13:53
-->
<div class="box">
<div class="topbox">
<div class="btnbox">
<button mat-stroked-button (click)="forward()">正向查询</button>
<button mat-stroked-button (click)="reverse()">反向查询</button>
<button mat-stroked-button (click)="goBack ()">返回</button>
</div>
</div>
<div class="echartsbox">

24
src/app/statistic-analysis/buildingType/building-type-three-details/building-type-three-details.component.scss

@ -10,16 +10,18 @@
height: 80px;
border-bottom: 1px gray solid;
.btnbox{
display: flex;
flex-direction:column;
float: right;
justify-content: space-around;
height: 100%;
button{
width: 88px;
height: 36px;
}
margin-right:4%;
height: 80px;
display: flex;
flex-direction:column;
justify-content: space-around;
position: fixed;
top: 64px;
right: 4%;
width: 88px;
button{
width: 88px;
height: 36px;
}
}
}
.echartsbox{
@ -28,7 +30,7 @@
overflow: auto;
#barEchart{
width: 100%;
height: 350px;
height: 550px;
position: absolute;
left: 50%;
top: 50%;

77
src/app/statistic-analysis/buildingType/building-type-three-details/building-type-three-details.component.ts

@ -1,6 +1,7 @@
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { ActivatedRoute } from '@angular/router';
import {EchartsDataService} from '../../echarts-data.service';
declare var echarts: any;
@Component({
selector: 'app-building-type-three-details',
@ -9,19 +10,25 @@ declare var echarts: any;
})
export class BuildingTypeThreeDetailsComponent implements OnInit {
constructor(public route: ActivatedRoute,private router: Router) { }
constructor(public route: ActivatedRoute,private router: Router,public echartsData:EchartsDataService) { }
forward(){
this.router.navigate(['/statisticanalysis/buildingType_one/buildingType_two_forward'])
}
reverse(){
this.router.navigate(['/statisticanalysis/buildingType_one/buildingType_two_reverse'])
}
//返回
goBack () {
history.go(-1)
this.echartsData.statefulInspectionToggle = true
}
organizationName:String
buildingTypeName:String
ngOnInit(): void {
this.route.queryParams.subscribe(params => {
this.bianli()
this.organizationName = params['organizationName'];
this.buildingTypeName = params['buildingTypeName'];
});
@ -45,43 +52,73 @@ export class BuildingTypeThreeDetailsComponent implements OnInit {
}//柱状图数值顶部显示
zhongNameData = ["浦东中队","黄埔中队","徐汇中队","长宁中队","静安中队","普陀中队","虹口中队","杨浦中队","闵行中队","宝山中队","嘉定中队"]
zhongNumData = [200,190,180,170,160,150,140,130,120,110,100]
tiaoshiPao:any
//气泡提示数据获取
bianli(){
var arrshuzu='[';
for(var i=0;i<this.zhongNumData.length;i++){
arrshuzu+='{"value":'+this.zhongNumData[i]+',"coord":['+i+','+this.zhongNumData[i]+'],"name":'+'"'+this.zhongNameData[i]+'"'+'},'
}
arrshuzu=arrshuzu.substring(0,arrshuzu.length-1)
arrshuzu+=']'
this.tiaoshiPao=JSON.parse(arrshuzu)
console.log(this.tiaoshiPao)
//return tishiPao
}
detailPlanEchart
detailEcharts(){
this.detailPlanEchart = echarts.init(document.getElementById('barEchart'));
this.detailPlanEchart = echarts.init(document.getElementById('barEchart'),'walden');
var option = {
title: {
text: this.buildingTypeName + '(' +this.organizationName + ')',
text: this.buildingTypeName + '(' +this.organizationName + ')'+':总数(666)',
left: "center",
textStyle: {
fontSize: 28
fontSize: 30
}
},
xAxis: {
type: 'category',
data: this.zhongNameData,
// axisLabel: this.axisLabel
axisLabel:{
//this.axisLabel,
textStyle:{
fontSize :18,
color:'#000000'
}
}
},
yAxis: {
type: 'value'
type: 'value',
axisLabel:{
//this.axisLabel,
textStyle:{
fontSize :18,
color:'#000000'
}
}
},
tooltip: {
trigger: 'item',
formatter: (params)=>{
return this.tableTooltip(params)
},
backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度
borderWidth:'1',
borderRadius :'0'
position: this.echartsData.tableTooltipNoShow2
},
series: [{
data: this.zhongNumData,
type: 'bar',
showBackground: true,
barWidth :'58',
barWidth :'38',
markPoint: {
symbolSize:[65, 65],
data: this.tiaoshiPao
},
backgroundStyle: {
color: 'rgba(220, 220, 220, 0.8)'
},
label: this.topTextlabel
//label: this.topTextlabel
}]
};
this.detailPlanEchart.setOption(option);
@ -92,19 +129,19 @@ export class BuildingTypeThreeDetailsComponent implements OnInit {
var data = [
{name:params.name,number:params.value,zhanbi:(params.value/1340 * 100).toFixed(2) + "%"}
]
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;">'+params.name+'</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>'
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:#FFFFFF;font-size:27px;text-align: center;display:block;">'+params.name+'</span></div>'
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"; >';
res+='<thead style="font-size:18px;"><tr>';
res+='<td style="text-align:center;width:30%;">名称</td>';
res+='<td style="text-align:center;width:30%;">数量</td>'
res+='<td style="text-align:center;width:30%;">总占比</td>'
res+='</tr></thead>'
res+='<tbody>';
for(var i=0;i<data.length;i++){
res+='<tr>'
res+='<td style="text-align:center;border:1px solid #000000">'+data[i].name+'</td>'
res+='<td style="text-align:center;border:1px solid #000000">'+data[i].number+'</td>'
res+='<td style="text-align:center;border:1px solid #000000">'+data[i].zhanbi+'</td></tr>'
res+='<td style="text-align:center;">'+data[i].name+'</td>'
res+='<td style="text-align:center;">'+data[i].number+'</td>'
res+='<td style="text-align:center;">'+data[i].zhanbi+'</td></tr>'
}
res+='</tbody>'

15
src/app/statistic-analysis/buildingType/building-type-two-forward/building-type-two-forward.component.html

@ -1,15 +1,24 @@
<!--
* @Descripttion:
* @version:
* @Author: sueRimn
* @Date: 2020-09-05 13:50:45
* @LastEditors: sueRimn
* @LastEditTime: 2020-09-10 09:15:36
-->
<div class="box">
<div class="topbox">
<div class="btnbox">
<button mat-stroked-button (click)="forward()" style="background-color: #2196f3;color: white;">正向查询</button>
<button mat-stroked-button (click)="reverse()">反向查询</button>
<button mat-stroked-button (click)="goBack ()">返回</button>
<!-- <button mat-stroked-button (click)="forward()" style="background-color: #2196f3;color: white;margin-right: 10px;">正向查询</button>
-->
</div>
</div>
<div class="echartsbox">
<div id="pie">
</div>
<div>
<div style="padding-top: 50px;">
<div class="publicCss" id="gaoceng"></div>
<div class="publicCss" id="dixia"></div>
<div class="publicCss" id="guidao"></div>

5
src/app/statistic-analysis/buildingType/building-type-two-forward/building-type-two-forward.component.scss

@ -11,9 +11,10 @@
border-bottom: 1px gray solid;
.btnbox{
display: flex;
flex-direction:column;
flex-direction:row-reverse;
float: right;
justify-content: space-around;
justify-content: center;
align-items: center;
height: 100%;
button{
width: 88px;

141
src/app/statistic-analysis/buildingType/building-type-two-forward/building-type-two-forward.component.ts

@ -1,5 +1,6 @@
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import {EchartsDataService} from '../../echarts-data.service';
declare var echarts: any;
@Component({
selector: 'app-building-type-two-forward',
@ -8,7 +9,7 @@ declare var echarts: any;
})
export class BuildingTypeTwoForwardComponent implements OnInit {
constructor(private router: Router) { }
constructor(private router: Router,public data:EchartsDataService) { }
forward(){
this.router.navigate(['/statisticanalysis/buildingType_one/buildingType_two_forward'])
}
@ -17,6 +18,7 @@ export class BuildingTypeTwoForwardComponent implements OnInit {
}
ngOnInit(): void {
window.setTimeout(()=>{
this.bianli()
this.initCharts()
this.barEcharts()
},0)
@ -29,8 +31,17 @@ export class BuildingTypeTwoForwardComponent implements OnInit {
item.echart.dispose()
})
}
//返回
goBack () {
history.go(-1)
this.data.statefulInspectionToggle = true
}
axisLabel = {
interval: 0,
textStyle:{
fontSize :16,
color:'#000000'
},
formatter:function(value)
{
var ret = "";//拼接加\n返回的类目项
@ -99,7 +110,20 @@ export class BuildingTypeTwoForwardComponent implements OnInit {
{name:"金山中队",number:"65",zhanbi:"0.4%"},
{name:"崇明中队",number:"55",zhanbi:"0.3%"} ]
zhiNameData = ["浦东支队","黄埔支队","徐汇支队","长宁支队","静安支队","普陀支队","虹口支队","杨浦支队","闵行支队","宝山支队","嘉定支队","松江支队","金山支队","崇明支队",'青浦支队']
zhiNumData = [200,190,180,170,160,150,140,130,120,110,100,90,80,70,60]
zhiNumData = [200,190,180,170,160,150,140,130,120,110,100,90,80,70,60,50]
tiaoshiPao:any
//气泡提示数据获取
bianli(){
var arrshuzu='[';
for(var i=0;i<this.zhiNumData.length;i++){
arrshuzu+='{"value":'+this.zhiNumData[i]+',"coord":['+i+','+this.zhiNumData[i]+'],"name":'+'"'+this.zhiNameData[i]+'"'+'},'
}
arrshuzu=arrshuzu.substring(0,arrshuzu.length-1)
arrshuzu+=']'
this.tiaoshiPao=JSON.parse(arrshuzu)
console.log(this.tiaoshiPao)
//return tishiPao
}
pieData = [
{value: 500, name: '浦东支队'},
{value: 800, name: '黄埔支队'},
@ -140,7 +164,7 @@ export class BuildingTypeTwoForwardComponent implements OnInit {
/* 顶部饼状图 */
indexBzt
initCharts(){
this.indexBzt = echarts.init(document.getElementById('pie'));
this.indexBzt = echarts.init(document.getElementById('pie'),'walden');
let options={
title: {
text: '组织机构统计(5500家)',
@ -153,50 +177,21 @@ export class BuildingTypeTwoForwardComponent implements OnInit {
tooltip: {
trigger: 'item',
formatter: (params)=>{
return this.tableTooltip(this.tableDataZhi,params.name)
return this.data.biaogeTishi(params.name)
},
backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度
/* backgroundColor:'rgba(255,255,255,1)',//rgba调节背景颜色与透明度
borderWidth:'1',
borderRadius :'0',
position: function (point, params, dom, rect, size) {
// 鼠标坐标和提示框位置的参考坐标系是:以外层div的左上角那一点为原点,x轴向右,y轴向下
// 提示框位置
var x = 0; // x坐标位置
var y = 0; // y坐标位置
// 当前鼠标位置
var pointX = point[0];
var pointY = point[1];
// 外层div大小
// var viewWidth = size.viewSize[0];
// var viewHeight = size.viewSize[1];
// 提示框大小
var boxWidth = size.contentSize[0];
var boxHeight = size.contentSize[1];
// boxWidth > pointX 说明鼠标左边放不下提示框
if (boxWidth > pointX) {
x = 35;
} else { // 左边放的下
x = pointX + 80;
}
// boxHeight > pointY 说明鼠标上边放不下提示框
if (boxHeight > pointY) {
y = 65;
} else { // 上边放得下
y = pointY - boxHeight;
}
return [pointX, pointY];
}
borderRadius :'0', */
position: this.data.tableTooltipNoShow2
},
legend: {
orient: 'vertical',
right: 150,
top:80,
textStyle:{
fontSize:18,
color:"#000000"
},
data:this.zhiNameData
},
series: [
@ -207,7 +202,7 @@ export class BuildingTypeTwoForwardComponent implements OnInit {
center: ['50%', '60%'],
label:{
show:true,
fontSize:13,
fontSize:16,
formatter:'{b}{c}家\n{d|({d}%)}',
rich: {
d: {
@ -235,13 +230,14 @@ export class BuildingTypeTwoForwardComponent implements OnInit {
barEcharts(){
this.forArr.forEach(item=>{
let _this = this
item.echart = echarts.init(document.getElementById(item.id));
item.echart = echarts.init(document.getElementById(item.id),'walden');
let option = {
color: ['#3398DB'],
title: {
text: item.name,
text: item.name+':总数(1024)',
left: "center",
top: "15",
top: "0",
//bottom: '80',
textStyle: {
fontSize: 23
}
@ -252,26 +248,34 @@ export class BuildingTypeTwoForwardComponent implements OnInit {
axisLabel: this.axisLabel
},
yAxis: {
type: 'value'
type: 'value',
axisLabel:{
//this.axisLabel,
textStyle:{
fontSize :16,
color:'#000000'
}
}
},
tooltip: {
trigger: 'item',
formatter: (params)=>{
return this.tableTooltip(this.tableDataZhong,params.name)
},
backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度
borderWidth:'1',
borderRadius :'0'
position: this.data.tableTooltipNoShow2
},
series: [{
data: this.buildingTypeNum,
type: 'bar',
showBackground: true,
markPoint: {
data: this.tiaoshiPao
},
backgroundStyle: {
color: 'rgba(220, 220, 220, 0.8)'
},
barWidth :'28',
label: this.topTextlabel
//label: this.topTextlabel
}]
};
item.echart.setOption(option);
@ -284,24 +288,25 @@ export class BuildingTypeTwoForwardComponent implements OnInit {
//提示框表格
tableTooltip(dataArr,title:string){
let data = dataArr
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:26px;text-align: center;display:block;">'+title+'</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<data.length;i++){
res+='<tr>'
res+='<td style="text-align:center;border:1px solid #000000">'+data[i].name+'</td>'
res+='<td style="text-align:center;border:1px solid #000000">'+data[i].number+'</td>'
res+='<td style="text-align:center;border:1px solid #000000">'+data[i].zhanbi+'</td></tr>'
}
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:#FFFFFF;font-size:27px;text-align: center;display:block;">'+title+'</span></div>'
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"; >';
res+='<thead style="font-size:18px;"><tr>';
res+='<td style="text-align:center;width:30%;">名称</td>';
res+='<td style="text-align:center;width:30%;">数量</td>'
res+='<td style="text-align:center;width:30%;">总占比</td>'
res+='</tr></thead>'
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.tableDataZhi.length;i++){
res+='<tr>'
res+='<td style="text-align:center;">'+this.tableDataZhi[i].name+'</td>'
res+='<td style="text-align:center;">'+this.tableDataZhi[i].number+'</td>'
res+='<td style="text-align:center;">'+this.tableDataZhi[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
res+='</tbody>'
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>'
res+='</table></div></div>'
return res
}
}

123
src/app/statistic-analysis/buildingType/building-type-two-reverse/building-type-two-reverse.component.ts

@ -1,5 +1,6 @@
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import {EchartsDataService} from '../../echarts-data.service';
declare var echarts: any;
@Component({
selector: 'app-building-type-two-reverse',
@ -8,7 +9,7 @@ declare var echarts: any;
})
export class BuildingTypeTwoReverseComponent implements OnInit {
constructor(private router: Router) { }
constructor(private router: Router,public data:EchartsDataService) { }
forward(){
this.router.navigate(['/statisticanalysis/buildingType_one/buildingType_two_forward'])
@ -18,6 +19,7 @@ export class BuildingTypeTwoReverseComponent implements OnInit {
}
ngOnInit(): void {
window.setTimeout(()=>{
this.bianli()
this.initCharts()
this.barEcharts()
},0)
@ -32,6 +34,10 @@ export class BuildingTypeTwoReverseComponent implements OnInit {
}
axisLabel = {
interval: 0,
textStyle:{
fontSize :16,
color:'#000000'
},
formatter:function(value)
{
var ret = "";//拼接加\n返回的类目项
@ -101,6 +107,19 @@ export class BuildingTypeTwoReverseComponent implements OnInit {
{name:"崇明中队",number:"55",zhanbi:"0.3%"} ]
zhiNameData = ["浦东支队","黄埔支队","徐汇支队","长宁支队","静安支队","普陀支队","虹口支队","杨浦支队","闵行支队","宝山支队","嘉定支队","松江支队","金山支队","崇明支队"]
zhiNumData = [200,190,180,170,160,150,140,130,120,110,100,90,80,70]
tiaoshiPao:any
//气泡提示数据获取
bianli(){
var arrshuzu='[';
for(var i=0;i<this.zhiNumData.length;i++){
arrshuzu+='{"value":'+this.zhiNumData[i]+',"coord":['+i+','+this.zhiNumData[i]+'],"name":'+'"'+this.zhiNameData[i]+'"'+'},'
}
arrshuzu=arrshuzu.substring(0,arrshuzu.length-1)
arrshuzu+=']'
this.tiaoshiPao=JSON.parse(arrshuzu)
console.log(this.tiaoshiPao)
//return tishiPao
}
forArr = [{id:'gaoceng',name:'高层',echart:null},
{id:'dixia',name:'地下',echart:null},
{id:'guidao',name:'轨道交通',echart:null},
@ -121,7 +140,7 @@ export class BuildingTypeTwoReverseComponent implements OnInit {
/* 顶部饼状图 */
indexBzt
initCharts(){
this.indexBzt = echarts.init(document.getElementById('pie'));
this.indexBzt = echarts.init(document.getElementById('pie'),'walden');
let options={
title: {
text: '建筑类型统计(8900家)',
@ -136,48 +155,16 @@ export class BuildingTypeTwoReverseComponent implements OnInit {
formatter: (params)=>{
return this.tableTooltip(this.tableDataZhi,params.name)
},
backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度
borderWidth:'1',
borderRadius :'0',
position: function (point, params, dom, rect, size) {
// 鼠标坐标和提示框位置的参考坐标系是:以外层div的左上角那一点为原点,x轴向右,y轴向下
// 提示框位置
var x = 0; // x坐标位置
var y = 0; // y坐标位置
// 当前鼠标位置
var pointX = point[0];
var pointY = point[1];
// 外层div大小
// var viewWidth = size.viewSize[0];
// var viewHeight = size.viewSize[1];
// 提示框大小
var boxWidth = size.contentSize[0];
var boxHeight = size.contentSize[1];
// boxWidth > pointX 说明鼠标左边放不下提示框
if (boxWidth > pointX) {
x = 35;
} else { // 左边放的下
x = pointX + 80;
}
// boxHeight > pointY 说明鼠标上边放不下提示框
if (boxHeight > pointY) {
y = 65;
} else { // 上边放得下
y = pointY - boxHeight;
}
return [pointX, pointY];
}
position: this.data.tableTooltipNoShow2
},
legend: {
orient: 'vertical',
right: 150,
top:80,
textStyle:{
fontSize:18,
color:"#000000"
},
data: ['高层', '地下', '轨道交通', '化工生产', '储罐类' , '厂房','古建筑', '商市场', '医院', '学校', '宾馆' , '娱乐场所','餐饮业', '影剧院', '展览建筑' , '隧道']
},
series: [
@ -188,7 +175,7 @@ export class BuildingTypeTwoReverseComponent implements OnInit {
center: ['50%', '60%'],
label:{
show:true,
fontSize:13,
fontSize:16,
formatter:'{b}{c}家\n{d|({d}%)}',
rich: {
d: {
@ -233,12 +220,13 @@ export class BuildingTypeTwoReverseComponent implements OnInit {
barEcharts(){
this.forArr.forEach(item=>{
let _this = this
item.echart = echarts.init(document.getElementById(item.id));
item.echart = echarts.init(document.getElementById(item.id),'walden');
let option = {
title: {
text: item.name,
text: item.name+':总数(1024)',
left: "center",
top: "15",
bottom: '80',
textStyle: {
fontSize: 23
}
@ -249,26 +237,28 @@ export class BuildingTypeTwoReverseComponent implements OnInit {
axisLabel: this.axisLabel
},
yAxis: {
type: 'value'
type: 'value',
axisLabel:this.axisLabel,
},
tooltip: {
trigger: 'item',
formatter: (params)=>{
return this.tableTooltip(this.tableDataZhong,params.name)
},
backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度
borderWidth:'1',
borderRadius :'0'
position: this.data.tableTooltipNoShow2
},
series: [{
data: this.zhiNumData,
type: 'bar',
showBackground: true,
markPoint: {
data: this.tiaoshiPao
},
//showBackground: true,
backgroundStyle: {
color: 'rgba(220, 220, 220, 0.8)'
},
barWidth :'28',
label: this.topTextlabel
//label: this.topTextlabel
}]
};
item.echart.setOption(option);
@ -280,24 +270,25 @@ export class BuildingTypeTwoReverseComponent implements OnInit {
//提示框表格
tableTooltip(dataArr,title:string){
let data = dataArr
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:26px;text-align: center;display:block;">'+title+'</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<data.length;i++){
res+='<tr>'
res+='<td style="text-align:center;border:1px solid #000000">'+data[i].name+'</td>'
res+='<td style="text-align:center;border:1px solid #000000">'+data[i].number+'</td>'
res+='<td style="text-align:center;border:1px solid #000000">'+data[i].zhanbi+'</td></tr>'
}
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:#FFFFFF;font-size:27px;text-align: center;display:block;">'+title+'</span></div>'
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"; >';
res+='<thead style="font-size:18px;"><tr>';
res+='<td style="text-align:center;width:30%;">名称</td>';
res+='<td style="text-align:center;width:30%;">数量</td>'
res+='<td style="text-align:center;width:30%;">总占比</td>'
res+='</tr></thead>'
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.tableDataZhong.length;i++){
res+='<tr>'
res+='<td style="text-align:center;">'+this.tableDataZhong[i].name+'</td>'
res+='<td style="text-align:center;">'+this.tableDataZhong[i].number+'</td>'
res+='<td style="text-align:center;">'+this.tableDataZhong[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
res+='</tbody>'
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>'
res+='</table></div></div>'
return res
}
}

2
src/app/statistic-analysis/deleteUnit/delete-four/delete-four.component.scss

@ -4,7 +4,7 @@
position: relative;
#detailBox{
width: 100%;
height: 350px;
height: 550px;
position: absolute;
left: 50%;
top: 45%;

69
src/app/statistic-analysis/deleteUnit/delete-four/delete-four.component.ts

@ -4,7 +4,7 @@
* @Author: sueRimn
* @Date: 2020-09-02 16:22:58
* @LastEditors: sueRimn
* @LastEditTime: 2020-09-07 13:33:44
* @LastEditTime: 2020-09-10 09:17:32
*/
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@ -23,9 +23,22 @@ export class DeleteFourComponent implements OnInit {
constructor(public route: ActivatedRoute,public data: EchartsDataService,public snackBar: MatSnackBar,private adapter: DateAdapter<any>) { }
zhongNameData = ["浦东中队","黄埔中队","徐汇中队","长宁中队","静安中队","普陀中队","虹口中队","杨浦中队","闵行中队","宝山中队","嘉定中队"]
zhongNumData = [200,190,180,170,160,150,140,130,120,110,100]
tiaoshiPao:any
//气泡提示数据获取
bianli(){
var arrshuzu='[';
for(var i=0;i<this.zhongNumData.length;i++){
arrshuzu+='{"value":'+this.zhongNumData[i]+',"coord":['+i+','+this.zhongNumData[i]+'],"name":'+'"'+this.zhongNameData[i]+'"'+'},'
}
arrshuzu=arrshuzu.substring(0,arrshuzu.length-1)
arrshuzu+=']'
this.tiaoshiPao=JSON.parse(arrshuzu)
console.log(this.tiaoshiPao)
//return tishiPao
}
level:string;
ngOnInit(): void {
this.bianli()
this.route.queryParams.subscribe(param=>{
this.level=param.level
//console.log(this.level)
@ -41,22 +54,37 @@ export class DeleteFourComponent implements OnInit {
}
detailEcharts(level){
var detailPlanEchart = echarts.init(document.getElementById('detailBox'));
var detailPlanEchart = echarts.init(document.getElementById('detailBox'),'walden');
var option = {
title: {
text: level,
text: level+':总数(666)',
left: "center",
top:"0",
textStyle: {
fontSize: 28
fontSize: 30
}
},
xAxis: {
type: 'category',
data: this.zhongNameData,
axisLabel:{
textStyle:{
fontSize :18,
color:'#000000'
}
}
// axisLabel: this.axisLabel
},
yAxis: {
type: 'value'
type: 'value',
axisLabel:{
textStyle:{
fontSize :18,
color:'#000000'
}
}
},
tooltip: {
trigger: 'item',
@ -64,14 +92,17 @@ export class DeleteFourComponent implements OnInit {
console.log(666,params)
return this.tableTooltip(params)
},
backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度
borderWidth:'1',
borderRadius :'0'
position: this.data.tableTooltipNoShow2
},
series: [{
data: this.zhongNumData,
type: 'bar',
showBackground: true,
//showBackground: true,
markPoint: {
symbolSize:[65, 65],
data: this.tiaoshiPao
},
barWidth :'38',
backgroundStyle: {
color: 'rgba(220, 220, 220, 0.8)'
}
@ -85,19 +116,19 @@ export class DeleteFourComponent implements OnInit {
var data = [
{name:params.name,number:params.value,zhanbi:(params.value/1340 * 100).toFixed(2) + "%"}
]
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;">'+params.name+'</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>'
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:#FFFFFF;font-size:27px;text-align: center;display:block;">'+params.name+'</span></div>'
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"; >';
res+='<thead style="font-size:18px;"><tr>';
res+='<td style="text-align:center;width:30%;">名称</td>';
res+='<td style="text-align:center;width:30%;">数量</td>'
res+='<td style="text-align:center;width:30%;">总占比</td>'
res+='</tr></thead>'
res+='<tbody>';
for(var i=0;i<data.length;i++){
res+='<tr>'
res+='<td style="text-align:center;border:1px solid #000000">'+data[i].name+'</td>'
res+='<td style="text-align:center;border:1px solid #000000">'+data[i].number+'</td>'
res+='<td style="text-align:center;border:1px solid #000000">'+data[i].zhanbi+'</td></tr>'
res+='<td style="text-align:center;">'+data[i].name+'</td>'
res+='<td style="text-align:center;">'+data[i].number+'</td>'
res+='<td style="text-align:center;">'+data[i].zhanbi+'</td></tr>'
}
res+='</tbody>'

25
src/app/statistic-analysis/deleteUnit/delete-one/delete-one.component.ts

@ -1,5 +1,6 @@
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import {EchartsDataService,} from '../../echarts-data.service'
declare var echarts: any;
@Component({
@ -12,7 +13,7 @@ export class DeleteOneComponent implements OnInit {
indexBzt//echarts实例
constructor(private router: Router) { }
constructor(private router: Router,public echartsData:EchartsDataService) { }
ngOnInit() {
window.setTimeout(()=>{
@ -29,7 +30,7 @@ export class DeleteOneComponent implements OnInit {
//console.log(document.getElementById('indexBzt'))
var ec = echarts as any;
this.indexBzt = ec.init(document.getElementById('indexBzt'));
this.indexBzt = ec.init(document.getElementById('indexBzt'),'walden');
var options={
title: {
text: '删除单位统计(8900家)',
@ -41,14 +42,11 @@ export class DeleteOneComponent implements OnInit {
},
tooltip: {
trigger: 'item',
position: this.echartsData.tableTooltipNoShow2,
formatter: (params)=>{
return this.biaogeTishi(params.name)
} ,
backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度
borderWidth:'1',
borderRadius :'0'
//return this.biaogeTishi(params.name)
return this.echartsData.biaogeTishi(params.name)
}
},
legend: {
orient: 'vertical',
@ -57,9 +55,10 @@ export class DeleteOneComponent implements OnInit {
//padding:20,
// itemWidth:60,
// itemHeight:25,
/* textStyle:{
fontSize:28
}, */
textStyle:{
fontSize:18,
color:"#000000"
},
data: ['高层', '地下', '轨道交通', '化工生产', '储罐类', '厂房', '古建筑', '商市场', '医院', '学校', '宾馆', '娱乐场所', '餐饮业', '影剧院', '展览建筑', '隧道']
},
series: [
@ -70,7 +69,7 @@ export class DeleteOneComponent implements OnInit {
center: ['50%', '60%'],
label:{
show:true,
fontSize:13,
fontSize:16,
formatter:'{b}{c}家\n{d|({d}%)}',
rich: {
d: {

17
src/app/statistic-analysis/deleteUnit/delete-there-line-details/delete-there-line-details.component.scss

@ -1,11 +1,11 @@
.box{
width: 100%;
height: 92%;
height: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
position: relative;
.echartsbox{
/* .echartsbox{
width: 100%;
height: 100%;
overflow: auto;
@ -14,7 +14,7 @@
width: 50%;
height: 420px;
margin: 50px auto;
}
} */
}
.publicCss{
height: 350px;
@ -64,13 +64,14 @@
.echartsbox{
width: 100%;
height: 100%;
overflow: auto;
position: relative;
// overflow: auto;
#barEchart{
width: 60%;
height: 350px;
width: 80%;
height: 50%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
top: 45%;
transform: translate(-50%,-60%);
}
}

51
src/app/statistic-analysis/deleteUnit/delete-there-line-details/delete-there-line-details.component.ts

@ -21,6 +21,7 @@ export class DeleteThereLineDetailsComponent implements OnInit {
setTimeoutObj//延时器需要清除
ngOnInit(): void {
this.dateInit ()
this.bianli()
this.route.queryParams.subscribe(params => {
this.year = params['level'];
this.buildingTypeName = params['headtext'];
@ -71,7 +72,19 @@ export class DeleteThereLineDetailsComponent implements OnInit {
zhiNameData = ["浦东支队","黄埔支队","徐汇支队","长宁支队","静安支队","普陀支队","虹口支队","杨浦支队","闵行支队","宝山支队","嘉定支队"]
zhiNumData = [300,290,280,270,260,250,240,230,220,210,200]
tiaoshiPao:any
//气泡提示数据获取
bianli(){
var arrshuzu='[';
for(var i=0;i<this.dateNum.length;i++){
arrshuzu+='{"value":'+this.dateNum[i]+',"coord":['+i+','+this.dateNum[i]+'],"name":'+'"'+this.date[i]+'"'+'},'
}
arrshuzu=arrshuzu.substring(0,arrshuzu.length-1)
arrshuzu+=']'
this.tiaoshiPao=JSON.parse(arrshuzu)
console.log(this.tiaoshiPao)
//return tishiPao
}
detailPlanEchart
option
@ -95,14 +108,12 @@ export class DeleteThereLineDetailsComponent implements OnInit {
textStyle:{
//文字颜色
color:'#000',
fontSize: 30
}
},
//提示框
tooltip: {
trigger: 'axis',
backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度
borderWidth:'1',
borderRadius :'0',
formatter: (params)=>{
if(params[0].seriesName == "year"){
return this.serviceData.tableTooltip(this.serviceData.monthTooltip,params[0].name)
@ -118,6 +129,10 @@ export class DeleteThereLineDetailsComponent implements OnInit {
data: this.date,
axisLabel: {
color: "#000", //刻度线标签颜色
textStyle:{
fontSize :15,
color:'#000000'
}
},
//设置坐标轴字体颜色和宽度
axisLine: {
@ -137,7 +152,11 @@ export class DeleteThereLineDetailsComponent implements OnInit {
type: 'value',
name: '个',
axisLabel: {
color: "#000" //刻度线标签颜色
//color: "#000", //刻度线标签颜色
textStyle:{
fontSize :15,
color:'#000000'
}
},
//设置坐标轴字体颜色和宽度
axisLine: {
@ -150,6 +169,10 @@ export class DeleteThereLineDetailsComponent implements OnInit {
series: [{
name: 'xxx',
type: 'line',
markPoint: {
symbolSize:[65, 65],
data: this.tiaoshiPao
},
data: this.dateNum,
}
],
@ -173,19 +196,19 @@ export class DeleteThereLineDetailsComponent implements OnInit {
var data = [
{name:params.name,number:params.value,zhanbi:(params.value/1340 * 100).toFixed(2) + "%"}
]
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;">'+params.name+'</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>'
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:#FFFFFF;font-size:27px;text-align: center;display:block;">'+params.name+'</span></div>'
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"; >';
res+='<thead style="font-size:18px;"><tr>';
res+='<td style="text-align:center;width:30%;">名称</td>';
res+='<td style="text-align:center;width:30%;">数量</td>'
res+='<td style="text-align:center;width:30%;">总占比</td>'
res+='</tr></thead>'
res+='<tbody>';
for(var i=0;i<data.length;i++){
res+='<tr>'
res+='<td style="text-align:center;border:1px solid #000000">'+data[i].name+'</td>'
res+='<td style="text-align:center;border:1px solid #000000">'+data[i].number+'</td>'
res+='<td style="text-align:center;border:1px solid #000000">'+data[i].zhanbi+'</td></tr>'
res+='<td style="text-align:center;">'+data[i].name+'</td>'
res+='<td style="text-align:center;">'+data[i].number+'</td>'
res+='<td style="text-align:center;">'+data[i].zhanbi+'</td></tr>'
}
res+='</tbody>'

2
src/app/statistic-analysis/deleteUnit/delete-there/delete-there.component.scss

@ -67,7 +67,7 @@
overflow: auto;
#zhidui{
width: 100%;
height: 350px;
height: 550px;
position: absolute;
left: 50%;
top: 50%;

175
src/app/statistic-analysis/deleteUnit/delete-there/delete-there.component.ts

@ -4,7 +4,7 @@
* @Author: sueRimn
* @Date: 2020-09-02 16:22:35
* @LastEditors: sueRimn
* @LastEditTime: 2020-09-07 13:33:00
* @LastEditTime: 2020-09-10 09:16:42
*/
import { Component, OnInit } from '@angular/core';
import { Router,ActivatedRoute } from '@angular/router';
@ -26,22 +26,24 @@ export class DeleteThereComponent implements OnInit {
time:String
buildingTypeName:String
setTimeoutObj//延时器需要清除
headtext:string;
ngOnDestroy():void{
this.zhutu.clear()
this.zhutu.dispose()
}
ngOnInit(): void {
this.bianli();
this.dateInit();
let headtext:string;
//let headtext:string;
let datayuex:string;
let headName:string;
console.log(this.activatedRoute.queryParams.subscribe)
//headtext=this.activatedRoute.queryParams["headtext"];
this.activatedRoute.queryParams.subscribe(param=>{
headtext=param.headtext
this.headtext=param.headtext
datayuex=param.level
headName=headtext+''+datayuex;
headName=this.headtext+''+datayuex;
//console.log(headName)
});
window.setTimeout(()=>{
@ -84,6 +86,19 @@ export class DeleteThereComponent implements OnInit {
}//柱状图数值顶部显示
zhiNameData = ["浦东支队","黄埔支队","徐汇支队","长宁支队","静安支队","普陀支队","虹口支队","杨浦支队","闵行支队","宝山支队","嘉定支队","松江支队","金山支队","崇明支队"]
zhiNumData = [200,190,180,170,160,150,140,130,120,110,100,90,80,70]
tiaoshiPao:any
//气泡提示数据获取
bianli(){
var arrshuzu='[';
for(var i=0;i<this.zhiNumData.length;i++){
arrshuzu+='{"value":'+this.zhiNumData[i]+',"coord":['+i+','+this.zhiNumData[i]+'],"name":'+'"'+this.zhiNameData[i]+'"'+'},'
}
arrshuzu=arrshuzu.substring(0,arrshuzu.length-1)
arrshuzu+=']'
this.tiaoshiPao=JSON.parse(arrshuzu)
console.log(this.tiaoshiPao)
//return tishiPao
}
date = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月','九月']
dateNum = [270, 253, 244, 199, 189, 173, 160, 198,200]
//返回
@ -120,14 +135,14 @@ export class DeleteThereComponent implements OnInit {
/* 柱状图 */
zhuzhuangtu(headName:string){
var ec = echarts as any;
this.zhutu = ec.init(document.getElementById('zhidui'));
this.zhutu = ec.init(document.getElementById('zhidui'),'walden');
this.option = {
title: {
text: `${headName}`,
text: `${headName}`+':总数(666)',
left: "center",
top: "15",
top: "0",
textStyle: {
fontSize: 23
fontSize: 30
}
},
/* grid: {
@ -137,28 +152,47 @@ export class DeleteThereComponent implements OnInit {
xAxis: {
type: 'category',
data: this.zhiNameData,
axisLabel: this.axisLabel
//axisLabel: this.axisLabel,
axisLabel:{
//this.axisLabel,
textStyle:{
fontSize :18,
color:'#000000'
}
}
},
yAxis: {
type: 'value'
type: 'value',
axisLabel:{
textStyle:{
fontSize :18,
color:'#000000'
}
}
},
tooltip: {
trigger: 'item',
formatter: (params)=>{
return this.tableTooltip2(params.name)
return this.echartsData.biaogeTishi(params.name)
},
backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度
position: this.echartsData.tableTooltipNoShow2
/* backgroundColor:'rgba(255,255,255,1)',
borderWidth:'1',
borderRadius :'0'
borderRadius :'0' */
},
series: [{
data: this.zhiNumData,
type: 'bar',
showBackground: true,
markPoint: {
symbolSize:[65, 65],
data: this.tiaoshiPao
},
backgroundStyle: {
color: 'rgba(220, 220, 220, 0.8)'
},
barWidth :'58',
barWidth :'38',
//label: this.topTextlabel
}]
};
@ -168,7 +202,7 @@ export class DeleteThereComponent implements OnInit {
if (this.zhutu.containPixel('grid',pointInPixel)) {
let xIndex=this.zhutu.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0];
/*事件处理代码书写位置*/
this.router.navigate(['/statisticanalysis/delete_one/delete_four'],{queryParams:{'level':this.option.xAxis.data[xIndex]}});
this.router.navigate(['/statisticanalysis/delete_one/delete_four'],{queryParams:{'level':this.option.xAxis.data[xIndex]+this.headtext}});
}
});
/* this.zhutu.on('click', (params) => {
@ -179,94 +213,6 @@ export class DeleteThereComponent implements OnInit {
this.zhutu.setOption(this.option);
}
/*折线图 */
detailEcharts(headName:string){
this.zhutu = echarts.init(document.getElementById('zhidui'), 'skinUpp');
this.option = {
grid: {
top: 50,
left:40,
right: 20,
bottom: 20,
},
// 标题
title: {
text: `${headName}`,
top: -4,
left: 'center',
textStyle:{
//文字颜色
color:'#000',
}
},
//提示框
tooltip: {
trigger: 'axis',
backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度
borderWidth:'1',
borderRadius :'0',
formatter: (params)=>{
/* if(params[0].seriesName == "year"){
return this.serviceData.tableTooltip(this.serviceData.monthTooltip,params[0].name)
}else{
return this.serviceData.tableTooltip(this.serviceData.tableDataZhi,params[0].name)
} */
},
// position:this.serviceData.tableTooltipNoShow2
},
// x轴
xAxis: {
type: 'category',
data: this.date,
axisLabel: {
color: "#000", //刻度线标签颜色
},
//设置坐标轴字体颜色和宽度
axisLine: {
lineStyle: {
color: "#000",
},
},
splitLine: {//分割线配置
show:true,
lineStyle: {
color: '#999',
}
}
},
// y轴
yAxis: {
type: 'value',
name: '个',
axisLabel: {
color: "#000" //刻度线标签颜色
},
//设置坐标轴字体颜色和宽度
axisLine: {
lineStyle: {
color: "#000",
}
}
},
// 数据
series: [{
name: 'xxx',
type: 'line',
data: this.dateNum,
}
],
};
this.zhutu.setOption(this.option);
this.zhutu.getZr().on('click',params=>{
const pointInPixel= [params.offsetX, params.offsetY];
if (this.zhutu.containPixel('grid',pointInPixel)) {
let xIndex=this.zhutu.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0];
/*事件处理代码书写位置*/
this.router.navigate(['/statisticanalysis/addUnit_one/addUnit_two_time/three_barDetails'],{queryParams:{'level':'zhidui','time':this.option.xAxis.data[xIndex],'buildingTpye':this.buildingTypeName}});
}
});
}
/* 鼠标悬停提示 */
tableTooltip2(biaotou:string){
var shuju='[{"name":"浦东中队","number":"156","zhanbi":"3%"},{"name":"黄埔中队","number":"144","zhanbi":"2.8%"},'
@ -278,23 +224,24 @@ export class DeleteThereComponent implements OnInit {
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>'
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:#FFFFFF;font-size:27px;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;font-size:16px; color:#FFFFFF;border-collapse:collapse;"cellspacing="0"; >';
res+='<thead style="font-size:18px;"><tr>';
res+='<td style="text-align:center;width:30%;">名称</td>';
res+='<td style="text-align:center;width:30%;">数量</td>'
res+='<td style="text-align:center;width:30%;">总占比</td>'
res+='</tr></thead>'
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<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+='<td style="text-align:center;">'+jsonObj[i].name+'</td>'
res+='<td style="text-align:center;">'+jsonObj[i].number+'</td>'
res+='<td style="text-align:center;">'+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+='<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>'
res+='</table></div></div>'
return res
}

60
src/app/statistic-analysis/deleteUnit/delete-two/delete-two.component.html

@ -4,12 +4,10 @@
* @Author: sueRimn
* @Date: 2020-09-02 16:21:18
* @LastEditors: sueRimn
* @LastEditTime: 2020-09-07 15:57:47
* @LastEditTime: 2020-09-08 15:18:57
-->
<body>
<div class="box">
<div class="header">
<div class="queryField" *ngIf=" echartsData.statefulInspectionToggle">
<mat-radio-group [(ngModel)]="selectType">
<mat-radio-button value="month" (click)='monthClick()'></mat-radio-button>
@ -71,48 +69,20 @@
</div> -->
</div>
<div style="overflow-y:auto;height: 83%;margin-top: 70px;">
<div class="heads" id="heads"></div>
<section class="mainbox">
<div class="column">
<div class="panel bar" id="leftOne">
<div class="chart"></div>
<div class="panel-footer"></div>
</div>
<div class="panel line" id="leftTwo">
<div class="chart"></div>
<div class="panel-footer"></div>
</div>
<div class="panel pie" id="leftThere">
<div class="chart"></div>
<div class="panel-footer"></div>
</div>
<div class="panel four" id="leftFour">
<div class="chart"></div>
<div class="panel-footer"></div>
</div>
<div class="echartsbox">
<div id="Line">
</div>
<div class="column">
<div class="panel bar1" id="rightOne">
<div class="chart"></div>
<div class="panel-footer"></div>
</div>
<div class="panel line1" id="rightTwo">
<div class="chart"></div>
<div class="panel-footer"></div>
</div>
<div class="panel pie1" id="rightThree">
<div class="chart"></div>
<div class="panel-footer"></div>
</div>
<div class="panel four1" id="rightFour">
<div class="chart"></div>
<div class="panel-footer"></div>
</div>
<div>
<div class="publicCss" id="leftOne"></div>
<div class="publicCss" id="leftTwo"></div>
<div class="publicCss" id="leftThere"></div>
<div class="publicCss" id="leftFour"></div>
<div class="publicCss" id="rightOne"></div>
<div class="publicCss" id="rightTwo"></div>
<div class="publicCss" id="rightThree"></div>
<div class="publicCss" id="rightFour"></div>
</div>
</section>
</div>
</div>
<div style="padding-top: 150px; height: 50px; width: 100%;"></div>
</body>

117
src/app/statistic-analysis/deleteUnit/delete-two/delete-two.component.scss

@ -1,15 +1,36 @@
body{
.box{
width: 100%;
height: 92%;
display: flex;
flex-direction: column;
overflow: hidden;
position: relative;
.echartsbox{
width: 100%;
height: 100%;
overflow: auto;
}
#Line{
width: 50%;
height: 420px;
margin: 50px auto;
}
}
.publicCss{
height: 350px;
width: 50%;
display: inline-block;
box-sizing: border-box;
padding: 20px;
}
//头部搜索栏
.header {
width: 90%;
position: fixed ;
border-bottom: 1px solid #999;
height: 68px;
//min-height: 81px;
height: 80px;
min-height: 81px;;
box-sizing: border-box;
// padding: 0 15px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
@ -26,87 +47,7 @@ body{
}
}
/* 最上面的折线图 */
.heads{
text-align:center;
margin:0 auto;
width: 800px;
height: 450px;
//padding-top: 150px;
margin-top: 50px;
.selectedBtn{
background-color: #2196f3;
color: white;
}
/* 其余折线图 */
.mainbox {
margin-top: 80px;
//padding-top: 50px;
padding-bottom: 50px;
min-width: 1024px;
max-width: 1920px;
padding: 0.125rem 0.125rem 0;
display: flex;
.column {
flex: 2;
}
}
.panel {
position: relative;
height: 330px;
width:780px;
//border: 1px solid rgba(25, 186, 139, 0.17);
padding: 0 0.1875rem 0.5rem;
margin-bottom: 0.1875rem;
margin-top: 80px;
&::before {
position: absolute;
top: 0;
left: 0;
content: "";
width: 10px;
height: 10px;
border-top: 2px ;
border-left: 2px ;
}
&::after {
position: absolute;
top: 0;
right: 0;
content: "";
width: 10px;
height: 10px;
border-top: 2px ;
border-right: 2px ;
}
.panel-footer {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
&::before {
position: absolute;
bottom: 0;
left: 0;
content: "";
width: 10px;
height: 10px;
border-bottom: 2px ;
border-left: 2px ;
}
&::after {
position: absolute;
bottom: 0;
right: 0;
content: "";
width: 10px;
height: 10px;
border-bottom: 2px ;
border-right: 2px ;
}
}
.chart {
height: 3rem;
}
}

63
src/app/statistic-analysis/deleteUnit/delete-two/delete-two.component.ts

@ -4,7 +4,7 @@
* @Author: sueRimn
* @Date: 2020-09-02 16:21:18
* @LastEditors: sueRimn
* @LastEditTime: 2020-09-07 11:31:41
* @LastEditTime: 2020-09-09 11:11:46
*/
import { Component, OnInit, ViewChild } from '@angular/core';
import { Router } from '@angular/router';
@ -32,10 +32,10 @@ export class DeleteTwoComponent implements OnInit {
ngOnInit(): void {
this.dateInit()
this.bianli()
window.setTimeout(()=>{
this.headZhexian('heads','删除数量总统计',this.datayuex,this.datayuey)
this.headZhexian('Line','删除数量总统计',this.datayuex,this.datayuey)
this.headZhexian('leftOne','高层',this.datayuex,this.datayuey)
this.headZhexian('leftTwo','轨道交通',this.datayuex,this.datayuey)
this.headZhexian('leftThere','储罐类',this.datayuex,this.datayuey)
@ -67,6 +67,22 @@ export class DeleteTwoComponent implements OnInit {
selectType:string = 'month'; //选择当前的 查询类型 按月/年
headZx//echarts实例
zhiNameData = ["浦东支队","黄埔支队","徐汇支队","长宁支队","静安支队","普陀支队","虹口支队","杨浦支队","闵行支队","宝山支队","嘉定支队","松江支队","金山支队","崇明支队"]
zhiNumData = [200,190,180,170,160,150,140,130,120,110,100,90,80,70]
tiaoshiPao:any
//气泡提示数据获取
bianli(){
var arrshuzu='[';
for(var i=0;i<this.datayuey.length;i++){
arrshuzu+='{"value":'+this.datayuey[i]+',"coord":['+i+','+this.datayuey[i]+'],"name":'+'"'+this.datayuex[i]+'"'+'},'
}
arrshuzu=arrshuzu.substring(0,arrshuzu.length-1)
arrshuzu+=']'
this.tiaoshiPao=JSON.parse(arrshuzu)
console.log(this.tiaoshiPao)
//return tishiPao
}
//查询数据
years:any = []
selectMonth:any = [1,2,3,4,5,6,7,8,9,10,11,12]
@ -85,7 +101,7 @@ export class DeleteTwoComponent implements OnInit {
selectEndMonth:any = (new Date()).getMonth()+1 //结束月份
//点击月
monthClick(){
this.headZhexian('heads','删除数量总统计',this.datayuex,this.datayuey)
this.headZhexian('Line','删除数量总统计',this.datayuex,this.datayuey)
this.headZhexian('leftOne','高层',this.datayuex,this.datayuey)
this.headZhexian('leftTwo','轨道交通',this.datayuex,this.datayuey)
this.headZhexian('leftThere','储罐类',this.datayuex,this.datayuey)
@ -97,7 +113,7 @@ export class DeleteTwoComponent implements OnInit {
}
//按月查询
monthSubmit (e) {
this.headZhexian('heads','删除数量总统计',this.datayuex,this.datayuey)
this.headZhexian('Line','删除数量总统计',this.datayuex,this.datayuey)
this.headZhexian('leftOne','高层',this.datayuex,this.datayuey)
this.headZhexian('leftTwo','轨道交通',this.datayuex,this.datayuey)
this.headZhexian('leftThere','储罐类',this.datayuex,this.datayuey)
@ -137,7 +153,7 @@ export class DeleteTwoComponent implements OnInit {
selectEndYear:any = (new Date()).getFullYear() //结束年份
//点击年
yearClick(){
this.headZhexian('heads','删除数量总统计',this.datanianx,this.dataniany)
this.headZhexian('Line','删除数量总统计',this.datanianx,this.dataniany)
this.headZhexian('leftOne','高层',this.datanianx,this.dataniany)
this.headZhexian('leftTwo','轨道交通',this.datanianx,this.dataniany)
this.headZhexian('leftThere','储罐类',this.datanianx,this.dataniany)
@ -150,7 +166,7 @@ export class DeleteTwoComponent implements OnInit {
//按年查询
yearSubmit (e) {
console.log(this.selectType)
this.headZhexian('heads','删除数量总统计',this.datanianx,this.dataniany)
this.headZhexian('Line','删除数量总统计',this.datanianx,this.dataniany)
this.headZhexian('leftOne','高层',this.datanianx,this.dataniany)
this.headZhexian('leftTwo','轨道交通',this.datanianx,this.dataniany)
this.headZhexian('leftThere','储罐类',this.datanianx,this.dataniany)
@ -208,12 +224,12 @@ export class DeleteTwoComponent implements OnInit {
tooltip: {
trigger: 'axis',
formatter: (params)=>{
return this.biaogeTishi(`${headtext}`)
return this.echartsData.biaogeTishiZhi(`${headtext}`)
},
backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度
/* backgroundColor:'rgba(255,255,255,1)',//rgba调节背景颜色与透明度
borderWidth:'1',
borderRadius :'0',
position: this.echartsData.tableTooltipNoShow
borderRadius :'0', */
position: this.echartsData.tableTooltipNoShow2
},
xAxis: {
type: 'category',
@ -250,27 +266,12 @@ export class DeleteTwoComponent implements OnInit {
series: [{
data: datayuey,
type: 'line',
markPoint: {
symbolSize:[65, 65],
data: this.tiaoshiPao
},
clickable:false,
/* lineStyle:{
color:'#1369bf'
}, */
/* markLine: {
symbol: ['none', 'none'],
label: {show: false},
lineStyle:{
color:'#9A9A9A',
type:'solid',
},
data: [
{xAxis: 1},
{xAxis: 2},
{xAxis: 3},
{xAxis: 4},
{xAxis: 5},
{xAxis: 6},
{xAxis: 7}
]
}, */
}]
};
this.headZx.getZr().on('click', (params) => {

110
src/app/statistic-analysis/echarts-data.service.ts

@ -36,8 +36,8 @@ export class EchartsDataService {
{name:"嘉定支队",number:"78",zhanbi:"0.6%"},
{name:"松江支队",number:"75",zhanbi:"0.5%"},
{name:"金山支队",number:"65",zhanbi:"0.4%"},
{name:"崇明支队",number:"55",zhanbi:"0.3%"},
{name:"总计",number:"1356",zhanbi:"19%"}
{name:"崇明支队",number:"55",zhanbi:"0.3%"}/* ,
{name:"总计",number:"1356",zhanbi:"19%"} */
]
//中队提示框
tableDataZhong = [
@ -56,8 +56,8 @@ export class EchartsDataService {
{name:"嘉定中队",number:"78",zhanbi:"0.6%"},
{name:"松江中队",number:"75",zhanbi:"0.5%"},
{name:"金山中队",number:"65",zhanbi:"0.4%"},
{name:"崇明中队",number:"55",zhanbi:"0.3%"},
{name:"总计",number:"1356",zhanbi:"19%"}
{name:"崇明中队",number:"55",zhanbi:"0.3%"}/* ,
{name:"总计",number:"1356",zhanbi:"19%"} */
]
//建筑类型提示框
buildingType = [
@ -76,8 +76,8 @@ export class EchartsDataService {
{name:"餐饮业",number:"78",zhanbi:"0.6%"},
{name:"影剧院",number:"75",zhanbi:"0.5%"},
{name:"展览建筑",number:"65",zhanbi:"0.4%"},
{name:"隧道",number:"55",zhanbi:"0.3%"},
{name:"总计",number:"1356",zhanbi:"19%"}
{name:"隧道",number:"55",zhanbi:"0.3%"}/* ,
{name:"总计",number:"1356",zhanbi:"19%"} */
]
//月份提示框
monthTooltip = [
@ -101,29 +101,30 @@ export class EchartsDataService {
{name:"预案审核通过",number:"144",zhanbi:"21%"},
{name:"预案编制",number:"133",zhanbi:"20%"},
{name:"预案审核退回",number:"122",zhanbi:"17%"},
{name:"预案审核中",number:"120",zhanbi:"23%"},
{name:"总计",number:"561",zhanbi:"100%"},
{name:"预案审核中",number:"120",zhanbi:"23%"}/* ,
{name:"总计",number:"561",zhanbi:"100%"}, */
]
//提示框表格
tableTooltip(dataArr,title:string){
let data = dataArr
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:26px;text-align: center;display:block;">'+title+'</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"; >';
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:#FFFFFF;font-size:26px;text-align: center;display:block;">'+title+'</span></div>'
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"; >';
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+='<td style="text-align:center;width:30%;">名称</td>';
res+='<td style="text-align:center;width:30%;">数量</td>'
res+='<td style="text-align:center;width:30%;">总占比</td>'
res+='</tr></thead>'
res+='<tbody>';
for(var i=0;i<data.length;i++){
res+='<tr>'
res+='<td style="text-align:center;border:1px solid #000000">'+data[i].name+'</td>'
res+='<td style="text-align:center;border:1px solid #000000">'+data[i].number+'</td>'
res+='<td style="text-align:center;border:1px solid #000000">'+data[i].zhanbi+'</td></tr>'
res+='<td style="text-align:center;">'+data[i].name+'</td>'
res+='<td style="text-align:center;">'+data[i].number+'</td>'
res+='<td style="text-align:center;">'+data[i].zhanbi+'</td></tr>'
}
res+='</tbody>'
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>'
res+='</table></div></div>'
return res
}
@ -215,7 +216,84 @@ export class EchartsDataService {
// },
// position:this.serviceData.tableTooltipNoShow
// }
/**
* @name:
* @test: test font
* @msg:
* @param {string()}
* @return {type}
*/
biaogeTishi(biaotou:string){
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:#FFFFFF;font-size:27px;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;font-size:16px; color:#FFFFFF;border-collapse:collapse;"cellspacing="0"; >';
res+='<thead style="font-size:18px;"><tr>';
res+='<td style="text-align:center;width:30%;">名称</td>';
res+='<td style="text-align:center;width:30%;">数量</td>'
res+='<td style="text-align:center;width:30%;">总占比</td>'
res+='</tr></thead>'
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.tableDataZhong.length;i++){
res+='<tr>'
res+='<td style="text-align:center;">'+this.tableDataZhong[i].name+'</td>'
res+='<td style="text-align:center;">'+this.tableDataZhong[i].number+'</td>'
res+='<td style="text-align:center;">'+this.tableDataZhong[i].zhanbi+'</td></tr>'
}
res+='</tbody>'
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>'
res+='</table></div></div>'
return res
}
/**
* @name:
* @test: test font
* @msg:
* @param {string()}
* @return {type}
*/
biaogeTishiZhi(biaotou:string){
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:#FFFFFF;font-size:27px;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;font-size:16px; color:#FFFFFF;border-collapse:collapse;"cellspacing="0"; >';
res+='<thead style="font-size:18px;"><tr>';
res+='<td style="text-align:center;width:30%;">名称</td>';
res+='<td style="text-align:center;width:30%;">数量</td>'
res+='<td style="text-align:center;width:30%;">总占比</td>'
res+='</tr></thead>'
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.tableDataZhi.length;i++){
res+='<tr>'
res+='<td style="text-align:center;">'+this.tableDataZhi[i].name+'</td>'
res+='<td style="text-align:center;">'+this.tableDataZhi[i].number+'</td>'
res+='<td style="text-align:center;">'+this.tableDataZhi[i].zhanbi+'</td></tr>'
}
res+='</tbody>'
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>'
res+='</table></div></div>'
return res
}
zhiNameData = ["浦东支队","黄埔支队","徐汇支队","长宁支队","静安支队","普陀支队","虹口支队","杨浦支队","闵行支队","宝山支队","嘉定支队","松江支队","金山支队","崇明支队"]
zhiNumData = [200,190,180,170,160,150,140,130,120,110,100,90,80,70]
tiaoshiPao:any;
arrshuzu='[';
/**
* @name:
* @test: test font
* @msg:
* @param {}
* @return {type}
*/
qipao():any{
for(var i=0;i<this.zhiNumData.length;i++){
this.arrshuzu+='{"value":'+this.zhiNumData[i]+',"coord":['+i+','+this.zhiNumData[i]+'],"name":'+'"'+this.zhiNameData[i]+'"'+'},'
}
this.arrshuzu=this.arrshuzu.substring(0,this.arrshuzu.length-1)
this.arrshuzu+=']'
this.tiaoshiPao=JSON.parse(this.arrshuzu)
console.log(this.tiaoshiPao)
return 't'
}
}

7
src/app/statistic-analysis/home/home.component.ts

@ -293,6 +293,7 @@ export class HomeComponent implements OnInit {
center: ['50%', '67%'],
label:{
show:true,
//fontSize:10,
formatter:'{b}\n{d|{c}份}',
rich: {
d: {
@ -363,7 +364,7 @@ export class HomeComponent implements OnInit {
};
//预案状态统计
unitType () {
this.planState = echarts.init(document.getElementById('chartHynyxf'), 'skinUpp');
this.planState = echarts.init(document.getElementById('chartHynyxf'), 'walden');
this.planState.setOption(this.planStateOptionsZhi);
this.planState.on("click",(params) => {
this.router.navigate(['/statisticanalysis/statePageOne'])
@ -615,7 +616,7 @@ export class HomeComponent implements OnInit {
],
};
unitData () {
this.chartDwsjcj = echarts.init(document.getElementById('chartDwsjcj'), 'skinUpp');
this.chartDwsjcj = echarts.init(document.getElementById('chartDwsjcj'), 'walden');
this.chartDwsjcj.setOption(this.chartDwsjcjOptionsZhi);
this.chartDwsjcj.on("click",(params) => {
if(params.seriesName == "新增单位"){
@ -755,7 +756,7 @@ export class HomeComponent implements OnInit {
};
//建筑类型统计
keyUnit () {
this.chartZdgzqy = echarts.init(document.getElementById('chartZdgzqy'), 'skinUpp');
this.chartZdgzqy = echarts.init(document.getElementById('chartZdgzqy'), 'walden');
this.chartZdgzqy.setOption(this.chartZdgzqyOptionsZhi);
this.chartZdgzqy.on("click",(params) => {

12
src/app/statistic-analysis/scheduled-updates/publicEcharts.html

@ -1,3 +1,11 @@
<!--
* @Descripttion:
* @version:
* @Author: sueRimn
* @Date: 2020-09-05 08:59:24
* @LastEditors: sueRimn
* @LastEditTime: 2020-09-10 10:20:45
-->
<div class="content">
<div class="header">
@ -10,8 +18,8 @@
<div class="fixedCss">
<button mat-raised-button (click)='goBack()' *ngIf="!echartsData.scheduledUpdatesToggle">返回</button>
<button mat-raised-button (click)='verified()' [ngClass]="{'selectButton': isToggle}" style="margin:0 10px;" >已核查</button>
<button mat-raised-button (click)='notVerified()' [ngClass]="{'selectButton': !isToggle}">未核查</button>
<button mat-raised-button (click)='verified()' [ngClass]="{'selectButton': isToggle}" style="margin:0 10px;" *ngIf="echartsData.scheduledUpdatesToggle">已核查</button>
<button mat-raised-button (click)='notVerified()' [ngClass]="{'selectButton': !isToggle}" *ngIf="echartsData.scheduledUpdatesToggle">未核查</button>
</div>
</div>

95
src/app/statistic-analysis/scheduled-updates/scheduled-updates.component.ts

@ -27,7 +27,7 @@ export class ScheduledUpdatesComponent implements OnInit {
example:any;
/* 首页饼状图 */
initCharts(){
this.example= echarts.init(document.getElementById('center'));
this.example= echarts.init(document.getElementById('center'),'walden');
var options={
title: {
text: '计划更新统计(7100家)',
@ -39,13 +39,10 @@ export class ScheduledUpdatesComponent implements OnInit {
},
tooltip: {
trigger: 'item',
backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度
borderWidth:'1',
borderRadius :'0',
formatter: (params)=>{
return this.echartsData.tableTooltip(this.echartsData.tableDataZhi,params.name)
return this.echartsData.biaogeTishiZhi(params.name)
},
position:this.echartsData.tableTooltipNoShow
position:this.echartsData.tableTooltipNoShow2
},
legend: {
orient: 'vertical',
@ -53,9 +50,10 @@ export class ScheduledUpdatesComponent implements OnInit {
top:80,
// itemWidth:60,
// itemHeight:25,
// textStyle:{
// fontSize:28
// },
textStyle:{
fontSize:18,
color:"#000000"
},
data: ['已核查无需修改', '已核查修改中', '已核查提交审核', '未核查']
},
series: [{
@ -67,7 +65,7 @@ export class ScheduledUpdatesComponent implements OnInit {
normal:{
show:true,
// position: 'inner',
// fontSize:18,
fontSize:18,
formatter:'{b} {c}家\n{d|({d}%)}',
rich: {
d: {
@ -171,7 +169,7 @@ export class verifiedComponent implements OnInit {
oneEcharts:any;
oneInit () {
this.oneEcharts = echarts.init(document.getElementById('center'), 'skinUpp');
this.oneEcharts = echarts.init(document.getElementById('center'),'walden');
var option = {
grid: {
top: 50,
@ -187,15 +185,15 @@ export class verifiedComponent implements OnInit {
textStyle:{
//文字颜色
color:'#000',
fontSize: 22,
fontSize: 32,
}
},
//提示框
tooltip: {
trigger: 'axis',
backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度
/* backgroundColor:'rgba(255,255,255,1)',//rgba调节背景颜色与透明度
borderWidth:'1',
borderRadius :'0',
borderRadius :'0', */
formatter: (params)=>{
return this.echartsData.tableTooltip(this.echartsData.tableDataZhi,params[0].name)
},
@ -206,8 +204,12 @@ export class verifiedComponent implements OnInit {
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月','9月','10月','11月','12月'],
boundaryGap: false,
axisLabel: {
color: "#000", //刻度线标签颜色
axisLabel:{
textStyle:{
fontSize :15,
color:'#000000'
}
},
//设置坐标轴字体颜色和宽度
axisLine: {
@ -226,6 +228,7 @@ export class verifiedComponent implements OnInit {
yAxis: {
type: 'value',
axisLabel: {
fontSize :13,
color: "#000" //刻度线标签颜色
},
//设置坐标轴字体颜色和宽度
@ -260,7 +263,7 @@ export class verifiedComponent implements OnInit {
left: 'center',
textStyle:{
color:'#000',
fontSize: 18,
fontSize: 30,
}
},
//提示框
@ -269,10 +272,14 @@ export class verifiedComponent implements OnInit {
},
legend: {
data: ['平均值','平均值2倍','平均值3倍', '已核查无需修改', '已核查修改中', '已核查提交审核'],
textStyle: { color: '#000' }
textStyle: { fontSize :15,color: '#000' }
},
xAxis: [{
axisLabel: {
textStyle:{
fontSize :18,
color:'#000000'
},
color: "#000", //刻度线标签颜色
},
//设置坐标轴字体颜色和宽度
@ -287,10 +294,16 @@ export class verifiedComponent implements OnInit {
{
//设置坐标轴字体颜色和宽度
axisLine: {
lineStyle: {color: "#000"},
lineStyle:{
color:'#000000'
}
},
type: 'value',
axisLabel: {
textStyle:{
fontSize :18,
color:'#000000'
},
color: "#000", //刻度线标签颜色
formatter: '{value}'
}
@ -314,20 +327,21 @@ export class verifiedComponent implements OnInit {
type: 'bar',
stack: '总数',
data: [68, 56, 69, 57, 43, 79, 78, 66, 49, 34, 49, 78, 45],
barWidth :'38',
},
{
name: '已核查修改中',
type: 'bar',
stack: '总数',
data: [39, 43, 49, 27, 53, 29, 38, 49, 29, 40, 40, 27, 54],
itemStyle:{color: '#DC143C'}
data: [39, 3, 4, 7, 3, 2, 3, 4, 29, 40, 40, 2, 4],
itemStyle:{color: '#626c91'}
},
{
name: '已核查提交审核',
type: 'bar',
stack: '总数',
data: [48, 42, 43, 53, 47, 39, 25, 26, 54, 34, 39, 24, 14],
itemStyle:{color:'#00BB00'}
data: [48, 2, 3, 3, 4, 3, 2, 26, 4, 3, 3, 24, 14],
itemStyle:{color:'#c4ebad'}
},
{
name: '平均值',
@ -341,7 +355,7 @@ export class verifiedComponent implements OnInit {
type: 'line',
// yAxisIndex: 1,
data: [98, 90, 106, 94, 98, 86, 96, 82, 76, 78, 82, 86, 74],
itemStyle:{color: '#FF00FF'}
itemStyle:{color: '#6be6c1'}
},
{
name: '平均值3倍',
@ -404,9 +418,6 @@ export class notVerifiedComponent implements OnInit {
},
tooltip: {
trigger: 'axis',
backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度
borderWidth:'1',
borderRadius :'0',
formatter: (params)=>{
return this.echartsData.tableTooltip(this.echartsData.tableDataZhi,'未核查')
},
@ -560,14 +571,14 @@ export class detailedInformationComponent implements OnInit {
type: 'bar',
stack: '总数',
data: [39, 43, 49, 27, 53, 29, 38, 49, 29, 40, 40, 27, 54],
itemStyle:{color: '#DC143C'}
itemStyle:{color: '#626c91'}
},
{
name: '已核查提交审核',
type: 'bar',
stack: '总数',
data: [48, 42, 43, 53, 47, 39, 25, 26, 54, 34, 39, 24, 14],
itemStyle:{color:'#00BB00'}
itemStyle:{color:'#c4ebad'}
},
{
name: '平均值',
@ -581,7 +592,7 @@ export class detailedInformationComponent implements OnInit {
type: 'line',
// yAxisIndex: 1,
data: [98, 90, 106, 94, 98, 86, 96, 82, 76, 78, 82, 86, 74],
itemStyle:{color: '#FF00FF'}
itemStyle:{color: '#6be6c1'}
},
{
name: '平均值3倍',
@ -689,19 +700,19 @@ export class moreTableComponent implements OnInit {
displayedColumns: string[]=['team','header','time'];
dataSource:any = [
{content: '1月份已核查案件 高于平均值2倍', time: '2020-02-03',team: '浦东支队'},
{content: '1月份已核查案件 高于平均值2倍', time: '2020-02-05',team: '徐汇支队'},
{content: '1月份已核查案件 高于平均值2倍', time: '2020-02-05',team: '普陀支队'},
{content: '1月份已核查案件 高于平均值', time: '2020-02-05',team: '黄浦支队'},
{content: '1月份已核查案件 高于平均值', time: '2020-02-05',team: '长宁支队'},
{content: '1月份已核查案件 高于平均值2倍', time: '2020-02-05',team: '静安支队'},
{content: '1月份已核查案件 高于平均值2倍', time: '2020-02-05',team: '虹口支队'},
{content: '1月份已核查案件 高于平均值2倍', time: '2020-02-07',team: '杨浦支队'},
{content: '1月份已核查案件 高于平均值2倍', time: '2020-02-07',team: '闵行支队'},
{content: '1月份已核查案件 高于平均值2倍', time: '2020-02-07',team: '宝山支队'},
{content: '1月份已核查案件 高于平均值', time: '2020-02-07',team: '嘉定支队'},
{content: '1月份已核查案件 高于平均值', time: '2020-02-07',team: '崇明支队'},
{content: '1月份已核查案件 高于平均值2倍', time: '2020-02-07',team: '金山支队'},
{content: '1月份已核查案件 高于平均值', time: '2020-02-07',team: '崇明支队'},
{content: '1月份已核查案件 高于平均值', time: '2020-02-07',team: '嘉定支队'},
{content: '1月份已核查案件 高于平均值2倍', time: '2020-02-07',team: '宝山支队'},
{content: '1月份已核查案件 高于平均值2倍', time: '2020-02-07',team: '闵行支队'},
{content: '1月份已核查案件 高于平均值2倍', time: '2020-02-07',team: '杨浦支队'},
{content: '1月份已核查案件 高于平均值2倍', time: '2020-02-05',team: '虹口支队'},
{content: '1月份已核查案件 高于平均值2倍', time: '2020-02-05',team: '静安支队'},
{content: '1月份已核查案件 高于平均值', time: '2020-02-05',team: '长宁支队'},
{content: '1月份已核查案件 高于平均值', time: '2020-02-05',team: '黄浦支队'},
{content: '1月份已核查案件 高于平均值2倍', time: '2020-02-05',team: '普陀支队'},
{content: '1月份已核查案件 高于平均值2倍', time: '2020-02-05',team: '徐汇支队'},
{content: '1月份已核查案件 高于平均值2倍', time: '2020-02-03',team: '浦东支队'}
]

12
src/app/statistic-analysis/scheduled-updates/verified.html

@ -1,7 +1,15 @@
<!--
* @Descripttion:
* @version:
* @Author: sueRimn
* @Date: 2020-09-05 08:59:24
* @LastEditors: sueRimn
* @LastEditTime: 2020-09-09 16:19:16
-->
<app-detailedInformation *ngIf="!echartsData.scheduledUpdatesToggle"></app-detailedInformation>
<div [hidden]="!echartsData.scheduledUpdatesToggle">
<div style="height: 400px;width: 50%;margin: 0 auto;" id="center"></div>
<div class="publicOneLineCss" id="one"></div>
<div style="height: 450px;width: 50%;margin: 0 auto; padding-top: 50px;" id="center"></div>
<div class="publicOneLineCss" id="one" style="margin-top: 50px;"></div>
<div class="publicOneLineCss" id="two"></div>
<div class="publicOneLineCss" id="three"></div>
<div class="publicOneLineCss" id="four"></div>

21
src/app/statistic-analysis/state/page-one/page-one.component.ts

@ -4,10 +4,11 @@
* @Author: sueRimn
* @Date: 2020-09-01 15:24:39
* @LastEditors: sueRimn
* @LastEditTime: 2020-09-02 16:52:44
* @LastEditTime: 2020-09-08 15:37:55
*/
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import {EchartsDataService,} from '../../echarts-data.service'
declare var echarts: any;
@Component({
@ -18,7 +19,7 @@ declare var echarts: any;
export class PageOneComponent implements OnInit {
options:any;
constructor(private router: Router) { }
constructor(private router: Router,public echartsData:EchartsDataService) { }
ngOnInit() {
window.setTimeout(()=>{
@ -35,7 +36,7 @@ export class PageOneComponent implements OnInit {
indexBzt
initCharts(){
var ec = echarts as any;
this.indexBzt = ec.init(document.getElementById('indexBzt'));
this.indexBzt = ec.init(document.getElementById('indexBzt'),'walden');
var options={
title: {
text: '预案状态统计(7005家)',
@ -48,13 +49,8 @@ export class PageOneComponent implements OnInit {
tooltip: {
trigger: 'item',
formatter: (params)=>{
return this.biaogeTishi(params.name)
} ,
backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度
borderWidth:'1',
borderRadius :'0'
return this.echartsData.biaogeTishiZhi(params.name)
}
},
legend: {
orient: 'vertical',
@ -64,7 +60,8 @@ export class PageOneComponent implements OnInit {
// itemWidth:60,
// itemHeight:25,
textStyle:{
// fontSize:28
fontSize:18,
color:"#000000"
},
data: ['预案新增', '预案审核通过', '预案编制', '预案审核退回', '预案审核中']
},
@ -78,7 +75,7 @@ export class PageOneComponent implements OnInit {
normal:{
show:true,
// position: 'inner',
// fontSize:18,
fontSize:18,
formatter:'{b} {c}\n({d}%)',
},
rich: {

10
src/app/statistic-analysis/state/page-two-name/page-two-name.component.html

@ -1,8 +1,16 @@
<!--
* @Descripttion:
* @version:
* @Author: sueRimn
* @Date: 2020-09-02 16:38:42
* @LastEditors: sueRimn
* @LastEditTime: 2020-09-10 09:22:00
-->
<div class="echartsBox" [hidden]="!data.statefulInspectionToggle">
<div id="pie">
</div>
<div class="histogramBox">
<div class="histogramBox" style="margin-top: 150px;">
<!-- 新增 -->
<div id="addEchart" class="echart-item">

1
src/app/statistic-analysis/state/page-two-name/page-two-name.component.scss

@ -4,6 +4,7 @@
#pie{
width: 100%;
height: 450px;
// padding-top: 20px;
}
.histogramBox{
width: 100%;

222
src/app/statistic-analysis/state/page-two-name/page-two-name.component.ts

@ -1,7 +1,7 @@
import { Component, OnInit, ViewChild } from '@angular/core';
import { Router,ActivatedRoute } from '@angular/router'
import { PageZhongDuiDetailsComponent } from '../page-zhong-dui-details/page-zhong-dui-details.component';
import {EchartsDataService} from '../../echarts-data.service'
import {EchartsDataService} from '../../echarts-data.service';
declare var echarts: any;
@Component({
selector: 'app-page-two-name',
@ -16,6 +16,7 @@ export class PageTwoNameComponent implements OnInit {
ngOnInit(): void {
setTimeout(() => {
this.bianli()
this.planState()
this.planAdd()
this.passPlanEchart()
@ -47,6 +48,10 @@ export class PageTwoNameComponent implements OnInit {
}
axisLabel = {
interval: 0,
textStyle:{
fontSize :16,
color:'#000000'
},
formatter:function(value)
{
var ret = "";//拼接加\n返回的类目项
@ -83,17 +88,30 @@ export class PageTwoNameComponent implements OnInit {
zhiNameData = ["浦东支队","黄埔支队","徐汇支队","长宁支队","静安支队","普陀支队","虹口支队","杨浦支队","闵行支队","宝山支队","嘉定支队","松江支队","金山支队","崇明支队"]
zhiNumData = [200,190,180,170,160,150,140,130,120,110,100,90,80,70]
tiaoshiPao:any
//气泡提示数据获取
bianli(){
var arrshuzu='[';
for(var i=0;i<this.zhiNumData.length;i++){
arrshuzu+='{"value":'+this.zhiNumData[i]+',"coord":['+i+','+this.zhiNumData[i]+'],"name":'+'"'+this.zhiNameData[i]+'"'+'},'
}
arrshuzu=arrshuzu.substring(0,arrshuzu.length-1)
arrshuzu+=']'
this.tiaoshiPao=JSON.parse(arrshuzu)
console.log(this.tiaoshiPao)
//return tishiPao
}
addEchart
//预案新增统计
planAdd () {
let _this = this
this.addEchart = echarts.init(document.getElementById('addEchart'));
this.addEchart = echarts.init(document.getElementById('addEchart'),'walden');
var option = {
title: {
text: "预案新增",
text: "预案新增:总数(1024)",
left: "center",
top: "15",
top: "0",
bottom: '100%',
textStyle: {
fontSize: 23
}
@ -102,29 +120,37 @@ export class PageTwoNameComponent implements OnInit {
xAxis: {
type: 'category',
data: this.zhiNameData,
axisLabel: this.axisLabel
axisLabel:this.axisLabel
},
yAxis: {
type: 'value'
type: 'value',
axisLabel:{
//this.axisLabel,
textStyle:{
fontSize :16,
color:'#000000'
}
}
},
tooltip: {
trigger: 'item',
formatter: (params)=>{
return this.tableTooltip2(params.name)
return this.data.biaogeTishi(params.name)
},
backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度
borderWidth:'1',
borderRadius :'0'
position: this.data.tableTooltipNoShow2
},
series: [{
data: this.zhiNumData,
type: 'bar',
showBackground: true,
markPoint: {
data: this.tiaoshiPao
},
backgroundStyle: {
color: 'rgba(220, 220, 220, 0.8)'
},
barWidth :'28',
label: this.topTextlabel
//label: this.topTextlabel
}]
};
this.addEchart.setOption(option);
@ -137,12 +163,13 @@ export class PageTwoNameComponent implements OnInit {
//预案审核通过
passPlanEchart (){
let _this = this
this.passPlanEchartObj = echarts.init(document.getElementById('passPlanEchart'));
this.passPlanEchartObj = echarts.init(document.getElementById('passPlanEchart'),'walden');
var option = {
title: {
text: "预案审核通过",
text: "预案审核通过:总数(1024)",
left: "center",
top: "15",
top: "0",
bottom: '100%',
textStyle: {
fontSize: 23
}
@ -153,26 +180,33 @@ export class PageTwoNameComponent implements OnInit {
axisLabel: this.axisLabel
},
yAxis: {
type: 'value'
type: 'value',
axisLabel:{
//this.axisLabel,
textStyle:{
fontSize :16,
color:'#000000'
}
}
},
tooltip: {
trigger: 'item',
formatter: (params)=>{
return this.tableTooltip2(params.name)
return this.data.biaogeTishi(params.name)
},
backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度
borderWidth:'1',
borderRadius :'0'
position: this.data.tableTooltipNoShow2
},
series: [{
data: this.zhiNumData,
type: 'bar',
showBackground: true,
markPoint: {
data: this.tiaoshiPao
},
backgroundStyle: {
color: 'rgba(220, 220, 220, 0.8)'
},
barWidth :'28',
label: this.topTextlabel
//label: this.topTextlabel
}]
};
this.passPlanEchartObj.setOption(option);
@ -185,12 +219,13 @@ export class PageTwoNameComponent implements OnInit {
//预案编制
planMake (){
let _this = this
this.passMakeEchart = echarts.init(document.getElementById('planMake'));
this.passMakeEchart = echarts.init(document.getElementById('planMake'),'walden');
var option = {
title: {
text: "预案编制",
text: "预案编制:总数(1024)",
left: "center",
top: "15",
top: "0",
bottom: '100%',
textStyle: {
fontSize: 23
}
@ -201,26 +236,34 @@ export class PageTwoNameComponent implements OnInit {
axisLabel: this.axisLabel
},
yAxis: {
type: 'value'
type: 'value',
axisLabel:{
//this.axisLabel,
textStyle:{
fontSize :16,
color:'#000000'
}
}
},
tooltip: {
trigger: 'item',
formatter: (params)=>{
return this.tableTooltip2(params.name)
return this.data.biaogeTishi(params.name)
},
backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度
borderWidth:'1',
borderRadius :'0'
position: this.data.tableTooltipNoShow2
},
series: [{
data: this.zhiNumData,
type: 'bar',
showBackground: true,
markPoint: {
data: this.tiaoshiPao
},
backgroundStyle: {
color: 'rgba(220, 220, 220, 0.8)'
},
barWidth :'28',
label: this.topTextlabel
//label: this.topTextlabel
}]
};
this.passMakeEchart.setOption(option);
@ -233,12 +276,13 @@ export class PageTwoNameComponent implements OnInit {
//预案审核退回
planBack (){
let _this = this
this.passBackEchart = echarts.init(document.getElementById('planBack'));
this.passBackEchart = echarts.init(document.getElementById('planBack'),'walden');
var option = {
title: {
text: "预案审核退回",
text: "预案审核退回:总数(1024)",
left: "center",
top: "15",
top: "0",
bottom: '100%',
textStyle: {
fontSize: 23
}
@ -249,26 +293,34 @@ export class PageTwoNameComponent implements OnInit {
axisLabel: this.axisLabel
},
yAxis: {
type: 'value'
type: 'value',
axisLabel:{
//this.axisLabel,
textStyle:{
fontSize :16,
color:'#000000'
}
}
},
tooltip: {
trigger: 'item',
formatter: (params)=>{
return this.tableTooltip2(params.name)
return this.data.biaogeTishi(params.name)
},
backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度
borderWidth:'1',
borderRadius :'0'
position: this.data.tableTooltipNoShow2
},
series: [{
data: this.zhiNumData,
type: 'bar',
showBackground: true,
markPoint: {
data: this.tiaoshiPao
},
backgroundStyle: {
color: 'rgba(220, 220, 220, 0.8)'
},
barWidth :'28',
label: this.topTextlabel
//label: this.topTextlabel
}]
};
this.passBackEchart.setOption(option);
@ -281,12 +333,13 @@ export class PageTwoNameComponent implements OnInit {
//预案审核中
planAudit (){
let _this = this
this.planAuditEchart = echarts.init(document.getElementById('planAudit'));
this.planAuditEchart = echarts.init(document.getElementById('planAudit'),'walden');
var option = {
title: {
text: "预案审核中",
text: "预案审核中:总数(1024)",
left: "center",
top: "15",
top: "0",
bottom: '100%',
textStyle: {
fontSize: 23
}
@ -297,26 +350,34 @@ export class PageTwoNameComponent implements OnInit {
axisLabel: this.axisLabel
},
yAxis: {
type: 'value'
type: 'value',
axisLabel:{
//this.axisLabel,
textStyle:{
fontSize :16,
color:'#000000'
}
}
},
tooltip: {
trigger: 'item',
formatter: (params)=>{
return this.tableTooltip2(params.name)
return this.data.biaogeTishi(params.name)
},
backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度
borderWidth:'1',
borderRadius :'0'
position: this.data.tableTooltipNoShow2
},
series: [{
data: this.zhiNumData,
type: 'bar',
showBackground: true,
markPoint: {
data: this.tiaoshiPao
},
backgroundStyle: {
color: 'rgba(220, 220, 220, 0.8)'
},
barWidth :'28',
label: this.topTextlabel
//label: this.topTextlabel
}]
};
this.planAuditEchart.setOption(option);
@ -328,70 +389,38 @@ export class PageTwoNameComponent implements OnInit {
topEchart
//预案状态统计
planState(){
this.topEchart = echarts.init(document.getElementById('pie'));
this.topEchart = echarts.init(document.getElementById('pie'),'walden');
var option = {
title: {
text: '预案状态统计(7005份)',
left: 'center',
top: "11%",
top: "6%",
textStyle: {
fontSize: 23
fontSize: 30
}
},
tooltip: {
trigger: 'item',
formatter: (params)=>{
return this.tableTooltip(params.name)
return this.data.biaogeTishi(params.name)
},
backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度
borderWidth:'1',
borderRadius :'0',
position: function (point, params, dom, rect, size) {
// 鼠标坐标和提示框位置的参考坐标系是:以外层div的左上角那一点为原点,x轴向右,y轴向下
// 提示框位置
var x = 0; // x坐标位置
var y = 0; // y坐标位置
// 当前鼠标位置
var pointX = point[0];
var pointY = point[1];
// 外层div大小
// var viewWidth = size.viewSize[0];
// var viewHeight = size.viewSize[1];
// 提示框大小
var boxWidth = size.contentSize[0];
var boxHeight = size.contentSize[1];
// boxWidth > pointX 说明鼠标左边放不下提示框
if (boxWidth > pointX) {
x = 35;
} else { // 左边放的下
x = pointX + 80;
}
// boxHeight > pointY 说明鼠标上边放不下提示框
if (boxHeight > pointY) {
y = 65;
} else { // 上边放得下
y = pointY - boxHeight;
}
return [pointX, pointY];
}
position: this.data.tableTooltipNoShow2
},
legend: {
orient: 'vertical',
right: '23%',
right: '13%',
top: "26%",
textStyle:{
fontSize:18,
color:"#000000"
},
data: ['预案新增', '预案审核通过', '预案编制', '预案审核退回', '预案审核中']
},
series: [
{
name: '访问来源',
type: 'pie',
radius: '60%',
radius: '80%',
center: ['50%', '60%'],
data: [
{value: 1585, name: '预案新增'},
@ -402,6 +431,7 @@ export class PageTwoNameComponent implements OnInit {
],
label: {
formatter: '{b}({c}份)\n{d|{d}%}',
fontSize :18,
rich: {
d: {
align: 'center',

14
src/app/statistic-analysis/state/page-two-time/page-two-time.component.html

@ -1,3 +1,11 @@
<!--
* @Descripttion:
* @version:
* @Author: sueRimn
* @Date: 2020-09-05 08:59:24
* @LastEditors: sueRimn
* @LastEditTime: 2020-09-10 10:19:33
-->
<div class="content">
<div class="header">
@ -59,13 +67,13 @@
<div class="fixedCss">
<button mat-raised-button (click)='goBack()' *ngIf="!echartsData.statefulInspectionToggle">返回</button>
<button mat-raised-button (click)='toggleTrue()' [ngClass]="{'selectButton': isQuery}" style="margin:0 10px;" >横向查询</button>
<button mat-raised-button (click)='toggleFalse()' [ngClass]="{'selectButton': !isQuery}">纵向查询</button>
<button mat-raised-button (click)='toggleTrue()' [ngClass]="{'selectButton': isQuery}" style="margin:0 10px;" *ngIf="echartsData.statefulInspectionToggle">横向查询</button>
<button mat-raised-button (click)='toggleFalse()' [ngClass]="{'selectButton': !isQuery}" *ngIf="echartsData.statefulInspectionToggle">纵向查询</button>
</div>
</div>
<div class="echarts">
<div class="echarts" style="padding-top: 80px;">
<div class="center">
<app-echarts *ngIf="!isQuery" #appEcharts></app-echarts>
<app-page-two-name *ngIf="isQuery" #pageTwoName></app-page-two-name>

106
src/app/statistic-analysis/state/page-two-time/page-two-time.component.ts

@ -22,6 +22,7 @@ export class PageTwoTimeComponent implements OnInit {
ngOnInit(): void {
this.echartsData.statefulInspectionToggle = true
this.dateInit()
this.bianli()
}
isQuery:boolean = true; //横纵向查询
@ -48,6 +49,21 @@ export class PageTwoTimeComponent implements OnInit {
//查询数据
years:any = []
selectMonth:any = [1,2,3,4,5,6,7,8,9,10,11,12]
tiaoshiPao:any
datayuey=[270, 253, 244, 199, 189, 173, 160, 198,200]
datayuex=['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月','9月']
//气泡提示数据获取
bianli(){
var arrshuzu='[';
for(var i=0;i<this.datayuey.length;i++){
arrshuzu+='{"value":'+this.datayuey[i]+',"coord":['+i+','+this.datayuey[i]+'],"name":'+'"'+this.datayuex[i]+'"'+'},'
}
arrshuzu=arrshuzu.substring(0,arrshuzu.length-1)
arrshuzu+=']'
this.tiaoshiPao=JSON.parse(arrshuzu)
console.log(this.tiaoshiPao)
//return tishiPao
}
//日期初始化
dateInit () {
@ -120,8 +136,24 @@ export class echartsComponent implements OnInit {
constructor(public snackBar: MatSnackBar,private adapter: DateAdapter<any>,public echartsData:EchartsDataService) { }
tiaoshiPao:any
datayuey=[270, 253, 244, 199, 189, 173, 160, 198,200]
datayuex=['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月','9月']
//气泡提示数据获取
bianli(){
var arrshuzu='[';
for(var i=0;i<this.datayuey.length;i++){
arrshuzu+='{"value":'+this.datayuey[i]+',"coord":['+i+','+this.datayuey[i]+'],"name":'+'"'+this.datayuex[i]+'"'+'},'
}
arrshuzu=arrshuzu.substring(0,arrshuzu.length-1)
arrshuzu+=']'
this.tiaoshiPao=JSON.parse(arrshuzu)
console.log(this.tiaoshiPao)
//return tishiPao
}
ngOnInit(): void {
window.setTimeout(()=>{
this.bianli()
this.oneInit()
this.twoInit()
this.threeInit()
@ -148,19 +180,16 @@ export class echartsComponent implements OnInit {
oneExample:any;
oneInit () {
this.oneExample = echarts.init(document.getElementById('one'), 'skinUpp');
this.oneExample = echarts.init(document.getElementById('one'),'walden');
var option = {
grid: {
top: 50,
left:40,
right: 20,
bottom: 20,
},
tooltip: {
trigger: 'axis',
backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度
borderWidth:'1',
borderRadius :'0',
formatter: (params)=>{
return this.echartsData.tableTooltip(this.echartsData.planData,params[0].name)
},
@ -186,7 +215,7 @@ export class echartsComponent implements OnInit {
xAxis: {
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月','9月'],
boundaryGap: false,
boundaryGap: true,
axisLabel: {
color: "#000", //刻度线标签颜色
},
@ -221,6 +250,11 @@ export class echartsComponent implements OnInit {
series: [{
name: '单位预案编制数量',
type: 'line',
markPoint: {
symbolSize:[65, 65],
data: this.tiaoshiPao
},
data: [270, 253, 244, 199, 189, 173, 160, 198,200],
}
],
@ -244,6 +278,7 @@ export class echartsComponent implements OnInit {
text: '预案新增',
top: -4,
left: 'center',
bottom: 100,
textStyle:{
//文字颜色
color:'#000',
@ -251,9 +286,7 @@ export class echartsComponent implements OnInit {
},
tooltip: {
trigger: 'axis',
backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度
borderWidth:'1',
borderRadius :'0',
formatter: (params)=>{
return this.echartsData.tableTooltip(this.echartsData.tableDataZhi,'预案新增')
}
@ -262,7 +295,7 @@ export class echartsComponent implements OnInit {
xAxis: {
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月','9月'],
boundaryGap: false,
boundaryGap: true,
axisLabel: {
color: "#000", //刻度线标签颜色
},
@ -297,6 +330,11 @@ export class echartsComponent implements OnInit {
series: [{
name: '单位预案编制数量',
type: 'line',
markPoint: {
symbolSize:[65, 65],
data: this.tiaoshiPao
},
data: [270, 253, 244, 199, 189, 173, 160, 198,200],
}
],
@ -317,13 +355,13 @@ export class echartsComponent implements OnInit {
top: 50,
left:40,
right: 20,
bottom: 20,
},
// 标题
title: {
text: '预案审核通过',
top: -4,
left: 'center',
bottom: 100,
textStyle:{
//文字颜色
color:'#000',
@ -332,9 +370,6 @@ export class echartsComponent implements OnInit {
//提示框
tooltip: {
trigger: 'axis',
backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度
borderWidth:'1',
borderRadius :'0',
formatter: (params)=>{
return this.echartsData.tableTooltip(this.echartsData.tableDataZhi,'预案审核通过')
}
@ -343,7 +378,7 @@ export class echartsComponent implements OnInit {
xAxis: {
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月','9月'],
boundaryGap: false,
boundaryGap: true,
axisLabel: {
color: "#000", //刻度线标签颜色
},
@ -378,6 +413,11 @@ export class echartsComponent implements OnInit {
series: [{
name: '单位预案编制数量',
type: 'line',
markPoint: {
symbolSize:[65, 65],
data: this.tiaoshiPao
},
data: [270, 253, 244, 199, 189, 173, 160, 198,200],
}
],
@ -398,13 +438,13 @@ export class echartsComponent implements OnInit {
top: 50,
left:40,
right: 20,
bottom: 20,
},
// 标题
title: {
text: '预案编制',
top: -4,
left: 'center',
bottom: 100,
textStyle:{
//文字颜色
color:'#000',
@ -413,9 +453,7 @@ export class echartsComponent implements OnInit {
//提示框
tooltip: {
trigger: 'axis',
backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度
borderWidth:'1',
borderRadius :'0',
formatter: (params)=>{
return this.echartsData.tableTooltip(this.echartsData.tableDataZhi,'预案编制')
}
@ -424,7 +462,7 @@ export class echartsComponent implements OnInit {
xAxis: {
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月','9月'],
boundaryGap: false,
boundaryGap: true,
axisLabel: {
color: "#000", //刻度线标签颜色
},
@ -459,6 +497,11 @@ export class echartsComponent implements OnInit {
series: [{
name: '单位预案编制数量',
type: 'line',
markPoint: {
symbolSize:[65, 65],
data: this.tiaoshiPao
},
data: [270, 253, 244, 199, 189, 173, 160, 198,200],
}
],
@ -486,6 +529,7 @@ export class echartsComponent implements OnInit {
text: '预案审核退回',
top: -4,
left: 'center',
bottom: 100,
textStyle:{
//文字颜色
color:'#000',
@ -494,9 +538,7 @@ export class echartsComponent implements OnInit {
//提示框
tooltip: {
trigger: 'axis',
backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度
borderWidth:'1',
borderRadius :'0',
formatter: (params)=>{
return this.echartsData.tableTooltip(this.echartsData.tableDataZhi,'预案审核退回')
}
@ -505,7 +547,7 @@ export class echartsComponent implements OnInit {
xAxis: {
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月','9月'],
boundaryGap: false,
boundaryGap: true,
axisLabel: {
color: "#000", //刻度线标签颜色
},
@ -540,6 +582,11 @@ export class echartsComponent implements OnInit {
series: [{
name: '单位预案编制数量',
type: 'line',
markPoint: {
symbolSize:[65, 65],
data: this.tiaoshiPao
},
data: [270, 253, 244, 199, 189, 173, 160, 198,200],
}
],
@ -575,9 +622,7 @@ export class echartsComponent implements OnInit {
//提示框
tooltip: {
trigger: 'axis',
backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度
borderWidth:'1',
borderRadius :'0',
formatter: (params)=>{
return this.echartsData.tableTooltip(this.echartsData.tableDataZhi,'预案审核中')
}
@ -586,7 +631,7 @@ export class echartsComponent implements OnInit {
xAxis: {
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月','9月'],
boundaryGap: false,
boundaryGap: true,
axisLabel: {
color: "#000", //刻度线标签颜色
},
@ -621,6 +666,11 @@ export class echartsComponent implements OnInit {
series: [{
name: '单位预案编制数量',
type: 'line',
markPoint: {
symbolSize:[65, 65],
data: this.tiaoshiPao
},
data: [270, 253, 244, 199, 189, 173, 160, 198,200],
}
],

2
src/app/statistic-analysis/state/page-zhong-dui-details/page-zhong-dui-details.component.scss

@ -4,7 +4,7 @@
position: relative;
#detailBox{
width: 100%;
height: 350px;
height: 550px;
position: absolute;
left: 50%;
top: 45%;

75
src/app/statistic-analysis/state/page-zhong-dui-details/page-zhong-dui-details.component.ts

@ -1,3 +1,11 @@
/*
* @Descripttion:
* @version:
* @Author: sueRimn
* @Date: 2020-09-05 13:50:45
* @LastEditors: sueRimn
* @LastEditTime: 2020-09-10 09:51:32
*/
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import {EchartsDataService} from '../../echarts-data.service'
@ -13,9 +21,23 @@ export class PageZhongDuiDetailsComponent implements OnInit {
zhongNameData = ["浦东中队","黄埔中队","徐汇中队","长宁中队","静安中队","普陀中队","虹口中队","杨浦中队","闵行中队","宝山中队","嘉定中队"]
zhongNumData = [200,190,180,170,160,150,140,130,120,110,100]
tiaoshiPao:any
//气泡提示数据获取
bianli(){
var arrshuzu='[';
for(var i=0;i<this.zhongNumData.length;i++){
arrshuzu+='{"value":'+this.zhongNumData[i]+',"coord":['+i+','+this.zhongNumData[i]+'],"name":'+'"'+this.zhongNameData[i]+'"'+'},'
}
arrshuzu=arrshuzu.substring(0,arrshuzu.length-1)
arrshuzu+=']'
this.tiaoshiPao=JSON.parse(arrshuzu)
console.log(this.tiaoshiPao)
//return tishiPao
}
ngOnInit(): void {
window.setTimeout(()=>{
this.bianli()
this.detailEcharts()
})
}
@ -25,40 +47,57 @@ export class PageZhongDuiDetailsComponent implements OnInit {
}
detailPlanEchart
detailEcharts(){
this.detailPlanEchart = echarts.init(document.getElementById('detailBox'));
this.detailPlanEchart = echarts.init(document.getElementById('detailBox'),'walden');
var option = {
title: {
text: this.data.statefulInspectionName,
text: this.data.statefulInspectionName+':总数(666)',
left: "center",
top: "0",
textStyle: {
fontSize: 28
fontSize: 30
}
},
xAxis: {
type: 'category',
data: this.zhongNameData,
// axisLabel: this.axisLabel
axisLabel:{
//this.axisLabel,
textStyle:{
fontSize :18,
color:'#000000'
}
}
},
yAxis: {
type: 'value'
type: 'value',
axisLabel:{
textStyle:{
fontSize :18,
color:'#000000'
}
}
},
tooltip: {
trigger: 'item',
formatter: (params)=>{
return this.tableTooltip(params)
},
backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度
borderWidth:'1',
borderRadius :'0'
position: this.data.tableTooltipNoShow2
},
series: [{
data: this.zhongNumData,
type: 'bar',
showBackground: true,
markPoint: {
symbolSize:[65, 65],
data: this.tiaoshiPao
},
backgroundStyle: {
color: 'rgba(220, 220, 220, 0.8)'
},
barWidth :'58'
barWidth :'38'
}]
};
this.detailPlanEchart.setOption(option);
@ -69,19 +108,19 @@ export class PageZhongDuiDetailsComponent implements OnInit {
var data = [
{name:params.name,number:params.value,zhanbi:(params.value/1340 * 100).toFixed(2) + "%"}
]
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;">'+params.name+'</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"; >';
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:#FFFFFF;font-size:30px;text-align: center;display:block;">'+params.name+'</span></div>'
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"; >';
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+='<td style="text-align:center;width:30%;">名称</td>';
res+='<td style="text-align:center;width:30%;">数量</td>'
res+='<td style="text-align:center;width:30%;">总占比</td>'
res+='</tr></thead>'
res+='<tbody>';
for(var i=0;i<data.length;i++){
res+='<tr>'
res+='<td style="text-align:center;border:1px solid #000000">'+data[i].name+'</td>'
res+='<td style="text-align:center;border:1px solid #000000">'+data[i].number+'</td>'
res+='<td style="text-align:center;border:1px solid #000000">'+data[i].zhanbi+'</td></tr>'
res+='<td style="text-align:center;">'+data[i].name+'</td>'
res+='<td style="text-align:center;">'+data[i].number+'</td>'
res+='<td style="text-align:center;">'+data[i].zhanbi+'</td></tr>'
}
res+='</tbody>'

512
src/assets/chartstheme/walden.js

@ -0,0 +1,512 @@
(function (root, factory) {
if (typeof define === 'function' && define.amd) {
// AMD. Register as an anonymous module.
define(['exports', 'echarts'], factory);
} else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {
// CommonJS
factory(exports, require('echarts'));
} else {
// Browser globals
factory({}, root.echarts);
}
}(this, function (exports, echarts) {
var log = function (msg) {
if (typeof console !== 'undefined') {
console && console.error && console.error(msg);
}
};
if (!echarts) {
log('ECharts is not Loaded');
return;
}
echarts.registerTheme('walden', {
"color": [
"#3fb1e3",
"#6be6c1",
"#626c91",
"#a0a7e6",
"#c4ebad",
"#96dee8"
],
"backgroundColor": "rgba(252,252,252,0)",
"textStyle": {},
"title": {
"textStyle": {
"color": "#666666"
},
"subtextStyle": {
"color": "#999999"
}
},
"line": {
"itemStyle": {
"normal": {
"borderWidth": "2"
}
},
"lineStyle": {
"normal": {
"width": "3"
}
},
"symbolSize": "8",
"symbol": "emptyCircle",
"smooth": false
},
"radar": {
"itemStyle": {
"normal": {
"borderWidth": "2"
}
},
"lineStyle": {
"normal": {
"width": "3"
}
},
"symbolSize": "8",
"symbol": "emptyCircle",
"smooth": false
},
"bar": {
"itemStyle": {
"normal": {
"barBorderWidth": 0,
"barBorderColor": "#ccc"
},
"emphasis": {
"barBorderWidth": 0,
"barBorderColor": "#ccc"
}
}
},
"pie": {
"itemStyle": {
"normal": {
"borderWidth": 0,
"borderColor": "#ccc"
},
"emphasis": {
"borderWidth": 0,
"borderColor": "#ccc"
}
}
},
"scatter": {
"itemStyle": {
"normal": {
"borderWidth": 0,
"borderColor": "#ccc"
},
"emphasis": {
"borderWidth": 0,
"borderColor": "#ccc"
}
}
},
"boxplot": {
"itemStyle": {
"normal": {
"borderWidth": 0,
"borderColor": "#ccc"
},
"emphasis": {
"borderWidth": 0,
"borderColor": "#ccc"
}
}
},
"parallel": {
"itemStyle": {
"normal": {
"borderWidth": 0,
"borderColor": "#ccc"
},
"emphasis": {
"borderWidth": 0,
"borderColor": "#ccc"
}
}
},
"sankey": {
"itemStyle": {
"normal": {
"borderWidth": 0,
"borderColor": "#ccc"
},
"emphasis": {
"borderWidth": 0,
"borderColor": "#ccc"
}
}
},
"funnel": {
"itemStyle": {
"normal": {
"borderWidth": 0,
"borderColor": "#ccc"
},
"emphasis": {
"borderWidth": 0,
"borderColor": "#ccc"
}
}
},
"gauge": {
"itemStyle": {
"normal": {
"borderWidth": 0,
"borderColor": "#ccc"
},
"emphasis": {
"borderWidth": 0,
"borderColor": "#ccc"
}
}
},
"candlestick": {
"itemStyle": {
"normal": {
"color": "#e6a0d2",
"color0": "transparent",
"borderColor": "#e6a0d2",
"borderColor0": "#3fb1e3",
"borderWidth": "2"
}
}
},
"graph": {
"itemStyle": {
"normal": {
"borderWidth": 0,
"borderColor": "#ccc"
}
},
"lineStyle": {
"normal": {
"width": "1",
"color": "#cccccc"
}
},
"symbolSize": "8",
"symbol": "emptyCircle",
"smooth": false,
"color": [
"#3fb1e3",
"#6be6c1",
"#626c91",
"#a0a7e6",
"#c4ebad",
"#96dee8"
],
"label": {
"normal": {
"textStyle": {
"color": "#ffffff"
}
}
}
},
"map": {
"itemStyle": {
"normal": {
"areaColor": "#eeeeee",
"borderColor": "#aaaaaa",
"borderWidth": 0.5
},
"emphasis": {
"areaColor": "rgba(63,177,227,0.25)",
"borderColor": "#3fb1e3",
"borderWidth": 1
}
},
"label": {
"normal": {
"textStyle": {
"color": "#ffffff"
}
},
"emphasis": {
"textStyle": {
"color": "#3fb1e3"
}
}
}
},
"geo": {
"itemStyle": {
"normal": {
"areaColor": "#eeeeee",
"borderColor": "#aaaaaa",
"borderWidth": 0.5
},
"emphasis": {
"areaColor": "rgba(63,177,227,0.25)",
"borderColor": "#3fb1e3",
"borderWidth": 1
}
},
"label": {
"normal": {
"textStyle": {
"color": "#ffffff"
}
},
"emphasis": {
"textStyle": {
"color": "#3fb1e3"
}
}
}
},
"categoryAxis": {
"axisLine": {
"show": true,
"lineStyle": {
"color": "#cccccc"
}
},
"axisTick": {
"show": false,
"lineStyle": {
"color": "#333"
}
},
"axisLabel": {
"show": true,
"textStyle": {
"color": "#999999"
}
},
"splitLine": {
"show": false,
"lineStyle": {
"color": [
"#eeeeee"
]
}
},
"splitArea": {
"show": false,
"areaStyle": {
"color": [
"rgba(250,250,250,0.05)",
"rgba(200,200,200,0.02)"
]
}
}
},
"valueAxis": {
"axisLine": {
"show": true,
"lineStyle": {
"color": "#cccccc"
}
},
"axisTick": {
"show": false,
"lineStyle": {
"color": "#333"
}
},
"axisLabel": {
"show": true,
"textStyle": {
"color": "#999999"
}
},
"splitLine": {
"show": false,
"lineStyle": {
"color": [
"#eeeeee"
]
}
},
"splitArea": {
"show": false,
"areaStyle": {
"color": [
"rgba(250,250,250,0.05)",
"rgba(200,200,200,0.02)"
]
}
}
},
"logAxis": {
"axisLine": {
"show": true,
"lineStyle": {
"color": "#cccccc"
}
},
"axisTick": {
"show": false,
"lineStyle": {
"color": "#333"
}
},
"axisLabel": {
"show": true,
"textStyle": {
"color": "#999999"
}
},
"splitLine": {
"show": false,
"lineStyle": {
"color": [
"#eeeeee"
]
}
},
"splitArea": {
"show": false,
"areaStyle": {
"color": [
"rgba(250,250,250,0.05)",
"rgba(200,200,200,0.02)"
]
}
}
},
"timeAxis": {
"axisLine": {
"show": true,
"lineStyle": {
"color": "#cccccc"
}
},
"axisTick": {
"show": false,
"lineStyle": {
"color": "#333"
}
},
"axisLabel": {
"show": true,
"textStyle": {
"color": "#999999"
}
},
"splitLine": {
"show": false,
"lineStyle": {
"color": [
"#eeeeee"
]
}
},
"splitArea": {
"show": false,
"areaStyle": {
"color": [
"rgba(250,250,250,0.05)",
"rgba(200,200,200,0.02)"
]
}
}
},
"toolbox": {
"iconStyle": {
"normal": {
"borderColor": "#999999"
},
"emphasis": {
"borderColor": "#666666"
}
}
},
"legend": {
"textStyle": {
"color": "#999999"
}
},
"tooltip": {
"axisPointer": {
"lineStyle": {
"color": "#cccccc",
"width": 1
},
"crossStyle": {
"color": "#cccccc",
"width": 1
}
}
},
"timeline": {
"lineStyle": {
"color": "#626c91",
"width": 1
},
"itemStyle": {
"normal": {
"color": "#626c91",
"borderWidth": 1
},
"emphasis": {
"color": "#626c91"
}
},
"controlStyle": {
"normal": {
"color": "#626c91",
"borderColor": "#626c91",
"borderWidth": 0.5
},
"emphasis": {
"color": "#626c91",
"borderColor": "#626c91",
"borderWidth": 0.5
}
},
"checkpointStyle": {
"color": "#3fb1e3",
"borderColor": "rgba(63,177,227,0.15)"
},
"label": {
"normal": {
"textStyle": {
"color": "#626c91"
}
},
"emphasis": {
"textStyle": {
"color": "#626c91"
}
}
}
},
"visualMap": {
"color": [
"#2a99c9",
"#afe8ff"
]
},
"dataZoom": {
"backgroundColor": "rgba(255,255,255,0)",
"dataBackgroundColor": "rgba(222,222,222,1)",
"fillerColor": "rgba(114,230,212,0.25)",
"handleColor": "#cccccc",
"handleSize": "100%",
"textStyle": {
"color": "#999999"
}
},
"markPoint": {
"label": {
"normal": {
"textStyle": {
"color": "#ffffff"
}
},
"emphasis": {
"textStyle": {
"color": "#ffffff"
}
}
}
}
});
}));

167
src/assets/chartstheme/walden.project.json

@ -0,0 +1,167 @@
{
"version": 1,
"themeName": "walden",
"theme": {
"seriesCnt": "3",
"backgroundColor": "rgba(252,252,252,0)",
"titleColor": "#666666",
"subtitleColor": "#999999",
"textColorShow": false,
"textColor": "#333",
"markTextColor": "#ffffff",
"color": [
"#3fb1e3",
"#6be6c1",
"#626c91",
"#a0a7e6",
"#c4ebad",
"#96dee8"
],
"borderColor": "#ccc",
"borderWidth": 0,
"visualMapColor": [
"#2a99c9",
"#afe8ff"
],
"legendTextColor": "#999999",
"kColor": "#e6a0d2",
"kColor0": "transparent",
"kBorderColor": "#e6a0d2",
"kBorderColor0": "#3fb1e3",
"kBorderWidth": "2",
"lineWidth": "3",
"symbolSize": "8",
"symbol": "emptyCircle",
"symbolBorderWidth": "2",
"lineSmooth": false,
"graphLineWidth": "1",
"graphLineColor": "#cccccc",
"mapLabelColor": "#ffffff",
"mapLabelColorE": "#3fb1e3",
"mapBorderColor": "#aaaaaa",
"mapBorderColorE": "#3fb1e3",
"mapBorderWidth": 0.5,
"mapBorderWidthE": 1,
"mapAreaColor": "#eeeeee",
"mapAreaColorE": "rgba(63,177,227,0.25)",
"axes": [
{
"type": "all",
"name": "通用坐标轴",
"axisLineShow": true,
"axisLineColor": "#cccccc",
"axisTickShow": false,
"axisTickColor": "#333",
"axisLabelShow": true,
"axisLabelColor": "#999999",
"splitLineShow": false,
"splitLineColor": [
"#eeeeee"
],
"splitAreaShow": false,
"splitAreaColor": [
"rgba(250,250,250,0.05)",
"rgba(200,200,200,0.02)"
]
},
{
"type": "category",
"name": "类目坐标轴",
"axisLineShow": true,
"axisLineColor": "#333",
"axisTickShow": true,
"axisTickColor": "#333",
"axisLabelShow": true,
"axisLabelColor": "#333",
"splitLineShow": false,
"splitLineColor": [
"#ccc"
],
"splitAreaShow": false,
"splitAreaColor": [
"rgba(250,250,250,0.3)",
"rgba(200,200,200,0.3)"
]
},
{
"type": "value",
"name": "数值坐标轴",
"axisLineShow": true,
"axisLineColor": "#333",
"axisTickShow": true,
"axisTickColor": "#333",
"axisLabelShow": true,
"axisLabelColor": "#333",
"splitLineShow": true,
"splitLineColor": [
"#ccc"
],
"splitAreaShow": false,
"splitAreaColor": [
"rgba(250,250,250,0.3)",
"rgba(200,200,200,0.3)"
]
},
{
"type": "log",
"name": "对数坐标轴",
"axisLineShow": true,
"axisLineColor": "#333",
"axisTickShow": true,
"axisTickColor": "#333",
"axisLabelShow": true,
"axisLabelColor": "#333",
"splitLineShow": true,
"splitLineColor": [
"#ccc"
],
"splitAreaShow": false,
"splitAreaColor": [
"rgba(250,250,250,0.3)",
"rgba(200,200,200,0.3)"
]
},
{
"type": "time",
"name": "时间坐标轴",
"axisLineShow": true,
"axisLineColor": "#333",
"axisTickShow": true,
"axisTickColor": "#333",
"axisLabelShow": true,
"axisLabelColor": "#333",
"splitLineShow": true,
"splitLineColor": [
"#ccc"
],
"splitAreaShow": false,
"splitAreaColor": [
"rgba(250,250,250,0.3)",
"rgba(200,200,200,0.3)"
]
}
],
"axisSeperateSetting": false,
"toolboxColor": "#999999",
"toolboxEmphasisColor": "#666666",
"tooltipAxisColor": "#cccccc",
"tooltipAxisWidth": 1,
"timelineLineColor": "#626c91",
"timelineLineWidth": 1,
"timelineItemColor": "#626c91",
"timelineItemColorE": "#626c91",
"timelineCheckColor": "#3fb1e3",
"timelineCheckBorderColor": "rgba(63,177,227,0.15)",
"timelineItemBorderWidth": 1,
"timelineControlColor": "#626c91",
"timelineControlBorderColor": "#626c91",
"timelineControlBorderWidth": 0.5,
"timelineLabelColor": "#626c91",
"datazoomBackgroundColor": "rgba(255,255,255,0)",
"datazoomDataColor": "rgba(222,222,222,1)",
"datazoomFillColor": "rgba(114,230,212,0.25)",
"datazoomHandleColor": "#cccccc",
"datazoomHandleWidth": "100",
"datazoomLabelColor": "#999999"
}
}
Loading…
Cancel
Save