Vue集成echarts实现饼图

今日在工作项目中遇到了需要在spring boot + vue项目中实现饼图，我就选择了使用平时使用比较广泛的echarts，话不多说 先看效果

饼图中的所有所需数据，只调用了一次sql 那么我的实现思路是什么呢

我们通过查阅官方资料可以知道，data中的数据便是我们在饼图效果展示中所需要用到的数据，那么我们如果想要实现这样一个饼图，我们在后端按照它的数据格式返回相应的数据就可以了

也就是说我们需要返回一个List<Map<Object,Object>>这样的值回到前端，那么我们需要在sql进行查询的时候，按照所需值获取相应的数据

首先我们需要一个name值，用来说明每个'块'中所包含的内容，然后我们需要一个count值进行数据统计，所以我们可以很简单的得到以下的查询结果

如图所示，我们查出来的数据中包含一个name和一个count，由于我的这个字段为外键，所以后续需要进行二次处理加工

那么我们所需要的值得到了，后端代码只需要返回到前端即可