Spring Boot +ECharts案例演示

最新推荐文章于 2023-12-08 10:33:56 发布

兮若耶

最新推荐文章于 2023-12-08 10:33:56 发布

阅读量272

点赞数

本文链接：https://blog.csdn.net/m0_63797754/article/details/125427200

版权

本文通过创建Spring Boot项目，建立数据库与表，创建班级实体类、映射器接口、服务类和控制器，引入Druid依赖，配置ECharts和jQuery，最终在页面上实现班级数据的柱状图展示，详细介绍了如何使用Spring Boot结合ECharts进行数据可视化操作。

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

一、提出任务

班级数据

请添加图片描述

二、完成任务

（一）创建数据库与表

1、创建数据库

创建数据库 - bootdb

CREATE DATABASE bootdb;

执行上述命令

请添加图片描述

2、创建数据表

创建表结构 - t_class

SELECT * FROM t_score ts
   WHERE (SELECT COUNT(*) FROM t_score  
	           WHERE ts.name = t_score.name 
						    AND score >= ts.score						 		
	        ) <= 3 ORDER BY name, score DESC;

执行上述命令

请添加图片描述

插入表记录

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

请添加图片描述 `package net.fhl.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;
}

public void setBoys(int boys) {
    this.boys = boys;
}

public int getGirls() {
    return girls;
}

public void setGirls(int girls) {
    this.girls = girls;
}

@Override
public String toString() {
    return "Clazz{" +
            "id=" + id +
            ", clazz='" + clazz + '\'' +
            ", boys=" + boys +
            ", girls=" + girls +
            '}';
}
}

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

在net.huawei.echarts包里创建mapper子包，在子包里创建ClazzMapper接口

请添加图片描述

package net.fhl.echarts.mapper;

import net.fhl.echarts.bean.Clazz;
import org.apache.ibatis.annotations.Mapper;

import java.util.List;


 //功能：班级映射器接口

@Mapper
public interface ClazzMapper {
   
    List<Clazz> findAll();
}

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

在resources里创建mapper目录，在里面创建ClazzMapper.xml

请添加图片描述

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">

<mapper namespace="net.fhl.echarts.mapper.ClazzMapper">
    <!--定义结果映射，因为表字段名与实体属性名不完全一致-->
    <resultMap id="clazzMap" type="net.fhl.echarts.bean.Clazz">
        <result property="id" column="id"/>
        <result property="clazz" column="class"/>
        <result property="boys" column="boys"/>
        <result property="girls" column="girls"/>
    </resultMap>

    <select id="findAll" resultMap="clazzMap">
        SELECT * FROM