首页优化

src/views/cet/cet-ana-1.vue

@@ -64,7 +64,7 @@
       <a-row :gutter="24">
         <a-col :xl="24" :style="{ marginBottom: '24px' }">
           <div class="container">
-            <div id="map1" style="width: 100%; height: 400px;"></div>
+            <div id="map1" style="width: 100%; height: 600px;"></div>
           </div>
         </a-col>
       </a-row>
@@ -196,10 +196,12 @@ export default {
         seriesData.push({
           name: i + '级累计总通过率',
           type: 'bar',
-          // barWidth: '30%',
+          //设置柱状图大小
+					barWidth: "10%",
           data: yData,
+          //柱子间距
+          barGap: '30%',
           //颜色
-
           itemStyle: {
             normal: {
               label: {
@@ -208,7 +210,7 @@ export default {
                 formatter: '{c}%',
                 textStyle: { //数值样式
                   color: 'black',
-                  fontSize: 13
+                  fontSize: 10
                 },
               },
               color: colors[j++]
@@ -253,9 +255,6 @@ export default {
         title: {
           text: "本批次学院通过率排名",
         },
-
-        
-
         tooltip: {
           trigger: 'axis',
           axisPointer: {
@@ -290,7 +289,7 @@ export default {
           left: '3%',
           right: '4%',
           bottom: '3%',
-          containLabel: true
+          containLabel: true,
         },
         xAxis: [
           {
@@ -323,7 +322,9 @@ export default {
           name: '累计总通过率',
           type: 'bar',
           data: seriesData[0].data,
-          barWidth: '60%',
+          //设置柱状图大小
+					barWidth: 20,
+          // barWidth: '60%',
           itemStyle: {
             normal: {
               label: {

src/views/dashboard/Analysis/index.vue

@@ -14,14 +14,14 @@
             <a-table :dataSource="dataSourceCet4" :columns="columns" :pagination='false' bordered>
               <template v-slot:passRateSlot>
                 累计总通过率
-                <a-tooltip title="累计通过人数  /  (学院 / 专业总人数)" placement="top">
+                <a-tooltip :title="'累计通过人数 / ' + this.totalName + '总人数'" placement="top">
                   <a-icon type="question-circle" />
                 </a-tooltip>
               </template>
             </a-table>
             <div style="display: flex; justify-content: space-between; font-size: 15px; margin-top: 10px;"
               v-if="total && total > 0">
-              <span>学院 / 专业总人数: {{ total }}</span>
+              <span>{{ this.totalName }}总人数：{{ total }}</span>
               <span>累计通过人数: {{ passNumberBottom }}</span>
               <span>累计总通过率: {{ passRateBottom }}</span>
             </div>
@@ -52,7 +52,7 @@ export default {
       dataSourceCet4: [],
       columns: [
         {
-          title: '年级',
+          title: '学年',
           dataIndex: 'grade',
           key: 'grade',
           align: 'center',
@@ -73,7 +73,7 @@ export default {
           align: 'center',
         },
         {
-          title: '新通过人数',
+          title: '通过人数',
           dataIndex: 'passNumber',
           key: 'passNumber',
           align: 'center',
@@ -101,6 +101,7 @@ export default {
         getCollegeMajor: '/cet/getCollegeMajor'
       },
       total: 0,
+      totalName: '',
       passNumberBottom: 0,
       passRateBottom: 0,
       passRatePie: [],
@@ -187,6 +188,7 @@ export default {
         console.log("tableData", tableData);
         this.dataSourceCet4 = tableData;//表格数据
         this.total = result.total;//总人数
+        this.totalName = result.totalName;//总人数名称
         this.passNumberBottom = result.passNumber;//通过人数
         this.passRateBottom = (result.passRate * 100).toFixed(1) + '%';//通过率
         //内置饼图
@@ -232,54 +234,42 @@ export default {
           top: '5%',
           left: 'center'
         },
+        color: ['#ff2d51', '#ff4777', '#f47983', '#ffb3a7', '#91cc75'],
 
         series: [
           //内圈饼图
-          {
+          // {
-            name: '四级通过率',
+          //   name: '四级通过率',
-            type: 'pie',
+          //   type: 'pie',
-            radius: ['0', '30%'],
+          //   radius: ['0', '30%'],
-            avoidLabelOverlap: false,
+          //   avoidLabelOverlap: false,
-            itemStyle: {
+          //   itemStyle: {
-              borderRadius: 3,
+          //     borderRadius: 3,
-              borderColor: '#fff',
+          //     borderColor: '#fff',
-              borderWidth: 2,
+          //     borderWidth: 2,
-              normal: {
+          //   },
-                color: function (colors) {
+          //   label: {
-                  var colorList = ['#00CD66', '#FF6A6A'];
+          //     position: 'inner',
-                  return colorList[colors.dataIndex];
+          //     fontSize: 14
-                }
+          //   },
-              },
+          //   emphasis: {
-            },
+          //     label: {
-            label: {
+          //       show: true,
-              position: 'inner',
+          //       fontSize: 20,
-              fontSize: 14
+          //       fontWeight: 'bold'
-            },
+          //     }
-            emphasis: {
+          //   },
-              label: {
+          //   data: this.passRatePie
-                show: true,
+          // },
-                fontSize: 20,
-                fontWeight: 'bold'
-              }
-            },
-            data: this.passRatePie
-          },
           //外圈饼图
           {
             name: '四级通过率',
             type: 'pie',
-            radius: ['40%', '60%'],
+            radius: ['35%', '60%'],
-            avoidLabelOverlap: false,
             itemStyle: {
               borderRadius: 10,
               borderColor: '#fff',
               borderWidth: 2,
-              normal: {
-                color: function (colors) {
-                  var colorList = ['#008B45', '#00CD66', '#00EE76', '#baf5bf', '#FF6A6A'];
-                  return colorList[colors.dataIndex];
-                }
-              },
             },
             label: {
               show: true,
@@ -287,15 +277,17 @@ export default {
               overflow: 'truncate'
             },
             emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: 'rgba(0, 0, 0, 0.5)'
+              },
               label: {
                 show: true,
-                fontSize: 20,
+                fontSize: 15,
                 fontWeight: 'bold'
               }
             },
-            // labelLine: {
-            //   show: false
-            // },
             data: piedata
           }
         ]