学情统计图表 - 基于 ChatGPT Web 的学习数据可视化

<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();
    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: 16, name: '已完成'},
            {value: 4, name: '未完成'}
          ]
        }
      ]
    };
    pieChart1Instance.setOption(pieOptionStudy);
    pieChart2Instance.setOption(pieOptionTask);
  },
  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]
            console.log(this.leavetime)
            pieChart1Instance.setOption(pieOptionStudy);
        });
    }
  }
};
</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>