SEEC-Portal-Front/pages/admin/statistics.vue

<template>
  <div class="main-card__body" v-loading="pageLoading">
    <h1 class="main-card__title">
      平台统计
    </h1>
    <div class="main-card__chart" id="distributionChart"></div>
    <div class="main-card__chart" id="onlineChart"></div>
  </div>

</template>

<script>
  export default {
    name: "statistics",
    layout: 'admin',
    data(){
      return{
        pageLoading: false,
        distribution: [{
          name: '0分',
          value: 4
        }, {
          name: '1-59分',
          value: 19
        }, {
          name: '60-69分',
          value: 34
        }, {
          name: '70-84分',
          value: 70
        }, {
          name: '85-100分',
          value: 65
        }],
        online: [87, 23, 36, 167, 171, 90, 45],
        tests: [
          {}
        ]
      }
    },
    mounted(){
      this.initEcharts();
    },
    methods:{
      initEcharts(){
        let distributionChart = this.$echarts.init(document.getElementById('distributionChart'), 'light');
        distributionChart.setOption({
          title: {text: '本次测验得分分布情况', left: 'center'},
          tooltip: {
            trigger: 'item',
          },
          series: [{
            data: this.distribution,
            type: 'pie',
            radius: '65%',
            center: ['50%', '50%'],
            selectedMode: 'single',
            // areaStyle: {}
          }],

        });

        let onlineChart = this.$echarts.init(document.getElementById('onlineChart'), 'light');
        onlineChart.setOption({
          title: {text: '上周每日活跃人数图表', left: 'center'},
          tooltip: {
            trigger: 'item',
          },
          xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            data: this.online,
            type: 'bar'
          }]
        });
      }
    }
  };
</script>

<style lang="scss" scoped>
  @import '~/assets/css/person.scss';
</style>