SpringBoot整合Echarts實(shí)現(xiàn)用戶人數(shù)和性別展示功能(詳細(xì)步驟)
一、背景
在Web應(yīng)用開(kāi)發(fā)中，經(jīng)常需要使用圖表來(lái)展示數(shù)據(jù)，而Echarts是一個(gè)非常優(yōu)秀的圖表庫(kù)。SpringBoot是一個(gè)非常流行的Java Web框架，它可以快速搭建Web應(yīng)用。本文將介紹如何使用SpringBoot集成Echarts，實(shí)現(xiàn)展示用戶人數(shù)和性別的功能。
二、功能實(shí)現(xiàn)流程
1. 創(chuàng)建數(shù)據(jù)庫(kù)表
首先，我們需要?jiǎng)?chuàng)建數(shù)據(jù)庫(kù)表，用于存儲(chǔ)用戶信息。本文中，我們創(chuàng)建一個(gè)名為“user”的表，用于存儲(chǔ)用戶的id、姓名、性別等信息。
2. 創(chuàng)建SpringBoot項(xiàng)目
使用IDEA等工具，創(chuàng)建一個(gè)SpringBoot項(xiàng)目，并加入相應(yīng)的依賴。本文中，我們加入的主要依賴有SpringBoot、MyBatis、MySQL等。
3. 實(shí)現(xiàn)數(shù)據(jù)訪問(wèn)層
使用MyBatis框架，實(shí)現(xiàn)對(duì)用戶信息的增刪改查等操作。同時(shí)，我們也需要實(shí)現(xiàn)一個(gè)接口用于查詢用戶的性別比例。
4. 實(shí)現(xiàn)業(yè)務(wù)邏輯層
在業(yè)務(wù)邏輯層中，我們需要完成對(duì)應(yīng)的功能代碼。主要包括：添加用戶、刪除用戶、修改用戶信息、查詢所有用戶、查詢用戶性別比例等操作。其中，查詢用戶性別比例的操作需要使用Echarts來(lái)生成相應(yīng)的圖表。
5. 實(shí)現(xiàn)控制層
在控制層中，我們需要編寫(xiě)對(duì)應(yīng)的接口，用于接收前端的請(qǐng)求，并調(diào)用相應(yīng)的業(yè)務(wù)邏輯層方法來(lái)完成相應(yīng)的操作。同時(shí)，我們也需要編寫(xiě)相應(yīng)的HTML頁(yè)面，用于展示用戶人數(shù)和性別比例的圖表。
6. 實(shí)現(xiàn)前端頁(yè)面
使用Vue框架，實(shí)現(xiàn)前端頁(yè)面，并通過(guò)接口調(diào)用，將后臺(tái)數(shù)據(jù)展示到前端頁(yè)面上。
三、代碼實(shí)現(xiàn)
本文提供一個(gè)示例代碼，代碼實(shí)現(xiàn)過(guò)程中，使用了SpringBoot、MyBatis、MySQL等主流技術(shù)，實(shí)現(xiàn)了基本的增刪改查操作、以及查詢用戶性別比例并用Echarts展示的功能。示例代碼中的表名為“user”，根據(jù)實(shí)際情況可做相應(yīng)修改。
數(shù)據(jù)庫(kù)設(shè)計(jì)
CREATE TABLE `user` ( `id` int(11) NOT NULL AUTO_INCREMENT, `name` varchar(255) NOT NULL, `gender` int(11) NOT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8mb4;
數(shù)據(jù)訪問(wèn)層代碼
@Mapper
@Component
public interface UserDao {
int insert(User user);
int delete(int userId);
int update(User user);
List<User> selectAll();
int countByGender(int gender);
}業(yè)務(wù)邏輯層代碼
@Mapper
@Component
public interface UserDao {
int insert(User user);
int delete(int userId);
int update(User user);
List<User> selectAll();
int countByGender(int gender);
}控制層代碼
@RestController
@RequestMapping("/users")
public class UserController {
@Autowired
private UserService userService;
@PostMapping("/add")
public String addUser(@RequestBody User user) {
userService.addUser(user);
return "success";
}
@PostMapping("/delete")
public String deleteUser(@RequestParam("userId") int userId) {
userService.deleteUser(userId);
return "success";
}
@PostMapping("/update")
public String updateUser(@RequestBody User user) {
userService.updateUser(user);
return "success";
}
@GetMapping("/all")
public List<User> getAllUsers() {
return userService.getAllUsers();
}
@GetMapping("/ratio")
public Map<String, Integer> getUserGenderRatio() {
return userService.getUserGenderRatio();
}
}前端頁(yè)面代碼
<!DOCTYPE html>
<html>
<head>
<title>用戶信息展示</title>
<meta charset="utf-8">
<!-- 引入Echarts -->
<script src="https://cdn.jsdelivr.net/npm/echarts@4.9.0/dist/echarts.min.js"></script>
<!-- 引入Vue -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 引入axios -->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
<!-- 顯示用戶總數(shù) -->
<p>共有{{ userList.length }}個(gè)用戶</p>
<!-- 顯示用戶性別比例 -->
<div id="genderRatio" style="width: 600px;height:400px;"></div>
</div>
<script>
new Vue({
el: '#app',
data: {
userList: []
},
mounted() {
this.getUserList();
this.showGenderRatio();
},
methods: {
getUserList() {
axios.get('/users/all')
.then(response => {
this.userList = response.data;
})
.catch(error => {
console.log(error);
})
},
showGenderRatio() {
axios.get('/users/ratio')
.then(response => {
let maleCount = response.data.male;
let femaleCount = response.data.female;
// 使用Echarts生成圖表
let chart = echarts.init(document.getElementById('genderRatio'));
chart.setOption({
title: {
text: '用戶性別比例',
subtext: '男性/女性'
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>: {c} (wppm3vysvbp%)'
},
legend: {
orient: 'vertical',
left: 'left',
data: ['男性', '女性']
},
series: [
{
name: '性別',
type: 'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '30',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [
{value: maleCount, name: '男性'},
{value: femaleCount, name: '女性'}
]
}
]
});
})
.catch(error => {
console.log(error);
})
}
}
});
</script>
</body>
</html>四、總結(jié)
本文介紹了如何使用SpringBoot集成Echarts，實(shí)現(xiàn)展示用戶人數(shù)和性別的功能。通過(guò)數(shù)據(jù)庫(kù)設(shè)計(jì)、實(shí)現(xiàn)數(shù)據(jù)訪問(wèn)層、業(yè)務(wù)邏輯層和控制層的代碼編寫(xiě)，以及前端頁(yè)面的開(kāi)發(fā)，本文詳細(xì)地介紹了SpringBoot整合Echarts的實(shí)現(xiàn)步驟和代碼。
其中，使用Vue框架進(jìn)行前端頁(yè)面開(kāi)發(fā)，增加了Web應(yīng)用的可擴(kuò)展性和易用性。同時(shí)，通過(guò)使用Echarts圖表庫(kù)，我們可以讓數(shù)據(jù)呈現(xiàn)更為直觀清晰，增強(qiáng)用戶體驗(yàn)。
希望本文對(duì)讀者在Web應(yīng)用開(kāi)發(fā)中的圖表展示有所幫助。
到此這篇關(guān)于SpringBoot整合Echarts實(shí)現(xiàn)用戶人數(shù)和性別展示的文章就介紹到這了,更多相關(guān)SpringBoot整合Echarts內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
大家好，本篇文章主要講的是Java中值類(lèi)型和引用類(lèi)型詳解，感興趣的同學(xué)趕快來(lái)看一看吧，對(duì)你有幫助的話記得收藏一下，方便下次瀏覽2022-01-01
詳解Spring Security中獲取當(dāng)前登錄用戶的詳細(xì)信息的幾種方法
本文主要介紹了詳解Spring Security中獲取當(dāng)前登錄用戶的詳細(xì)信息的幾種方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-05-05
Java基于分治算法實(shí)現(xiàn)的棋盤(pán)覆蓋問(wèn)題示例
這篇文章主要介紹了Java基于分治算法實(shí)現(xiàn)的棋盤(pán)覆蓋問(wèn)題,簡(jiǎn)單描述了棋盤(pán)覆蓋問(wèn)題,并結(jié)合具體實(shí)例形式分析了java基于分治算法實(shí)現(xiàn)棋盤(pán)覆蓋問(wèn)題的相關(guān)操作技巧,需要的朋友可以參考下2017-11-11
Java基礎(chǔ)之JDK1.8新特性lambda表達(dá)式詳解
函數(shù)式接口有且僅有一個(gè)抽象方法,但是可以有多個(gè)非抽象方法的接口,函數(shù)式接口可以被隱式轉(zhuǎn)換為lambda表達(dá)式,這篇文章主要介紹了Java基礎(chǔ)之lambda表達(dá)式（JDK1.8新特性）,需要的朋友可以參考下2023-08-08
本文主要介紹了Mybatis分步查詢的實(shí)現(xiàn)示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
Java字節(jié)緩存流的構(gòu)造方法之文件IO流
這篇文章主要介紹了Java字節(jié)緩存流的構(gòu)造方法之文件IO流，同時(shí)也介紹了字符流中的一些相關(guān)的內(nèi)容，并且通過(guò)大量的案例供大家理解。最后通過(guò)一些經(jīng)典的案例幫助大家對(duì)前面所學(xué)的知識(shí)做了一個(gè)綜合的應(yīng)用,需要的朋友可以參考一下2022-04-04
java異步編程的7種實(shí)現(xiàn)方式小結(jié)
異步處理的實(shí)現(xiàn)方式有很多種，常見(jiàn)多線程，消息中間件，發(fā)布訂閱的廣播模式，本文就詳細(xì)的介紹java異步編程的7種實(shí)現(xiàn)方式，感興趣的可以了解一下2023-03-03
AndroidQ沙盒機(jī)制之分區(qū)存儲(chǔ)適配
這篇文章主要介紹了AndroidQ沙盒機(jī)制之分區(qū)存儲(chǔ)適配，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
這篇文章主要介紹了使用Java如何將文本復(fù)制到剪貼板問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-05-05
在Linux上搭建一個(gè)Java部署環(huán)境的詳細(xì)步驟
這篇文章主要介紹了在Linux上搭建一個(gè)Java部署環(huán)境,安裝jdk有很多種方式，但是我們這里推薦的是使用yum直接安裝openjdk，本文給大家介紹的非常詳細(xì)，需要的朋友可以參考下2023-01-01