对接统计图

src/api/modules/count.js

@@ -5,17 +5,21 @@ export default {
     INTERFACE_GET_COUNT_ARTICLE: 'admin/materials/count',
     // 获取本月新增文章数量
     INTERFACE_GET_COUNT_ARTICLE_UP: 'admin/materials/month/count',
-    // 获取文章类型比例
-    INTERFACE_GET_COUNT_ARTICLE_PROPORTION: 'admin/material/ratio',
     // 获取试题总数
     INTERFACE_GET_COUNT_QUESTIONS: 'admin/questions/count',
     // 获取本月新增试题数量
     INTERFACE_GET_COUNT_QUESTIONS_UP: 'admin/questions/month/count',
-    // 获取试题类型比例
-    INTERFACE_GET_COUNT_QUESTIONS_PROPORTION: 'admin/questions/ratio',
     // 获取考试总数
     INTERFACE_GET_COUNT_EXAMS: 'admin/exams/count',
     // 获取本月新增考试数量
     INTERFACE_GET_COUNT_EXAMS_UP: 'admin/exams/month/count',
+
+    // 查询考试平均成绩：本周、本月、全年
+    INTERFACE_GET_COUNT_BAR: '',
+
+    // 获取文章类型比例
+    INTERFACE_GET_COUNT_ARTICLE_PROPORTION: 'admin/materials/ratio',
+    // 获取试题类型比例
+    INTERFACE_GET_COUNT_QUESTIONS_PROPORTION: 'admin/questions/ratio',
   }
 };

src/components/echarts/EchartsBar.vue

