From 6f31baa0c3e501147c8ef83b2a54ee51f497b517 Mon Sep 17 00:00:00 2001 From: jongbowen <970029315@qq.com> Date: Mon, 15 May 2023 16:16:07 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E8=BF=94=E5=9B=9E?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../echarts/echarts.component.html | 26 ++++---- .../echarts/echarts.component.scss | 34 +++++++++-- .../echarts/echarts.component.ts | 59 ++++++++++++++++--- 3 files changed, 95 insertions(+), 24 deletions(-) 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 567733e..b8f703c 100644 --- a/src/app/examiner/statistic-analysis/examStatistics/echarts/echarts.component.html +++ b/src/app/examiner/statistic-analysis/examStatistics/echarts/echarts.component.html @@ -1,13 +1,19 @@ - -
- -
-
- 考试频次 | - 考试人数 -
-
-
+
+
+
+ +
+
+ 考试频次 + | + 考试人数 +
+
+
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 06e38d9..15429b1 100644 --- a/src/app/examiner/statistic-analysis/examStatistics/echarts/echarts.component.scss +++ b/src/app/examiner/statistic-analysis/examStatistics/echarts/echarts.component.scss @@ -14,23 +14,47 @@ .top{ width: 100%; box-sizing: border-box; + display: flex; cursor:pointer; // height: 40px; font-size: 18px; line-height: 40px; - padding: 0 20px 20px 0; + padding: 10px 50px 0px 0; font-weight: 600; color: rgb(161, 161,161); - text-align: right; + // text-align: right; + button { + border: none; + // color: white; + padding: 8px 20px; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 13px; + margin: 4px 2px; + cursor: pointer; + border-radius: 5px; + outline: 0 none !important; + } + .top-left{ + width: 50%; + padding-left: 50px; + text-align: left; + } + .top-right{ + width: 50%; + text-align: right; + } } .select{ color: rgb(38,38,38); } #zhidui{ width: 100%; - height: 50%; - position: absolute; - top: 120px; + height: 80%; + // margin-top: -60px; + // position: absolute; + // top: 100px; //left: 40%; //top: 45%; //transform: translate(-50%,-60%); 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 b5319d6..a9298a8 100644 --- a/src/app/examiner/statistic-analysis/examStatistics/echarts/echarts.component.ts +++ b/src/app/examiner/statistic-analysis/examStatistics/echarts/echarts.component.ts @@ -16,7 +16,7 @@ export class EchartsComponent implements OnInit { } zhutu; //柱状图实例 - zhiNameData = { + zhiData = { name: [ "南宁支队", "柳州支队", @@ -37,7 +37,28 @@ export class EchartsComponent implements OnInit { number:[180, 170, 140, 140, 120, 110, 150, 130, 120, 160, 160, 130, 180, 170, 120] }; - daNameData = { + zhiData2 = { + 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] + + }; + daData = { name: [ "青秀大队", "特勤大队", @@ -60,7 +81,7 @@ export class EchartsComponent implements OnInit { number: [30, 30, 10, 10, 20, 10, 0, 10, 10, 0, 20, 0, 0, 10, 0], }; - jiuNameData = { + jiuData = { name:[ "南宁市青秀区仙葫消防救援站", "南宁市青秀区凤岭消防救援站", @@ -98,8 +119,20 @@ export class EchartsComponent implements OnInit { } this.initCharts(); } - //点击柱状图 - + //后退 + level=0 + back(){ + if(this.level!=0){ + if(this.level==1){ + this.zhiData=this.zhiData2 + + }else{ + this.zhiData=this.daData + } + this.initCharts() + this.level=this.level-1 + } + } initCharts() { var detailPlanEchart = echarts.init(document.getElementById("zhidui")); var option = { @@ -114,7 +147,7 @@ export class EchartsComponent implements OnInit { }, xAxis: { type: "category", - data: this.zhiNameData.name, + data: this.zhiData.name, axisLabel: { fontSize: 12, lineHeight: 31, @@ -150,9 +183,15 @@ export class EchartsComponent implements OnInit { }, show: true, }, + grid: { + left: '5%', + right: '5%', + bottom: '1%', + containLabel: true + } , series: [ { - data: this.examinationIndex?this.zhiNameData.number: this.zhiNameData.frequency, + data: this.examinationIndex?this.zhiData.number: this.zhiData.frequency, type: "bar", // showBackground: true, backgroundStyle: { @@ -187,10 +226,12 @@ export class EchartsComponent implements OnInit { console.log(e); if (e.name.indexOf("支队") != -1) { - this.zhiNameData = this.daNameData; + this.zhiData = this.daData; + this.level=1 this.initCharts(); } else if (e.name.indexOf("大队") != -1) { - this.zhiNameData = this.jiuNameData; + this.zhiData = this.jiuData; + this.level=2 this.initCharts(); } else { this.router.navigate(["home/statistic-capacity"]);