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 () {
      const 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: {}
        }]

      })

      const 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>