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(){
        let 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>