将两个图表都换成饼图template div class=title h1学情统计h1 div div ref=chart style=height 400px; class=my-chartdiv div ref=pieChart style=height 400px; class=my-chart2divtemplatescriptimport as echarts from

<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',
  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: 16, name: '已完成'},
            {value: 4, 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 => {
        console.log(resp.data.data[0])
      });
    }
  }
};
</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>