修改UI

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

@@ -10,7 +10,7 @@
       <a-row :gutter="24">
         <a-col :xl="24" :style="{ marginBottom: '24px' }">
           <div class="container">
-            <div id="map1" style="width: 660px; height: 400px;"></div>
+            <div id="map1" style="width: 100%; height: 400px;"></div>
           </div>
         </a-col>
       </a-row>
@@ -44,13 +44,19 @@ export default {
     };
   },
   methods: {
-    dataChart() {
+    dataChart(data) {
-      // 基于准备好的dom，初始化echarts实例  这个和上面的main对应
+      let xData = [];
+      let yData = [];
+      for (let key in data) {
+        xData.push(key);
+        // 将数据转换为百分比（加上%）
+        yData.push((data[key] * 100).toFixed(2));
+      }
       let myChart = echarts.init(document.getElementById("map1"));
       // 指定图表的配置项和数据
       let option = {
         title: {
-          text: "总上座人数对比",
+          text: "本批次学院通过率排名",
         },
         tooltip: {
           trigger: 'axis',
@@ -58,37 +64,34 @@ export default {
             type: 'shadow'
           }
         },
-        legend: {
+        grid: {
-          data: ["英国", "中国"],//上方的标签
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
         },
-        xAxis: {
+        xAxis: [
-          data: ["一级", "二级", "三级", "四级"],
+          {
-          axisLabel: {
+            type: 'category',
-            interval: 0,
+            data: xData,
-            // rotate: 30
+            axisTick: {
+              alignWithLabel: true
             }
-        },
+          }
-        yAxis: {
+        ],
-          name: '总上座人数(万)',
+        yAxis: [
-        },
+          {
+            type: 'value'
+          }
+        ],
         series: [
           {
-            name: "英国",
+            name: 'Direct',
-            type: "bar",
+            type: 'bar',
-            data: [1450, 1100, 450, 300],
+            barWidth: '60%',
-            label: {
+            data: yData
-              formatter: '{@value}'
           }
-          },
+        ]
-          {
-            name: "中国",
-            type: "bar",
-            data: [552, 180, 200, 0],
-            label: {
-              formatter: '{@value}'
-            }
-          },
-        ],
       };
       // 使用刚指定的配置项和数据显示图表。
       myChart.setOption(option);
@@ -96,33 +99,31 @@ export default {
     // 获取批次数据
     async getBatch() {
       const getBatch = await defHttp.get({ url: this.Url.getBatch });
-
       this.batchOptions = getBatch.batches;
       this.batch = this.batchOptions[0].value;
       this.level = this.levelOptions[0].value;
-
       this.query();
     },
     // 查询数据
     async query() {
+      let data = null;
       try {
         this.loading = true;
         let params = {
           batch: this.batch,
           level: 'cet4'
         }
-        const data = await defHttp.get({ url: this.Url.getRate, params });
+        data = await defHttp.get({ url: this.Url.getRate, params });
       } finally {
         this.loading = false;
         this.$nextTick(() => {
-          this.dataChart();
+          this.dataChart(data);
         })
       }
     }
   },
   mounted() {
     this.getBatch();
-    this.dataChart();
   }
 
 }

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

@@ -3,15 +3,13 @@
     <a-card title="按批次分析" :loading="loading" :bordered="false">
       <template #extra>
         <a-select v-model:value="college" style="width: 300px" :options="collegeOptions"></a-select>
-        <!-- <a-select v-model:value="batch" style="margin-left: 10px;width: 120px" :options="batchOptions"></a-select> -->
-        <!-- <a-select v-model:value="level" style="margin-left: 10px;width: 120px" :options="levelOptions"></a-select> -->
         <a-button style="margin-left: 10px;" type="primary" @click="query">查询</a-button>
       </template>
       <div>
         <a-row :gutter="24">
           <a-col :xl="24" :style="{ marginBottom: '24px' }">
             <div class="container">
-              <div id="map1" style="width: 660px; height: 400px;"></div>
+              <div id="map1" style="width: 100%; height: 400px;"></div>
             </div>
           </a-col>
         </a-row>
@@ -46,13 +44,23 @@ export default {
     };
   },
   methods: {
-    dataChart() {
+    dataChart(data) {
-      // 基于准备好的dom，初始化echarts实例  这个和上面的main对应
+      let xData = [];
+      let yData = [];
+      for (let key in data) {
+        xData.push(key);
+        // 将数据转换为百分比（加上%）
+        yData.push((data[key] * 100).toFixed(2));
+      }
       let myChart = echarts.init(document.getElementById("map1"));
       // 指定图表的配置项和数据
       let option = {
         title: {
-          text: "总上座人数对比",
+          text: "学院通过率变化",
+        },
+        xAxis: {
+          type: 'category',
+          data: xData,
         },
         tooltip: {
           trigger: 'axis',
@@ -60,37 +68,15 @@ export default {
             type: 'shadow'
           }
         },
-        legend: {
-          data: ["英国", "中国"],//上方的标签
-        },
-        xAxis: {
-          data: ["一级", "二级", "三级", "四级"],
-          axisLabel: {
-            interval: 0,
-            // rotate: 30
-          }
-        },
         yAxis: {
-          name: '总上座人数(万)',
+          type: 'value'
         },
         series: [
           {
-            name: "英国",
+            data: yData,
-            type: "bar",
+            type: 'line'
-            data: [1450, 1100, 450, 300],
-            label: {
-              formatter: '{@value}'
           }
-          },
+        ]
-          {
-            name: "中国",
-            type: "bar",
-            data: [552, 180, 200, 0],
-            label: {
-              formatter: '{@value}'
-            }
-          },
-        ],
       };
       // 使用刚指定的配置项和数据显示图表。
       myChart.setOption(option);
@@ -109,24 +95,24 @@ export default {
     },
     // 查询数据
     async query() {
+      let data = null;
       try {
         this.loading = true;
         let params = {
           college: this.college,
           level: 'cet4'
         }
-        const data = await defHttp.get({ url: this.Url.getRate, params });
+        data = await defHttp.get({ url: this.Url.getRate, params });
       } finally {
         this.loading = false;
         this.$nextTick(() => {
-          this.dataChart();
+          this.dataChart(data);
         })
       }
     }
   },
   mounted() {
     this.getBatch();
-    this.dataChart();
   }
 
 }