Echarts连接数据库使用Ajax的简单使用

一、项目环境

• IDEA2019.3.3
• MySql 5.7
• SSM
• echarts.js 

二、 柱状图简单案例

1.创建一个book表

2.后台准备

book实体类：

public class Book {
    private Integer bid;

    private String bname;

    private String btype;

    private Integer bnumber;

    public Book(Integer bid, String bname, String btype, Integer bnumber) {
        this.bid = bid;
        this.bname = bname;
        this.btype = btype;
        this.bnumber = bnumber;
    }

    public Book() {
        super();
    }

    public Integer getBid() {
        return bid;
    }

    public void setBid(Integer bid) {
        this.bid = bid;
    }

    public String getBname() {
        return bname;
    }

    public void setBname(String bname) {
        this.bname = bname;
    }

    public String getBtype() {
        return btype;
    }

    public void setBtype(String btype) {
        this.btype = btype;
    }

    public Integer getBnumber() {
        return bnumber;
    }

    public void setBnumber(Integer bnumber) {
        this.bnumber = bnumber;
    }
}

mapper层：

@Repository
public interface BookMapper {
    List selectAll();
}

service层：

public interface IBookService {
    List selectAll();
}

service实现类：

@Service
public class BookServiceImpl implements IBookService {
    @Autowired
    private BookMapper bookMapper;

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

mapper映射文件：

  
    
      
      
      
      
    
  
  
    bid, bname, btype, bnumber
  
    
      select * from book
    

Controller层：

@Controller
public class IndexController {

    @Autowired
    private IBookService bookService;

    @RequestMapping("/All")
    public String toAll(){
        return "echarts";
    }

    @RequestMapping("/getAll")
    @ResponseBody
    public List selectAll(){
        List books = bookService.selectAll();
        System.out.println("books"+books);
        return books;
    };

}

三、前台页面

<%@ page contentType="text/html;charset=UTF-8" language="java" %>



    
    
    <%@include file="/common/head.jsp"%>
    
    
    

效果：

 博主水平有限，难免有错。欢迎评论交流