vue+elementUI中使用Echarts之饼图问题

<div id="pieReport" style="width: 400px;height: 300px;"></div>

export default {
  name: "",
  data() {
    return {
      charts: "",
      opinion: ["及格人数", "未及格人数"],
      opinionData: [
        { value: 12, name: "及格人数", itemStyle: "#1ab394" },
        { value: 18, name: "未及格人数", itemStyle: "#79d2c0" }
      ]
    };
  },
}

drawPie(id) {
      this.charts = this.$echarts.init(document.getElementById(id));
      this.charts.setOption({
        tooltip: {
          trigger: "item",
          formatter: "{a}<br/>{b}:{c} ({d}%)"
        },
        legend: {
          bottom: 10,
          left: "center",
          data: this.opinion
        },
        series: [
          {
            name: "状态",
            type: "pie",
            radius: "65%",
            center: ["50%", "50%"],
            avoidLabelOverlap: false,
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              },
              color: function(params) {
                //自定义颜色
                var colorList = ["#1ab394", "#79d2c0"];
                return colorList[params.dataIndex];
              }
            },
            data: this.opinionData
          }
        ]
      });
    },

mounted() {
    this.$nextTick(function() {
      this.drawPie("pieReport");
    });
  }

 /**
     * 查询新闻种类以及数量
     * @return
     */
    List<Map<Object,Object>> list();

 <select id="list" resultType="java.util.Map">
      select count(*) as num,b.type_name as typeName  from t_news a,t_type b where a.type_id=b.type_id group by a.type_id
 </select>

@RestController
public class TypeController {
    @Autowired
    private ITypeService typeService;
    @RequestMapping("/count")
    public List<Map<Object,Object>> list(){
        List<Map<Object, Object>> list = typeService.list();
        return list;
    }
}

<template>
    <div class="chart-container">
		<div id="chartPie" style="width:100%; height:550px;"></div>
	</div>
</template>
 
<script>
    export default {
        name: "Typechart",
		data() {
        	return {
        		chartPie: '',
				typeName: [],//新闻类型名称
				typeNum: [] //新闻类型数量
			}
		},
		methods: {
        	drawPieChart() {
        	    // 基于准备好的dom，初始化echarts实例
				this.chartPie = this.$echarts.init(document.getElementById("chartPie"));
				this.chartPie.setOption({
					//设置标题,副标题,以及标题位置居中
					title: {
						text: '影片统计(饼状图)',
						//subtext: '纯属虚构',
						x: 'center'
					},
					//具体点击某一项触发的样式内容
					tooltip: {
						trigger: 'item',
						formatter: "{a} <br/>{b} : {c} ({d}%)"
					},
					//左上侧分类条形符
					legend: {
						orient: 'vertical',
						left: 'left',
						//通过跨域获取数据给data赋值
						data: []
					},
					//饼状图类型以及数据源
					series: [
						{
							name: '统计数量',
							type: 'pie',
							//radius: '70%',
							//center: ['50%', '60%'],
							//通过跨域获取数据给data赋值
							data: [],
							//设置饼状图扇形区域的样式
							itemStyle: {
								emphasis: {
									shadowBlur: 10,
									shadowOffsetX: 0,
									shadowColor: 'rgba(0, 0, 0, 0.5)'
								}
							},
						}
					]
				});
			},
			//动态获取饼状图的数据
			async initData() {
			//url可以在action.js配置，我是学习期间习惯这样哈哈！！
				var url="http://localhost:9090/news/count";
				this.axios.post(url,{}).then(res=>{
					console.log(res.data);
					var getData = [];
					//先进行赋值
					console.log(res.data.length)
					//for循环赋值
					for(let i=0; i<res.data.length; i++) {
						var obj = new Object();
						obj.name = res.data[i].typeName;
						obj.value = res.data[i].num;
						getData[i] = obj;
					}
					//然后再给饼状图赋值
					this.chartPie.setOption({
						legend: {
							data: res.data.typeName,
						},
						series:[{
								data: getData,
							}]
					});
				})
        		
				
			},
			drawCharts() {
				this.drawPieChart();
			},
		},
		//页面一加载就调用方法
		mounted () {
		    //先调用这个方法赋值
        	this.initData();
        	//再调用饼状图方法
			this.drawCharts();
		}
 
    }
 
</script>
 
<style scoped>
	.chart-container {
		width: 100%;
		float: left;
	}
</style>