数据懒加载

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

@@ -29,11 +29,11 @@
         </a-col>
 
         <a-col :xl="8">
-          <a-card style="margin-bottom: 10px">
+          <a-card :loading="participate_Piechartloading" style="margin-bottom: 10px">
             <div style="width: 100%; height: 210px; padding: 10px" class="participate_Piechart" id="participate_Piechart"></div>
           </a-card>
 
-          <a-card>
+          <a-card :loading="pass_Piechartloading">
             <div style="width: 100%; height: 210px; padding: 10px" class="pass_Piechart" id="pass_Piechart"></div>
           </a-card>
         </a-col>
@@ -59,6 +59,8 @@
           getRateByEntryDate: '/cet/getRateByEntryDate',
         },
         loading: false,
+        participate_Piechartloading: false,
+        pass_Piechartloading: false,
         collegeOptions: [],
         collegeMajorOptions: [],
         batchOptions: [],
@@ -163,14 +165,13 @@
         let major = this.collegeMajor[1];
         console.log(college, major, 'college major');
 
-        let myChart = echarts.init(document.getElementById('participate_Piechart'));
-
         let queryParams = {
           college: college,
           major: major,
           level: 'cet4',
         };
         let url = this.Url.getRateByMajorAndLastestBatch;
+        this.participate_Piechartloading = true;
         console.log(queryParams, 'queryParams');
 
         let result = await defHttp.post({ url: url, data: queryParams });
@@ -198,7 +199,7 @@
           grid: {
             left: '20%', // 增加左边距，可以根据需要调整
             right: '5%', // 右边距
-            top: '15%', // 上边距
+            top: '20%', // 上边距
             bottom: '10%', // 下边距
           },
           title: {
@@ -206,7 +207,7 @@
             left: 'top',
             top: '0%',
             textStyle: {
-              fontSize: 12,
+              fontSize: 14,
             },
           },
           tooltip: {
@@ -245,14 +246,12 @@
               },
             },
           ],
+          animationDurationUpdate: 500,
         };
-        myChart.setOption(option);
+        this.participate_Piechartloading = false;
-        myChart.dispatchAction({
+        this.$nextTick(() => {
-          type: 'highlight',
+          var myChart = echarts.init(document.getElementById('participate_Piechart'));
-          seriesIndex: 1,
+          myChart.setOption(option);
-        });
-        window.addEventListener('resize', function () {
-          myChart.resize();
         });
       },
 
@@ -260,7 +259,6 @@
       async draPieChart_Pass() {
         //console.log(this.passRatePie);
         //console.log('piedata', piedata);
-        let myChart = echarts.init(document.getElementById('pass_Piechart'));
         let college = this.collegeMajor[0];
         let major = this.collegeMajor[1];
         let queryParams = {
@@ -269,6 +267,7 @@
           level: 'cet4',
         };
         let url = this.Url.getRateByEntryDate;
+        this.pass_Piechartloading = true;
         console.log(queryParams, 'queryParams');
         let result = await defHttp.post({ url: url, data: queryParams });
         if (!result) {
@@ -328,10 +327,14 @@
               },
             },
           ],
+          animationDurationUpdate: 500,
         };
-        myChart.setOption(option);
+        this.pass_Piechartloading = false;
+        this.$nextTick(() => {
+          var myChart = echarts.init(document.getElementById('pass_Piechart'));
+          myChart.setOption(option);
+        });
       },
-
       // 获取批次数据
       async getBatch() {
         const getBatch = await defHttp.get({ url: this.Url.getBatch });

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

@@ -30,11 +30,11 @@
         </a-col>
 
         <a-col :xl="8" style="padding-left: 10px">
-          <a-card style="margin-bottom: 10px">
+          <a-card :loading="participate_Piechartloading" style="margin-bottom: 10px">
             <div style="width: 100%; height: 210px; padding: 10px" class="participate_Piechart" id="participate_Piechart"></div>
           </a-card>
 
-          <a-card style="height: 268px">
+          <a-card :loading="tableloading" style="height: 268px">
             <div>
               <a-table
                 :dataSource="dataSourceCet4"
@@ -94,6 +94,8 @@
           getCollegeMajor: '/cet/getCollegeMajor',
         },
         loading: false,
