vue+echarts动态获取数据制作饼状图

最近自学了一下如何运用echarts制作各种图表，首先我是用springboot+mybatis写的后端。

TypeMapper接口中定义方法如下：

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

配置NewsMapper.xml文件如下：

 <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>

我这边写了一个连接求和查询语句，返回值类型为Map类型，接下来常规写TypeService和TypeServiceImpl,这里没什么好说的，跟TypeMapper基本一样哈，接下来写控制类NewsController，简要代码如下：

@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;
    }
}

这里我是通过跨域获取数据，创建一个TypeChart组件，在index.js配置好路由后，开始以下代码！！

<template>