图表

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

@@ -1 +1,13 @@
-<p>echarts works!</p>
+
+
+<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>

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;
+        }
+      }
+    }
+}