Spring Boot結(jié)合ECharts案例演示示例
更新時(shí)間：2022年06月22日 10:33:14 作者：howard2005
本文主要主要介紹了Spring Boot結(jié)合ECharts案例演示示例，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
一、提出任務(wù)
后端利用Spring Boot查詢班級(jí)表數(shù)據(jù)，前端利用ECharts繪制各班人數(shù)柱形圖。
（一）班級(jí)數(shù)據(jù)
| 編號(hào) | 班級(jí) | 男生 | 女生 |
|---|---|---|---|
| 1 | 20軟件1班 | 26 | 18 |
| 2 | 20軟件2班 | 17 | 20 |
| 3 | 20大數(shù)據(jù)1班 | 24 | 30 |
| 4 | 20計(jì)應(yīng)2班 | 21 | 24 |
（二）運(yùn)行效果
二、完成任務(wù)
（一）創(chuàng)建數(shù)據(jù)庫與表
1、創(chuàng)建數(shù)據(jù)庫 創(chuàng)建數(shù)據(jù)庫 - bootdb
CREATE DATABASE bootdb;
執(zhí)行上述命令
2、創(chuàng)建數(shù)據(jù)表
創(chuàng)建表結(jié)構(gòu) - 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;
執(zhí)行上述命令
插入表記錄
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大數(shù)據(jù)1班', 24, 30); INSERT INTO `t_class` VALUES (4, '20計(jì)應(yīng)2班', 21, 24);
執(zhí)行上述語句
查看班級(jí)表記錄
（二）創(chuàng)建Spring Boot項(xiàng)目
利用Spring Initializr創(chuàng)建Spring Boot項(xiàng)目 - EChartsDemo
添加依賴
設(shè)置項(xiàng)目名稱與保存位置
單擊【Finish】按鈕
（三）創(chuàng)建班級(jí)實(shí)體類
在net.huawei.echarts包里創(chuàng)建bean子包，在子包里創(chuàng)建Clazz類
package net.huawei.echarts.bean;
/**
* 功能：班級(jí)實(shí)體類
* 作者：華衛(wèi)
* 日期：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;
}
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 +
'}';
}
}
（四）創(chuàng)建班級(jí)映射器接口
在net.huawei.echarts包里創(chuàng)建mapper子包，在子包里創(chuàng)建ClazzMapper接口
package net.huawei.echarts.mapper;
import net.huawei.echarts.bean.Clazz;
import org.apache.ibatis.annotations.Mapper;
import java.util.List;
/**
* 功能：班級(jí)映射器接口
* 作者：華衛(wèi)
* 日期：2022年06月15日
*/
@Mapper
public interface ClazzMapper {
List<Clazz> findAll();
}
（五）創(chuàng)建班級(jí)映射器配置文件
在resources里創(chuàng)建mapper目錄，在里面創(chuàng)建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.huawei.echarts.mapper.ClazzMapper">
<!--定義結(jié)果映射，因?yàn)楸碜侄蚊c實(shí)體屬性名不完全一致-->
<resultMap id="clazzMap" type="net.huawei.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 t_class;
</select>
</mapper>
（六）創(chuàng)建班級(jí)服務(wù)類
在net.huawei.echarts包里創(chuàng)建service子包，在子包里創(chuàng)建ClazzService類
package net.huawei.echarts.service;
import net.huawei.echarts.bean.Clazz;
import net.huawei.echarts.mapper.ClazzMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.List;
/**
* 功能：班級(jí)服務(wù)類
* 作者：華衛(wèi)
* 日期：2022年06月15日
*/
@Service
public class ClazzService {
@Autowired(required = false)
private ClazzMapper clazzMapper;
public List<Clazz> findAll() {
return clazzMapper.findAll();
}
}
（七）創(chuàng)建班級(jí)控制器
在net.huawei.echarts包里創(chuàng)建controller子包，在子包里創(chuàng)建ClazzController類
package net.huawei.echarts.controller;
import net.huawei.echarts.bean.Clazz;
import net.huawei.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;
/**
* 功能：班級(jí)控制器
* 作者：華衛(wèi)
* 日期：2022年06月15日
*/
@Controller
public class ClazzController {
@Autowired
private ClazzService clazzService;
@GetMapping("/")
public String index() {
return "index";
}
@RequestMapping(value = "/getAll", produces = "application/json; charset=utf-8")
@ResponseBody
public List<Clazz> getAll() {
List<Clazz> clazzes = clazzService.findAll();
return clazzes;
}
}
（八）添加ECharts和jQuery腳本
在static里創(chuàng)建js目錄，添加echarts.min.js與jquery.min.js
（九）添加Druid起步依賴
在pom.xml文件里添加Druid針對(duì)Spring Boot的起步依賴
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>druid-spring-boot-starter</artifactId>
<version>1.2.11</version>
</dependency>
（十）修改應(yīng)用屬性文件
將application.properties更名為application.yaml
spring:
datasource:
driver-class-name: com.mysql.cj.jdbc.Driver
url: jdbc:mysql://localhost:3306/bootdb?serverTimezone=UTC&useUnicode=true&characterEncoding=UTF-8
username: root
password: 903213
type: com.alibaba.druid.pool.DruidDataSource
druid:
initial-size: 20
max-active: 100
min-idle: 10
mybatis:
mapper-locations: classpath:mapper/*.xml
type-aliases-package: net.huawei.echarts.bean
server:
port: 8888
（十一）創(chuàng)建頁面可視化數(shù)據(jù)
在templates目錄里創(chuàng)建index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>20級(jí)各班人數(shù)柱狀圖</title>
<script src="js/jquery.min.js"></script>
<script src="js/echarts.min.js"></script>
<style>
.box {
width: 600px;
height: 400px;
border: 1px solid cornflowerblue;
}
</style>
</head>
<body>
<input type="button" value="顯示柱狀圖" class="btnShowBar"/>
<hr/>
<div class="box"></div>
<script>
// 獲取box元素
var box = document.getElementsByClassName("box")[0];
// 獲取btnShowBar元素
var btnShowBar = document.getElementsByClassName("btnShowBar")[0];
// 定義按鈕單擊事件
btnShowBar.onclick = function () {
// 獲取后臺(tái)返回的JSON數(shù)據(jù)
$.get('/getAll', function (data) {
// 定義三個(gè)數(shù)組
class_list = [];
boy_list = [];
girl_list = [];
// 將json數(shù)據(jù)寫入數(shù)組
for (var i = 0; i < data.length; i++) {
class_list.push(data[i].clazz);
boy_list.push(data[i].boys);
girl_list.push(data[i].girls);
}
// 1. 初始化ECharts
var my_box = echarts.init(box);
// 2. 進(jìn)行參數(shù)配置
var option = {
// 標(biāo)題
title: {
text: "20級(jí)各班人數(shù)柱狀圖",
x: "center",
y: "top",
textAlign: "left",
textStyle: {
fontFamily: "楷體",
fontSize: 35,
textStyle: "bold"
}
},
// 圖例
legend: {
left: "right",
orient: "vertical"
},
// x軸數(shù)據(jù)
xAxis: {
data: class_list
},
// y軸數(shù)據(jù)
yAxis: {},
// 數(shù)據(jù)信息
series: [
{
name: "男生人數(shù)",
type: "bar",
data: boy_list,
itemStyle: {
normal: {
color: '#0000aa'
}
}
},
{
name: "女生人數(shù)",
type: "bar",
data: girl_list,
itemStyle: {
normal: {
color: '#aa0000'
}
}
}
]
}
// 3. 可視化呈現(xiàn)
my_box.setOption(option);
});
}
</script>
</body>
</html>
（十二）啟動(dòng)應(yīng)用，查看結(jié)果
啟動(dòng)應(yīng)用（端口號(hào)：8888）
訪問http://localhost:8888
單擊【顯示柱狀圖】按鈕
到此這篇關(guān)于Spring Boot結(jié)合ECharts案例演示示例的文章就介紹到這了,更多相關(guān)Spring Boot結(jié)合ECharts內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
- SpringBoot+JSON+AJAX+ECharts+Fiddler實(shí)現(xiàn)前后端分離開發(fā)可視化
- SpringBoot+Thymeleaf+ECharts實(shí)現(xiàn)大數(shù)據(jù)可視化(基礎(chǔ)篇)
- SpringBoot+thymeleaf+Echarts+Mysql 實(shí)現(xiàn)數(shù)據(jù)可視化讀取的示例
- Springboot項(xiàng)目中運(yùn)用vue+ElementUI+echarts前后端交互實(shí)現(xiàn)動(dòng)態(tài)圓環(huán)圖(推薦)
- Springboot運(yùn)用vue+echarts前后端交互實(shí)現(xiàn)動(dòng)態(tài)圓環(huán)圖
- SpringBoot+ECharts是如何實(shí)現(xiàn)數(shù)據(jù)可視化的
- Springboot+echarts實(shí)現(xiàn)可視化
- springboot動(dòng)態(tài)加載Echarts柱狀圖
- SpringBoot+Echarts實(shí)現(xiàn)請(qǐng)求后臺(tái)數(shù)據(jù)顯示餅狀圖
相關(guān)文章
web.xml詳解_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
這篇文章給大家詳細(xì)介紹了web.xml的相關(guān)知識(shí),需要的朋友可以參考下2017-07-07
這篇文章主要介紹了解決json字符串序列化后的順序問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2021-03-03
spring webflux自定義netty 參數(shù)解析
這篇文章主要介紹了spring webflux自定義netty 參數(shù)解析，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2021-09-09
Idea2023創(chuàng)建springboot不能選擇java8的解決方法(最新推薦)
在idea2023版本創(chuàng)建springboot的過程中,選擇java版本時(shí)發(fā)現(xiàn)沒有java8版本,只有java17和java20,遇到這樣的問題如何解決呢,下面小編給大家分享Idea2023創(chuàng)建springboot不能選擇java8的解決方法,感興趣的朋友一起看看吧2024-01-01
在 Springboot 應(yīng)用程序中,日期時(shí)間格式化處理是非常重要的一方面,本文將總結(jié)SpringBoot幾種常用的接口日期格式化方法,通過示例代碼介紹了非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2024-11-11
Spring TaskScheduler使用實(shí)例解析
這篇文章主要介紹了Spring TaskScheduler使用實(shí)例解析,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-11-11
這篇文章主要介紹了spring cloud 分布式鏈路追蹤的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07
Spring定時(shí)任務(wù)注解@Scheduled詳解
這篇文章主要介紹了Spring定時(shí)任務(wù)注解@Scheduled詳解,@Scheduled注解是包org.springframework.scheduling.annotation中的一個(gè)注解,主要是用來開啟定時(shí)任務(wù),本文提供了部分實(shí)現(xiàn)代碼與思路,需要的朋友可以參考下2023-09-09
一篇文章帶你了解SpringMVC數(shù)據(jù)綁定
這篇文章主要給大家介紹了關(guān)于如何通過一篇文章弄懂Spring MVC的參數(shù)綁定，文中通過示例代碼以及圖文介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2021-08-08
SpringBoot+Vue實(shí)現(xiàn)動(dòng)態(tài)菜單的思路梳理
這篇文章主要為大家詳細(xì)介紹了利用SpringBoot+Vue實(shí)現(xiàn)動(dòng)態(tài)菜單的思路梳理，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以動(dòng)手嘗試一下2022-07-07