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

好久没写博客了，最近碰到了如何运用echarts制作各种图表的问题，在几番百度之后，问题终于得到了解决，现在来和大家分享一下。

之前所做的是影城管理系统，需要统计各个类型影片的数量，要通过饼状图的方式来展示相应的数据，后端代码是用springboot写的，结合了mybatis,接下来我只展示主要的代码。

首先FilmMapper接口中定义的方法如下：

    /**
     * 按照类别统计数量并记录类别名称
     */
    List<Map<Object,Object>> countFilm2();

我这边返回值是List类型，参数为Map类型，配置文件FilmMapper.xml中，具体的sql代码如下：

<!-- 查询电影类别数量及对应的类别名称 -->
    <select id="countFilm2" resultType="java.util.Map">
        select count(*) as num,t.type_name as typeName from film f,type t where f.type_id=t.type_id group by f.type_id
    </select>

我这边写了一个连接求和查询语句，返回值类型为Map类型，接下来常规写FilmService和FilmServiceImpl,这里没什么好说的，跟Film