SpringBoot+ECharts是如何实现数据可视化的 SpringBoot+ECharts是如何实现数据

一、提出任务查询班级表数据，利用ECharts绘制各班人数柱形图。
（一）班级数据

文章图片

（二）运行效果

文章图片

二、实现步骤（一）创建数据库与表
1、创建数据库 - test

create database test;

文章图片

2、创建数据表 - t_class 创建表结构

CREATE TABLE `t_class`(`id` int(11) NOT NULL AUTO_INCREMENT,`class` varchar(50) CHARACTER SET utf8 COLLATE utf8_general_ci 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 COLLATE = utf8_general_ci ROW_FORMAT = Compact;

文章图片

插入表记录

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

文章图片

查看表记录

文章图片

（二）创建Spring Boot项目 - EChartsDemo

文章图片

文章图片

（三）创建班级实体类 - Clazz

文章图片

package net.hw.echarts.bean; /** * 功能：班级实体类 * 作者：华卫 * 日期：2021年06月04日 */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; }public void setBoys(int boys) {this.boys = boys; }public int getGirls() {return girls; }public void setGirls(int girls) {this.girls = girls; }@Overridepublic String toString() {return "Clazz{" +"id=" + id +", clazz='" + clazz + '\'' +", boys=" + boys +", girls=" + girls +'}'; }}

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

文章图片

package net.hw.echarts.mapper; import net.hw.echarts.bean.Clazz; import org.apache.ibatis.annotations.Mapper; import java.util.List; /** * 功能：班级映射器接口 * 作者：华卫 * 日期：2021年06月04日 */@Mapperpublic interface ClazzMapper {List findAll(); }

（五）创建班级映射器配置文件 - ClazzMapper.xml

文章图片

SELECT * FROM t_class;

（六）创建班级服务类 - ClazzService

文章图片

package net.hw.echarts.service; import net.hw.echarts.bean.Clazz; import net.hw.echarts.mapper.ClazzMapper; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Service; import java.util.List; /** * 功能：班级服务类 * 作者：华卫 * 日期：2021年06月04日 */@Servicepublic class ClazzService {@Autowired(required = false)private ClazzMapper clazzMapper; public List findAll() {return clazzMapper.findAll(); }}

（七）创建班级控制器 - ClazzController

文章图片

package net.hw.echarts.controller; import net.hw.echarts.bean.Clazz; import net.hw.echarts.service.ClazzService; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.ResponseBody; import java.util.List; /** * 功能：班级控制器 * 作者：华卫 * 日期：2021年06月04日 */@Controllerpublic class ClazzController {@Autowiredprivate ClazzService clazzService; @GetMapping("/index")public String index() {return "index"; }@RequestMapping(value = "https://www.it610.com/getAll", produces = "application/json; charset=utf-8")@ResponseBodypublic List getAll() {List clazzes = clazzService.findAll(); return clazzes; }}

（八）在项目里添加ECharts和jQuery 在static里创建js目录，添加echarts.min.js与jquery.min.js

文章图片

（九）在pom.xml文件里添加Druid依赖

com.alibabadruid-spring-boot-starter1.2.6

文章图片

（十）配置数据源与MyBatis 将application.properties更名为application.yaml

文章图片

spring:datasource:driver-class-name: com.mysql.cj.jdbc.Driverurl: jdbc:mysql://localhost:3306/test?serverTimezone=UTC&useUnicode=true&characterEncoding=UTF-8username: rootpassword: roottype: com.alibaba.druid.pool.DruidDataSourcedruid:initial-size: 20max-active: 100min-idle: 10mybatis:mapper-locations: classpath:mapper/*.xmltype-aliases-package: net.hw.echarts.bean

（十一）创建显示可视化数据的页面 - index.html