数据总览UI

src/views/learning/item-data-all.vue

@@ -23,11 +23,19 @@
         <!-- <div v-if="index+1 !== cardData.length" class="line"></div> -->
       </div>
     </div>
-    <div class="chart" id="distributeChart" ref="distributeChart"></div>
+    <div class="chart-distributeChart">
+      <div class="distributeChart" id="distributeChart" ref="distributeChart"></div>
+      <div class="data-text"></div>
+    </div>
     <div class="chart" id="recordChart" ref="recordChart"></div>
-    <el-select class="chart-select" v-model="rankType" placeholder="请选择">
-      <el-option v-for="item in rankOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
-    </el-select>
+    <!-- <el-select class="chart-select" v-model="rankType" placeholder="请选择">
+      <el-option
+        v-for="item in rankOptions"
+        :key="item.value"
+        :label="item.label"
+        :value="item.value"
+      ></el-option>
+    </el-select> -->
     <div class="chart" id="certificateChart" ref="certificateChart"></div>
     <div class="chart" id="durationChart" ref="durationChart"></div>
   </div>
@@ -69,12 +77,12 @@ export default {
       rankOptions: [
         {
           value: 1,
-          label: '按获证比例排名',
+          label: "按获证比例排名"
         },
         {
           value: 2,
-          label: '按参与人数排名',
-        },
+          label: "按参与人数排名"
+        }
       ]
     };
   },
@@ -664,7 +672,24 @@ export default {
     margin: 20px auto 0 auto;
     width: 100%;
     height: 350px;
-    border: 1px solid #dedede;
+  }
+  .chart-distributeChart {
+    position: relative;
+    margin: 20px auto 0 auto;
+    height: 350px;
+    width: 100%;
+    .distributeChart {
+      position: relative;
+      float: left;
+      width: 70%;
+      height: 350px;
+    }
+    .data-text {
+      position: relative;
+      float: left;
+      width: 28%;
+      height: 350px;
+    }
   }
 }
 </style>
\ No newline at end of file