添加返回

src/app/examiner/statistic-analysis/examStatistics/echarts/echarts.component.html

@@ -1,13 +1,19 @@
-
-
 <div class="conter">
-   
+  <div class="left">
-    <div class="left">
+    <div class="top">
-        <div class="top">
+      <div class="top-left">
-         <span (click)="switch('频次')" [ngClass]="{'select': !examinationIndex}">考试频次</span> |
+        <button *ngIf="level!=0" (click)="back()">返回上一级</button>
-         <span (click)="switch('人数')" [ngClass]="{'select': examinationIndex}">考试人数</span>   
+      </div>
-        </div>
+      <div class="top-right">
-        <div id="zhidui">
+        <span (click)="switch('频次')" [ngClass]="{ select: !examinationIndex }"
-        </div>
+          >考试频次</span
+        >
+        |
+        <span (click)="switch('人数')" [ngClass]="{ select: examinationIndex }"
+          >考试人数</span
+        >
+      </div>
     </div>
+    <div id="zhidui"></div>
+  </div>
 </div>

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%;
+        height: 80%;
-        position: absolute;
+        // margin-top: -60px;
-        top: 120px;
+        // position: absolute;
+        // top: 100px;
         //left: 40%;
         //top: 45%;
         //transform: translate(-50%,-60%);

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"]);