简单使用springboot vue 实现echarts的柱状图和饼图

结果展示（此项目是前后端分离，需自行解决跨域问题）

一、数据库设计

这里使用到了两张表，一张book表，一张type表

type表字段

book表字段

二、接口实现

封装一个实体类 EchartsVo 用于返回结果集

@Data
@NoArgsConstructor
@AllArgsConstructor
public class EchartsVo {

    private String name;

    private Integer total;
}

controller

@RestController
@RequestMapping("/book")
public class BookController {

    @Autowired
    private IBookService ibookService;

    @GetMapping("/bie")
    public AjaxResult bie(){

        List list =ibookService.bie();

        return AjaxResult.me().setData( list);
    }

service

List bie();

ipml

@Service
public class BookServiceImp extends BaseServiceimpl implements IBookService {
    @Autowired(required = false)
   private BookMapper bookMapper;

   
    @Override
    public List bie() {
        return bookMapper.bie();
    }
}

mapper

@Mapper
public interface BookMapper extends BaseMapper {


    List bie();
}

sql语句

    
    
        
        
        
        
        
        

       
           
           
       
    

    
        
        
    

    
    
        id, `name`, price, author, press, img,`name`
    

  
    
        SELECT t.book_name AS type_name, COUNT(*) AS book_count
        FROM book b
        JOIN type t ON b.type_id = t.id
        GROUP BY t.book_name;
    

前端页面