diff --git a/src/app/examiner/statistic-analysis/examStatistics/echarts/echarts.component.html b/src/app/examiner/statistic-analysis/examStatistics/echarts/echarts.component.html
index 1e55017..567733e 100644
--- a/src/app/examiner/statistic-analysis/examStatistics/echarts/echarts.component.html
+++ b/src/app/examiner/statistic-analysis/examStatistics/echarts/echarts.component.html
@@ -1,2 +1,13 @@
-<button (click)="ok1()">按钮1</button>
-<button (click)="ok2()">按钮2</button>
\ No newline at end of file
+
+
+<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>
diff --git a/src/app/examiner/statistic-analysis/examStatistics/echarts/echarts.component.scss b/src/app/examiner/statistic-analysis/examStatistics/echarts/echarts.component.scss
index e69de29..06e38d9 100644
--- a/src/app/examiner/statistic-analysis/examStatistics/echarts/echarts.component.scss
+++ b/src/app/examiner/statistic-analysis/examStatistics/echarts/echarts.component.scss
@@ -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;
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/app/examiner/statistic-analysis/examStatistics/echarts/echarts.component.ts b/src/app/examiner/statistic-analysis/examStatistics/echarts/echarts.component.ts
index 4eff659..b5319d6 100644
--- a/src/app/examiner/statistic-analysis/examStatistics/echarts/echarts.component.ts
+++ b/src/app/examiner/statistic-analysis/examStatistics/echarts/echarts.component.ts
@@ -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]
+ };
+
+ staticExam = false; //考试统计
+ upStatic = false; //发布考试统计
+ //考试统计按钮
+ staticecam() {
+ this.staticExam = true;
+ this.upStatic = false;
+ }
+ //发布考试按钮
+ 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();
+ }
+ //点击柱状图
- ngOnInit(): void {}
- ok1() {
- window.open("/home/statistic-examination/station-examinee")
- // this.router.navigate(["/home/statistic-examination/station-examinee"]); //登陆成功跳转页面
+ 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);
}
- ok2() {
- window.open("/home/statistic-examination/examinee-papers")
- // this.router.navigate(["/home/statistic-examination/examinee-papers"]); //登陆成功跳转页面
+ 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"]);
+ }
}
}