@@ -47,44 +47,61 @@ export default {
   data() {
     return {};
   },
-  created() {
-    this.initDataFun(); // 初始化数据
-  },
-  mounted() {
-    this.drawLine();
-  },
+  created() {},
+  mounted() {},
   beforeDestroy() {},
   watch: {},
   computed: {},
   methods: {
     // 初始化数据
-    initDataFun() {},
-    drawLine() {
+    initDataFun(barData) {
       var dataShadow = [];
       let yMax = 500;
-      for (var i = 0; i < this.barData.series.data.length; i++) {
+      for (var i = 0; i < barData.series.data.length; i++) {
         dataShadow.push(yMax);
       }
       // 基于准备好的dom，初始化echarts实例
       let myChart = echarts.init(this.$refs.myChartBar);
       // 绘制图表
       myChart.setOption({
-        // title: { text: this.barData.title },
+        // title: { text: barData.title },
         tooltip: {},
         xAxis: {
           type: 'category',
-          data: this.barData.xAxis.data,
+          data: barData.xAxis.data,
+          // axisLabel: {
+          //   inside: true,
+          //   textStyle: {
+          //     color: '#fff',
+          //   },
+          // },
         },
         yAxis: {
           type: 'value',
-          min: this.barData.yAxis.min,
-          max: this.barData.yAxis.max,
+          // min: barData.yAxis.min,
+          // max: barData.yAxis.max,
+          // axisLabel: {
+          //   textStyle: {
+          //     color: '#1890FF',
+          //   },
+          // },
         },
         series: [
           {
-            name: this.barData.series.name,
             type: 'bar',
-            data: this.barData.series.data,
+            data: barData.series.data,
+            showBackground: true,
+            backgroundStyle: {
+              color: 'rgba(180, 180, 180, 0.2)',
+            },
+            itemStyle: {
+              color: '#1890FF',
+            },
+            emphasis: {
+              itemStyle: {
+                color: '#1890FF',
+              },
+            },
           },
         ],
       });

src/views/Home.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="app-container">
-    <a-spin :spinning="loading">
+    <a-spin :spinning="loading1 || loading2">
       <!-- 基础数据展示 -->
       <div class="count-basic-data">
         <div
@@ -24,7 +24,24 @@
       </div>
       <!-- 柱状图 -->
       <div class="common-card a-card-margin-top">
-        <EchartsBar :barData="barData" width="100%" height="400px" />
+        <div class="count-echarts-bar-title">
+          <div class="count-echarts-bar-title-left">考试平均成绩</div>
+          <div class="count-echarts-bar-title-right">
+            <div
+              :class="{
+                'count-echarts-bar-title-right-btn': true,
+                'count-echarts-bar-title-right-btn-checked':
+                  barTabChecked === item.id,
+              }"
+              v-for="(item, index) in barDataTab"
+              :key="index"
+              @click="handleEchartsTab(item)"
+            >
+              {{ item.title }}
+            </div>
+          </div>
+        </div>
+        <EchartsBar ref="echartsBarRef" width="100%" height="400px" />
       </div>
     </a-spin>
   </div>
@@ -40,15 +57,30 @@ export default {
   },
   data() {
     return {
-      loading: false, // 是否显示加载动画
+      loading1: false, // 是否显示加载动画
+      loading2: false, // 是否显示加载动画
+      loading3: false, // 是否显示加载动画
       basicList: [], // 基础数据列表
-      barData: [], // 统计图数据
+      // 统计图
+      barDataTab: [
+        { id: 1, title: '本周' },
+        { id: 2, title: '本月' },
+        { id: 3, title: '本年' },
+      ], // 统计图的tab栏
+      barTabChecked: 1, // 当前选中的tab栏ID
+      barData: {}, // 统计图数据
+      // 扇形-文章类型占比
+      articlesProportion: {},
+      // 扇形-试题类型占比
+      examsProportion: {},
     };
   },
   created() {
     this.initDataFun(); // 初始化数据
   },
-  mounted() {},
+  mounted() {
+    this.$refs.echartsBarRef.initDataFun(this.barData);
+  },
   beforeDestroy() {},
   watch: {},
   computed: {
@@ -56,36 +88,181 @@ export default {
   },
   methods: {
     // 初始化数据
-    initDataFun() {
+    async initDataFun() {
       this.basicList = [
         {
           title: '文章总数',
-          count: 126560,
+          count: 0,
           upTitle: '本月新增',
-          monthUp: 160,
+          monthUp: 0,
         },
         {
           title: '题目总数',
-          count: 126560,
+          count: 0,
           upTitle: '本月新增',
-          monthUp: 160,
+          monthUp: 0,
         },
         {
           title: '考试总数',
-          count: 126560,
+          count: 0,
           upTitle: '本月新增',
-          monthUp: 160,
+          monthUp: 0,
         },
       ];
+      this.getArticleCount(this.basicList); // 查询：文章总数
+      this.getAverageTestScore(); // 查询：统计图-考试平均成绩：本周、本月、全年
+      this.getArticlesProportion(); // 查询：文章类别占比
+    },
+    // 查询：文章总数
+    getArticleCount(basicList) {
+      this.loading1 = true;
+      this.$_http
+        .get(this.$_API.INTERFACE_GET_COUNT_ARTICLE)
+        .then((res) => {
+          basicList[0].count = res.data;
+          this.getArticleCountUp(basicList); // 查询：本月新增文章数量
+        })
+        .catch(() => {
+          this.loading1 = false;
+        });
+    },
+    // 查询：本月新增文章数量
+    getArticleCountUp(basicList) {
+      this.$_http
+        .get(this.$_API.INTERFACE_GET_COUNT_ARTICLE_UP)
+        .then((res) => {
+          basicList[0].monthUp = res.data;
+          this.getQuestionsCount(basicList); // 查询：试题总数
+        })
+        .catch(() => {
+          this.loading1 = false;
+        });
+    },
+    // 查询：试题总数
+    getQuestionsCount(basicList) {
+      this.$_http
+        .get(this.$_API.INTERFACE_GET_COUNT_QUESTIONS)
+        .then((res) => {
+          basicList[1].count = res.data;
+          this.getQuestionsCountUp(basicList); // 查询：本月新增试题数量
+        })
+        .catch(() => {
+          this.loading1 = false;
+        });
+    },
+    // 查询：本月新增试题数量
+    getQuestionsCountUp(basicList) {
+      this.$_http
+        .get(this.$_API.INTERFACE_GET_COUNT_QUESTIONS_UP)
+        .then((res) => {
+          basicList[1].monthUp = res.data;
+          this.getExamsCount(basicList); // 查询：考试总数
+        })
+        .catch(() => {
+          this.loading1 = false;
+        });
+    },
+    // 查询：考试总数
+    getExamsCount(basicList) {
+      this.$_http
+        .get(this.$_API.INTERFACE_GET_COUNT_EXAMS)
+        .then((res) => {
+          basicList[2].count = res.data;
+          this.getExamsCountUp(basicList);
+        })
+        .catch(() => {
+          this.loading1 = false;
+        });
+    },
+    // 查询：本月新增考试数量
+    getExamsCountUp(basicList) {
+      this.$_http
+        .get(this.$_API.INTERFACE_GET_COUNT_EXAMS_UP)
+        .then((res) => {
+          basicList[2].monthUp = res.data;
+          this.loading1 = false;
+        })
+        .catch(() => {
+          this.loading1 = false;
+        });
+    },
+    // 查询：统计图-考试平均成绩：本周、本月、全年
+    getAverageTestScore() {
+      this.loading2 = true;
       this.barData = {
         xAxis: {
-          data: ['期中考试', '期末考试', '7月', '8月', '9月', '10月'],
+          data: [
+            '期终考试',
+            '期中考试',
+            '期末考试',
+            '4月',
+            '5月',
+            '6月',
+            '7月',
+            '8月',
+            '9月',
+            '10月',
+            '11月',
+            '12月',
+          ],
         }, // x轴数据
         series: {
-          name: ['期中考试', '期末考试', '7月', '8月', '9月', '10月'],
-          data: [1, 2, 3, 4, 5, 6],
+          data: [
+            1113,
+            823,
+            1140,
+            1110,
+            405,
+            813,
+            823,
+            389,
+            678,
+            407,
+            1178,
+            789,
+          ],
         }, // 移入提示数据
       };
+      this.loading2 = false;
+      // this.$_http
+      //   .get(this.$_API.INTERFACE_GET_COUNT_BAR)
+      //   .then((res) => {
+      //     this.loading2 = false;
+      //   })
+    },
+    // 查询：文章类别占比
+    getArticlesProportion() {
+      this.loading3 = true;
+      this.$_http
+        .get(this.$_API.INTERFACE_GET_COUNT_ARTICLE_PROPORTION)
+        .then((res) => {
+          this.articlesProportion = res.data;
+          console.log(this.articlesProportion);
+          this.getExamssProportion(); // 查询：试题类别占比
+        })
+        .catch(() => {
+          this.loading3 = false;
+        });
+    },
+    // 查询：试题类别占比
+    getExamssProportion() {
+      this.$_http
+        .get(this.$_API.INTERFACE_GET_COUNT_QUESTIONS_PROPORTION)
+        .then((res) => {
+          this.examsProportion = res.data;
+          console.log(this.examsProportion);
+          this.loading3 = false;
+        })
+        .catch(() => {
+          this.loading3 = false;
+        });
+    },
+    // 操作：切换统计图的tab
+    handleEchartsTab(item) {
+      if (this.barTabChecked === item.id) {
+        return;
+      }
+      this.barTabChecked = item.id;
     },
   },
 };
@@ -140,5 +317,49 @@ export default {
       }
     }
   }
+  .count-echarts-bar-title {
+    width: 100%;
+    min-width: 400px;
+    height: 40px;
+    border-bottom: 1px solid @mainColorBorder;
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: nowrap;
+    .count-echarts-bar-title-left {
+      height: 100%;
+      display: flex;
+      align-items: center;
+      font-size: 14px;
+      color: @mainColorBlack65;
+      flex-wrap: nowrap;
+      white-space: nowrap;
+    }
+    .count-echarts-bar-title-right {
+      height: 100%;
+      display: flex;
+      flex-wrap: nowrap;
+      .count-echarts-bar-title-right-btn {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 66px;
+        height: 100%;
+        color: @mainColorBlack65;
+        font-size: 14px;
+        border-bottom: 2px solid transparent;
+        flex-wrap: nowrap;
+        white-space: nowrap;
+        cursor: pointer;
+        &:hover {
+          color: @mainColorBlueNormal;
+          border-bottom: 2px solid @mainColorBlueNormal;
+        }
+      }
+      .count-echarts-bar-title-right-btn-checked {
+        color: @mainColorBlueNormal;
+        border-bottom: 2px solid @mainColorBlueNormal;
+      }
+    }
+  }
 }
 </style>