数据可视化：Spring Boot + ECharts 案例演示

十四是40

已于 2022-06-23 16:26:14 修改

阅读量2.2k

点赞数 1

CC 4.0 BY-SA版权

文章标签： echarts spring boot java

于 2022-06-16 10:38:16 首次发布

本文链接：https://blog.youkuaiyun.com/qq_56238454/article/details/125309825

该博客详细介绍了如何使用Spring Boot后端查询班级数据，并结合ECharts在前端展示各班人数的柱形图。从创建数据库和表，到构建Spring Boot项目，再到设置ECharts和jQuery，最后实现数据可视化并成功运行应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、提出任务

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

二、完成任务

（一）创建数据库与表

创建数据库 - 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.xjx.echarts包里创建bean子包，在子包里创建Clazz类

package net.xjx.echarts.bean;
//班级实体类

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;
    }

    public void setClazz(String clazz) {
   
   
        this.clazz = clazz;
    }

    public int getBoys() {
   
   
        return boys;