3 changed files with 285 additions and 12 deletions
@ -1,2 +1,13 @@
|
||||
<button (click)="ok1()">按钮1</button> |
||||
<button (click)="ok2()">按钮2</button> |
||||
|
||||
|
||||
<div class="conter"> |
||||
|
||||
<div class="left"> |
||||
<div class="top"> |
||||
<span (click)="switch('频次')" [ngClass]="{'select': !examinationIndex}">考试频次</span> | |
||||
<span (click)="switch('人数')" [ngClass]="{'select': examinationIndex}">考试人数</span> |
||||
</div> |
||||
<div id="zhidui"> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
@ -0,0 +1,84 @@
|
||||
.conter{ |
||||
width: 100%; |
||||
height: 100%; |
||||
overflow: hidden; |
||||
background: #F2F5F6; |
||||
display: flex; |
||||
overflow-y: auto; |
||||
.left{ |
||||
width: 100%; |
||||
height: 60%; |
||||
margin: 20px 20px 10px 50px; |
||||
background-color: #FFFFFF; |
||||
border-radius: 16px ; |
||||
.top{ |
||||
width: 100%; |
||||
box-sizing: border-box; |
||||
cursor:pointer; |
||||
// height: 40px; |
||||
font-size: 18px; |
||||
line-height: 40px; |
||||
padding: 0 20px 20px 0; |
||||
font-weight: 600; |
||||
color: rgb(161, 161,161); |
||||
text-align: right; |
||||
} |
||||
.select{ |
||||
color: rgb(38,38,38); |
||||
} |
||||
#zhidui{ |
||||
width: 100%; |
||||
height: 50%; |
||||
position: absolute; |
||||
top: 120px; |
||||
//left: 40%; |
||||
//top: 45%; |
||||
//transform: translate(-50%,-60%); |
||||
} |
||||
} |
||||
.right{ |
||||
width: 228px; |
||||
height: 60%; |
||||
margin: 20px 20px 10px 10px; |
||||
background-color: #07CDCF; |
||||
border-radius: 16px ; |
||||
display: flex; |
||||
flex-direction: column; |
||||
.rightone{ |
||||
//margin-top: 80px; |
||||
margin-left: 24px; |
||||
color:#FFFFFF; |
||||
display: flex; |
||||
flex-direction: column; |
||||
position: absolute; |
||||
top: 110px; |
||||
} |
||||
.righttwo{ |
||||
margin-top: 100px; |
||||
margin-left: 24px; |
||||
button{ |
||||
width: 180px; |
||||
height: 44px; |
||||
color: #FFFFFF; |
||||
background: rgba(255,255,255,0.6); |
||||
opacity: 1; |
||||
border-radius: 8px; |
||||
border: none; |
||||
font-size: 18px; |
||||
outline: none; |
||||
cursor: pointer; |
||||
} |
||||
.clickButton{ |
||||
background-color: #FFFFFF; |
||||
color: #07CDCF; |
||||
} |
||||
} |
||||
.rightthree{ |
||||
width: 100%; |
||||
margin-top: 110px; |
||||
img{ |
||||
float: right; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
@ -1,21 +1,199 @@
|
||||
import { Component, OnInit } from "@angular/core"; |
||||
import { Router } from "@angular/router"; |
||||
|
||||
import { Router, NavigationExtras } from "@angular/router"; |
||||
declare var echarts: any; |
||||
@Component({ |
||||
selector: "app-echarts", |
||||
templateUrl: "./echarts.component.html", |
||||
styleUrls: ["./echarts.component.scss"], |
||||
}) |
||||
export class EchartsComponent implements OnInit { |
||||
constructor(private router: Router) {} |
||||
constructor(public router: Router) {} |
||||
|
||||
ngOnInit(): void { |
||||
window.setTimeout(() => { |
||||
this.initCharts(); |
||||
}, 0); |
||||
} |
||||
|
||||
zhutu; //柱状图实例
|
||||
zhiNameData = { |
||||
name: [ |
||||
"南宁支队", |
||||
"柳州支队", |
||||
"桂林支队", |
||||
"梧州支队", |
||||
"北海支队", |
||||
"防尘岗支队", |
||||
"钦州支队", |
||||
"贵港支队", |
||||
"玉林支队", |
||||
"百色支队", |
||||
"贺州支队", |
||||
"河池支队", |
||||
"来宾支队", |
||||
"崇左支队", |
||||
], |
||||
frequency: [18, 17, 14, 14, 12, 11, 15, 13, 12, 16, 16, 13, 18, 17, 12], |
||||
number:[180, 170, 140, 140, 120, 110, 150, 130, 120, 160, 160, 130, 180, 170, 120] |
||||
|
||||
}; |
||||
daNameData = { |
||||
name: [ |
||||
"青秀大队", |
||||
"特勤大队", |
||||
"兴宁大队", |
||||
"江南大队", |
||||
"西乡塘大队", |
||||
"良庆大队", |
||||
"邕宁大队", |
||||
"高新大队", |
||||
"华侨大队", |
||||
"经开大队", |
||||
"武鸣大队", |
||||
"隆安大队", |
||||
"马山大队", |
||||
"上林大队", |
||||
"宾阳大队", |
||||
"横县大队", |
||||
], |
||||
frequency: [2, 3, 1, 1, 2, 1, 0, 1, 1, 0, 2, 0, 0, 1, 0], |
||||
number: [30, 30, 10, 10, 20, 10, 0, 10, 10, 0, 20, 0, 0, 10, 0], |
||||
}; |
||||
|
||||
jiuNameData = { |
||||
name:[ |
||||
"南宁市青秀区仙葫消防救援站", |
||||
"南宁市青秀区凤岭消防救援站", |
||||
"南宁市青秀区柳沙消防救援站", |
||||
], |
||||
frequency:[1, 1, 1], |
||||
number:[8, 11, 11] |
||||
}; |
||||
|
||||
ngOnInit(): void {} |
||||
ok1() { |
||||
window.open("/home/statistic-examination/station-examinee") |
||||
// this.router.navigate(["/home/statistic-examination/station-examinee"]); //登陆成功跳转页面
|
||||
staticExam = false; //考试统计
|
||||
upStatic = false; //发布考试统计
|
||||
//考试统计按钮
|
||||
staticecam() { |
||||
this.staticExam = true; |
||||
this.upStatic = false; |
||||
} |
||||
ok2() { |
||||
window.open("/home/statistic-examination/examinee-papers") |
||||
// this.router.navigate(["/home/statistic-examination/examinee-papers"]); //登陆成功跳转页面
|
||||
//发布考试按钮
|
||||
upexam() { |
||||
this.staticExam = false; |
||||
this.upStatic = true; |
||||
} |
||||
title = "考试频次(次)"; |
||||
examinationIndex = false; |
||||
color = "#41CDFC"; |
||||
//切换
|
||||
switch(e) { |
||||
if (e == "频次") { |
||||
this.title = "考试频次(次)"; |
||||
this.examinationIndex = false; |
||||
this.color = "#41CDFC"; |
||||
} else { |
||||
this.title = "考试人数(个)"; |
||||
this.examinationIndex = true; |
||||
this.color = "#FF8678"; |
||||
} |
||||
this.initCharts(); |
||||
} |
||||
//点击柱状图
|
||||
|
||||
initCharts() { |
||||
var detailPlanEchart = echarts.init(document.getElementById("zhidui")); |
||||
var option = { |
||||
title: { |
||||
text: this.title, |
||||
left: "5%", // 位置
|
||||
textStyle: { |
||||
color: "#A1A1A1", |
||||
fontSize: "16px", |
||||
textAlign: "left", |
||||
}, |
||||
}, |
||||
xAxis: { |
||||
type: "category", |
||||
data: this.zhiNameData.name, |
||||
axisLabel: { |
||||
fontSize: 12, |
||||
lineHeight: 31, |
||||
}, |
||||
axisLine: { |
||||
show: false, |
||||
}, |
||||
splitLine: { |
||||
show: false, |
||||
}, |
||||
axisTick: { |
||||
show: false, |
||||
}, |
||||
}, |
||||
yAxis: { |
||||
type: "value", |
||||
axisLabel: { |
||||
fontSize: 18, |
||||
lineHeight: 31, |
||||
}, |
||||
axisTick: { |
||||
show: false, |
||||
}, |
||||
axisLine: { |
||||
show: false, |
||||
}, |
||||
splitLine: { |
||||
show: true, |
||||
lineStyle: { |
||||
opacity: 0.6, |
||||
type: "dashed", |
||||
}, |
||||
}, |
||||
show: true, |
||||
}, |
||||
series: [ |
||||
{ |
||||
data: this.examinationIndex?this.zhiNameData.number: this.zhiNameData.frequency, |
||||
type: "bar", |
||||
// showBackground: true,
|
||||
backgroundStyle: { |
||||
color: "#F2F5F6", |
||||
}, |
||||
barWidth: 40, |
||||
color: this.color, |
||||
itemStyle: { |
||||
normal: { |
||||
label: { |
||||
show: true, //开启显示
|
||||
position: "top", //在上方显示
|
||||
textStyle: { |
||||
//数值样式
|
||||
color: "black", |
||||
fontSize: 12, |
||||
}, |
||||
}, |
||||
}, |
||||
}, |
||||
|
||||
// barWidth:"24px"
|
||||
}, |
||||
], |
||||
}; |
||||
detailPlanEchart.on("click", (e) => { |
||||
this.clickFunc(e); |
||||
}); |
||||
detailPlanEchart.setOption(option); |
||||
} |
||||
clickFunc(e) { |
||||
console.log(e); |
||||
|
||||
if (e.name.indexOf("支队") != -1) { |
||||
this.zhiNameData = this.daNameData; |
||||
this.initCharts(); |
||||
} else if (e.name.indexOf("大队") != -1) { |
||||
this.zhiNameData = this.jiuNameData; |
||||
this.initCharts(); |
||||
} else { |
||||
this.router.navigate(["home/statistic-capacity"]); |
||||
} |
||||
} |
||||
} |
||||
|
||||
Loading…
Reference in new issue