学情统计 - 可视化学习时长和任务完成情况

<template>
  <div class='title'>
    <h1>学情统计</h1>
  </div>
  <div ref='pieChart1' style='height: 400px;' class='my-chart'></div>
  <div ref='pieChart2' style='height: 400px;' class='my-chart2'></div>
</template>
<script>
import * as echarts from 'echarts';
export default {
  name: 'MyGoal',
  data() {
    return {
      studytime: 0,
      leavetime: 0,
      finishtask: 0,
      underfinishtask: 0,
    };
  },
  mounted() {
    this.getuserstudy();
  },
  methods: {
    getuserstudy() {
      this.$net.get('/task/notfinish').then(resp => {
        this.studytime = resp.data.data[0];
        this.leavetime = resp.data.data[1];
        this.finishtask = resp.data.data[2];
        this.underfinishtask = resp.data.data[3];
        const pieChart1Dom = this.$refs.pieChart1;
        const pieChart2Dom = this.$refs.pieChart2;
        const pieChart1Instance = echarts.init(pieChart1Dom);
        const pieChart2Instance = echarts.init(pieChart2Dom);
        const pieOptionStudy = {
          title: {
            text: '学习时长',
            x: 'center'
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
          },
          legend: {
            orient: 'vertical',
            left: 10,
            data: ['学习时长', '中途离开时长 ']
          },
          series: [
            {
              name: '任务完成情况',
              type: 'pie',
              radius: ['50%', '70%'],
              avoidLabelOverlap: false,
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: '30',
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data: [
                { value: this.studytime, name: '学习时长' },
                { value: this.leavetime, name: '中途离开时长' }
              ]
            }
          ]
        };
        const pieOptionTask = {
          title: {
            text: '任务完成情况',
            x: 'center'
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
          },
          legend: {
            orient: 'vertical',
            left: 10,
            data: ['已完成', '未完成']
          },
          series: [
            {
              name: '任务完成情况',
              type: 'pie',
              radius: ['50%', '70%'],
              avoidLabelOverlap: false,
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: '30',
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data: [
                { value: this.finishtask, name: '已完成' },
                { value: this.underfinishtask, name: '未完成' }
              ]
            }
          ]
        };
        pieChart1Instance.setOption(pieOptionStudy);
        pieChart2Instance.setOption(pieOptionTask);
        console.log(this.leavetime);
      });
    }
  }
};
</script>
<style scoped>
.title {
  text-align: center;
  border-bottom: 2px solid black;
}
.my-chart {
  float: left;
  border: 2px solid white;
  margin-top: 150px;
  margin-left: 50px;
  width: 40%;
}
.my-chart2 {
  float: right;
  border: 2px solid white;
  margin-top: 150px;
  margin-right: 50px;
  width: 40%;
}
</style>