Spring Boot + ECharts 案例演示

qq_57026298

已于 2022-06-23 17:16:23 修改

阅读量353

点赞数

文章标签： echarts spring boot java

于 2022-06-18 09:15:42 首次发布

本文链接：https://blog.csdn.net/qq_57026298/article/details/125342969

版权

本文介绍了如何结合Spring Boot后端和ECharts前端，实现从数据库获取班级数据并绘制柱状图的过程。首先创建数据库与表，接着建立Spring Boot项目，定义实体类、映射器接口、服务类和控制器。然后引入ECharts和jQuery，添加Druid依赖，并配置应用属性。最后，创建可视化页面，启动应用并成功展示柱形图。

摘要由CSDN通过智能技术生成

一、提出任务

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

二、完成任务

（一）创建数据库与表

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.qzj.echarts包里创建bean子包，在子包里创建Clazz类
在这里插入图片描述

package net.qzj.echarts.bean;

/**
* 功能：班级实体类
*/
public class Clazz {
   pri

最低0.47元/天解锁文章