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

<template>
  <div class="main-card__body" v-loading="pageLoading">
    <h1 class="main-card__title">
      学习数据
    </h1>
    <div class="main-card__chart" id="scoreChart"></div>
  </div>

</template>

<script>
export default {
  name: 'statistics',
  layout: 'person',
  data () {
    return {
      pageLoading: false,
      scores: [84, 76, 82, 90, 85]
    }
  },
  mounted () {
    this.initEcharts()
  },
  methods: {
    initEcharts () {
      const scoreChart = this.$echarts.init(document.getElementById('scoreChart'), 'light')
      scoreChart.setOption({
        title: { text: '最近五次测验得分情况', left: 'center' },
        tooltip: {
          trigger: 'item'
        },
        xAxis: {
          type: 'category',
          data: ['第一次', '第二次', '第三次', '第四次', '第五次'],
          boundaryGap: false
        },
        yAxis: {
          type: 'value',
          name: '得分'
        },
        series: [{
          data: this.scores,
          type: 'line'
          // areaStyle: {}
        }]

      })
    }
  }
}
</script>

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