本篇文章主要讲解vue毕设项目中，查询系统各角色数量，并渲染到echarts图标的全部过程。

一、sql语句

观察user表：

 观察role表：

编写如下sql： 

select count(u.role_id) as value, r.rolename as name 
from user u 
join role r on u.role_id = r.id 
group by u.role_id

查看结果：value表示个数，name表示角色名称。

二、后端

1、新建vo

2、编写mapper

3、编写service

 4、编写controller

5、使用apifox，测试后端接口可用性

三、前端

1、编写api

2、使用api，给后端发送请求，并接收数据

3、使用echarts图表

注：在vue项目中，如果不会使用echarts，请看博主的文章：

在vue3项目中，使用echarts-CSDN博客 

4、将数据，填入echarts的option

5、运行项目，查看结果

结语

以上就是【查询系统各角色数量】功能实现的全部流程。

喜欢本篇文章的话，可以留个免费关注~~