+        participate_Piechartloading: false,
+        tableloading: false,
         collegeOptions: [],
         collegeMajorOptions: [],
         batchOptions: [],
@@ -289,88 +291,16 @@
           this.loading = false;
           this.$nextTick(() => {
             this.dataChart(resultData.data);
-            //this.draPieChart_Pass();
+
             this.draPieChart_Participate();
           });
         }
       },
 
-      //绘画饼图--该批次每一年级的参加人数，通过人数，通过率表格
-      //draPieChart_Pass() {
-      //  //console.log(this.passRatePie);
-      //  //console.log('piedata', piedata);
-      //  let myChart = echarts.init(document.getElementById('pass_Piechart'));
-
-      //  let option = {
-      //    tooltip: {
-      //      trigger: 'item',
-      //      conginee: false,
-      //      //字体大小
-      //      itemStytle: {
-      //        fontSize: 100,
-      //      },
-      //    },
-      //    title: {
-      //      text: '该批次每一年级的参加人数，通过人数，通过率表格',
-      //      left: 'top',
-      //      top: '0%',
-      //      textStyle: {
-      //        fontSize: 12,
-      //      },
-      //    },
-      //    legend: {
-      //      top: '5%',
-      //      left: 'center',
-      //    },
-      //    color: ['#ec2e30', '#c75af1', '#2b9eef', '#eee03f', '#2aed91', '#c5ed3c'],
-
-      //    series: [
-      //      {
-      //        name: '学院/专业该批次通过人数饼图',
-      //        type: 'pie',
-      //        radius: ['0', '100%'],
-      //        top: 80,
-      //        itemStyle: {
-      //          borderRadius: 5,
-      //          borderColor: '#fff',
-      //          borderWideth: 2,
-      //        },
-      //        label: {
-      //          show: true,
-      //          fontSize: 12,
-      //          overflow: 'truncate',
-      //        },
-      //        emphasis: {
-      //          itemStyle: {
-      //            shadowBlur: 10,
-      //            shadowOffsetX: 0,
-      //            shadowColor: 'rgba(0, 0, 0, 0.5)',
-      //          },
-      //          label: {
-      //            show: true,
-      //            fontSize: 15,
-      //            fontWeight: 'bold',
-      //          },
-      //        },
-      //        data: [
-      //          { value: 1048, name: '你好' },
-      //          { value: 735, name: '不好' },
-      //          { value: 580, name: '孤寡' },
-      //          { value: 484, name: '小鸟伏特加' },
-      //          { value: 300, name: '喜喜' },
-      //        ],
-      //      },
-      //    ],
-      //  };
-      //  myChart.setOption(option);
-      //},
-
       //绘画饼图--该批次每一年级的通过率饼图
       async draPieChart_Participate() {
         //console.log(this.passRatePie);
         //console.log('piedata', piedata);
-        let myChart = echarts.init(document.getElementById('participate_Piechart'));
-
         let queryParams = {
           batch: this.batch,
           college: this.collegeMajor,
@@ -378,6 +308,8 @@
         };
         console.log(queryParams, 'queryParams');
         let url = this.Url.getRate;
+        this.participate_Piechartloading = true;
+        this.tableloading = true;
         let result = await defHttp.get({ url: url, params: queryParams });
         console.log(result, 'result');
         let chartsData = [];
@@ -481,14 +413,13 @@
               data: chartsData,
             },
           ],
+          animationDurationUpate: 500,
         };
-        myChart.setOption(option);
+        this.participate_Piechartloading = false;
-        myChart.dispatchAction({
+        this.tableloading = false;
-          type: 'highlight',
+        this.$nextTick(() => {
-          seriesIndex: 1,
+          var myChart = echarts.init(document.getElementById('participate_Piechart'));
-        });
+          myChart.setOption(option);
-        window.addEventListener('resize', function () {
-          myChart.resize();
         });
       },
     },