Spring Boot + ECharts 案例演示

目录

一，提出任务

（1）班级数据

（二）运行效果

二，完成任务

（一）创建数据库与表

1，创建数据库

2、创建数据表

（二）创建Spring Boot项目

（三）创建班级实体类

（四）创建班级映射器接口

（五）创建班级映射器配置文件

（六）创建班级服务类

（七）创建班级控制器

（八）添加ECharts和jQuery脚本

（九）添加Druid起步依赖

（十）修改应用属性文件

（十一）创建页面可视化数据

（十二）启动应用，查看结果

---

一，提出任务

后端利用Spring Boot查询班级表数据，前端利用ECharts绘制各班人数柱形图

（1）班级数据

（二）运行效果

二，完成任务

（一）创建数据库与表

1，创建数据库

创建数据库 - bootdb

CREATE DATABASE bootdb;
 

执行上述命令

 

2、创建数据表

创建表结构 - t_class

CREATE TABLE `t_class`  (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `class` varchar(50) CHARACTER SET utf8 DEFAULT NULL,
  `boys` int(11) DEFAULT NULL,
  `girls` int(11) DEFAULT NULL,
  PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 5 CHARACTER SET = utf8;

执行上述命令

​​​​​​​

插入表记录

INSERT INTO `t_class` VALUES (1, '20软件1班', 26, 18);
INSERT INTO `t_class` VALUES (2, '20软件2班', 17, 20);
INSERT INTO `t_class` VALUES (3, '20大数据1班', 24, 30);
INSERT INTO `t_class` VALUES (4, '20计应2班', 21, 24);

执行上述语句

​​​​​​​​​​​​​​

 查看班级表记录

​​​​​​​​​​​​​​

（二）创建Spring Boot项目

利用Spring Initializr创建Spring Boot项目 - EChartsDemo

​​​​​​​​​​​​​​

 添加依赖

 设置项目名称与保存位置

 单击【Finish】按钮

（三）创建班级实体类

在net.az.echarts包里创建bean子包，在子包里创建Clazz类

​​​​​​​​​​​​​​

package net.az.echarts.bean;

/**
 * 功能：班级实体类
 * 作者：阿珍
 * 日期：2022年06月15日
 */
public class Clazz {
    private int id;
    private String clazz;
    private int boys;
    private int girls;

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getClazz() {
        return clazz;
    }