学情统计 - 任务完成情况分析图表

<template>
  <div class='title'>
    <h1>学情统计</h1>
  </div>
  <div ref='chart' style='height: 400px;' class='my-chart'></div>
  <div ref='pieChart' style='height: 400px;' class='my-chart'></div>
</template>
<script>
import * as echarts from 'echarts';
export default {
  name: 'MyGoal',
  mounted() {
    // 通过ref获取div元素
    const chartDom = this.$refs.chart;
    const pieChartDom = this.$refs.pieChart;
    // 初始化echarts实例
    const chartInstance = echarts.init(chartDom);
    const pieChartInstance = echarts.init(pieChartDom);
    // 设置图表配置项和数据
    const option = {
      title: {
        text: '任务完成数量统计'
      },
      tooltip: {},
      legend: {
        data: ['任务数量']
      },
      xAxis: {
        type: 'category',
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '任务数量',
          type: 'bar',
          data: [2, 4, 3, 5, 6, 4, 7]
        }
      ]
    };
    const pieOption = {
      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: 7, name: '已完成'},
            {value: 3, name: '未完成'}
          ]
        }
      ]
    };
    chartInstance.setOption(option);
    pieChartInstance.setOption(pieOption);
  }
};
</script>
<style scoped>
.title {
  text-align: center;
  border-bottom: 2px solid black;
}
.my-chart {
  border: 2px solid white;
  margin-top: 50px;
  margin-left: 50px;
  width: 50%;
}
</style>