基於springboot實現數據可視化的示例代碼
前言：
數據可視化就是將數據轉換成圖或表等，以一種更直觀的方式展現和呈現數據。通過“可視化”的方式，我們看不懂的數據通過圖形化的手段進行有效地表達，準確高效、簡潔全面地傳遞某種信息，甚至我們幫助發現某種規律和特征，挖掘數據背後的價值。現在，提出一種方案，基於springboot框架，將excel表格中的數據提取出來，前端使用echarts框架，通過柱形圖和餅狀圖對數據進行直觀展示
Excel數據源展示
創建Registration.xlsx表格和fruit_sales頁面，同時創建相關水果銷售數據
結構一覽
⚽️ echarts,min.js下載鏈接
一、讀取Excel表格中的數據
本項目使用springboot整合hutool第三方類庫實現對excel文件中數據采用流的方式進行讀取，詳情參看hutool官方文檔
Hutool官方文檔鏈接
1.1 創建springboot工程，導入相關依賴
<dependency>
<groupId>cn.hutool</groupId>
<artifactId>hutool-all</artifactId>
<version>5.4.7</version>
</dependency>
<dependency>
<groupId>org.apache.poi</groupId>
<artifactId>poi</artifactId>
<version>3.16</version>
</dependency>
<dependency>
<groupId>org.apache.poi</groupId>
<artifactId>poi-ooxml</artifactId>
<version>3.16</version>
</dependency>
1.2 創建測試類TestExcel
package com.allin.data_view;
import cn.hutool.poi.excel.ExcelReader;
import cn.hutool.poi.excel.ExcelUtil;
import org.apache.poi.util.IOUtils;
import org.junit.Test;
import org.springframework.mock.web.MockMultipartFile;
import org.springframework.web.multipart.MultipartFile;
import java.io.File;
import java.io.FileInputStream;
import java.io.InputStream;
import java.util.List;
import java.util.Map;
import java.util.Set;
public class TestExcel {
@Test
public void test() throws Exception{
File file = new File("D:\\2022learn\\springboot-test\\springboot-office\\data_view\\Registration.xlsx");
FileInputStream input = new FileInputStream(file);
MultipartFile multipartFile =new MockMultipartFile("file", file.getName(), "text/plain", IOUtils.toByteArray(input));
// 1.獲取上傳文件輸入流
InputStream inputStream = null;
try{
inputStream = multipartFile.getInputStream();
}catch (Exception e){
}
// 2.應用HUtool ExcelUtil獲取ExcelReader指定輸入流和sheet
ExcelReader excelReader = ExcelUtil.getReader(inputStream, "fruit_sales");
// 可以加上表頭驗證
// 3.讀取第二行到最後一行數據
//List<List<Object>> read = excelReader.read(1, excelReader.getRowCount());
List<Map<String,Object>> read = excelReader.readAll();
for (Map<String,Object> objects : read) {
Set<String> keys = objects.keySet();
for(String key:keys){
System.out.println(key + ":" + objects.get(key));
}
System.out.println();
}
}
}
📚 測試結果：
二、采用柱形圖顯示Excel表格數據
2.1 前端代碼
💬 在springboot框架中創建index.html,使用ajax動態獲取後端數據
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>echarts-bar</title>
<script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script src="js/echarts.min.js"></script>
</head>
<body>
<!-- 為ECharts準備一個具備大小（寬高）的Dom -->
<div id="main" style="width: 1400px;height:500px;"></div>
<script type="text/javascript">
// 基於準備好的dom，初始化echarts實例
var myChart = echarts.init(document.getElementById('main'));
// 指定圖表的配置項和數據
myChart.setOption({
title: {
text: '水果銷售情況柱形圖'
},
tooltip: {},
legend: {
data:['銷量']
},
xAxis: {
data: [],
axisLabel:{
interval: 0
}
},
yAxis: {},
series: [{
name: '銷量',
type: 'bar',
data: []
}]
});
myChart.showLoading();
var names=[]; //類別數組（實際用來盛放X軸坐標值）
var nums=[]; //銷量數組（實際用來盛放Y坐標值）
$.ajax({
type : "get",
async : false, //異步請求（同步請求將會鎖住瀏覽器，用戶其他操作必須等待請求完成才可以執行）
url : "list", //請求發送到TestServlet處
data : {},
dataType : "json", //返回數據形式為json
success : function(result) {
//請求成功時執行該函數內容，result即為服務器返回的json對象
var data = result.data;
if (data) {
for(var i=0;i<data.length;i++){
names.push(data[i].name); //挨個取出類別並填入類別數組
}
for(var i=0;i<data.length;i++){
nums.push(data[i].count); //挨個取出銷量並填入銷量數組
}
myChart.hideLoading(); //隱藏加載動畫
myChart.setOption({ //加載數據圖表
xAxis: {
data: names
},
series: [{
// 根據名字對應到相應的系列
name: '銷量',
data: nums
}]
});
}
},
error : function() {
//請求失敗時執行該函數
alert("圖表請求數據失敗!");
myChart.hideLoading();
}
})
</script>
</body>
</html>
2.2 後端代碼
2.2.1 Controller層代碼
💬 前端代碼會發送list請求到後端請求數據，controller層響應請求，通過service層獲取表格數據，返回map類型的數據
package com.allin.controller;
import com.allin.service.GetDataFromExcel;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
@Controller
@RequestMapping(value = "/")
public class IndexController {
@Autowired
private GetDataFromExcel getDataFromExcel;
@RequestMapping(value = "", method = RequestMethod.GET)
public String index(){
return "index";
}
@RequestMapping(value = "list", method = RequestMethod.GET)
@ResponseBody
public Map<String,Object> getList() throws Exception {
Map<String,Object> map = new HashMap<>();
List<Map<String,Object>> list = getDataFromExcel.getData();
map.put("msg","ok");
map.put("data",list);
list.forEach(System.out::println);
return map;
}
}
2.1.3 Service層代碼
💬 在service包下創建GetDataFromExcel類用於從Excel表格中獲取數據
package com.allin.service;
import cn.hutool.poi.excel.ExcelReader;
import cn.hutool.poi.excel.ExcelUtil;
import org.apache.poi.util.IOUtils;
import org.springframework.mock.web.MockMultipartFile;
import org.springframework.stereotype.Service;
import org.springframework.web.multipart.MultipartFile;
import java.io.File;
import java.io.FileInputStream;
import java.io.InputStream;
import java.util.List;
import java.util.Map;
@Service
public class GetDataFromExcel {
public List<Map<String,Object>> getData() throws Exception{
File file = new File("D:\\2022learn\\springboot-test\\springboot-office\\data_view\\Registration.xlsx");
FileInputStream input = new FileInputStream(file);
MultipartFile multipartFile =new MockMultipartFile("file", file.getName(), "text/plain", IOUtils.toByteArray(input));
// 1.獲取上傳文件輸入流
InputStream inputStream = null;
try{
inputStream = multipartFile.getInputStream();
}catch (Exception e){
}
// 2.應用HUtool ExcelUtil獲取ExcelReader指定輸入流和sheet
ExcelReader excelReader = ExcelUtil.getReader(inputStream, "fruit_sales");
// 可以加上表頭驗證
// 3.讀取第二行到最後一行數據
//List<List<Object>> read = excelReader.read(1, excelReader.getRowCount());
List<Map<String,Object>> read = excelReader.readAll();
return read;
}
}
三、采用餅狀圖顯示Excel表格數據
3.1 前端代碼
💬 在springboot框架中創建index1.html,使用ajax動態獲取後端數據
<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org" style="height: 100%">
<head>
<meta charset="utf-8">
<title>echarts-pie</title>
<script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script src="js/echarts.min.js"></script>
</head>
<body style="height: 100%; margin: 0">
<div id="main" style="height: 100%"></div>
<script type="text/javascript">
var mychart1 = echarts.init(document.getElementById('main'));
mychart1.setOption({
title: {
text: '水果銷量統計餅狀圖',
left: 'center'
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left'
},
series: [
{
name: 'Access From',
type: 'pie',
radius: '50%',
data: []
}],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
});
mychart1.showLoading();
var names=[];
var nums=[];
$.ajax({
type : "get",
async : false, //異步請求（同步請求將會鎖住瀏覽器，用戶其他操作必須等待請求完成才可以執行）
url : "list", //請求發送到TestServlet處
data : {},
dataType : "json", //返回數據形式為json
success : function(result) {
//請求成功時執行該函數內容，result即為服務器返回的json對象
var data = result.data;
if (data) {
for(var i=0;i<data.length;i++){
names.push(data[i].name); //挨個取出類別並填入類別數組
nums[i] = {value: data[i].count,name:data[i].name};
}
/* for(var i=0;i<data.length;i++){
nums.push(data[i].count); //挨個取出銷量並填入銷量數組
}*/
mychart1.hideLoading(); //隱藏加載動畫
mychart1.setOption({ //加載數據圖表
series: {
type: 'pie',
radius: '55%',
center: ['50%','60%'],
data: nums,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgb(0,0,0,0.5)'
}
}
},
});
}
},
error : function() {
//請求失敗時執行該函數
alert("圖表請求數據失敗!");
mychart1.hideLoading();
}
})
window.addEventListener('resize', myChart.resize);
</script>
</body>
</html>
3.2 後端代碼
🚗 因與柱狀圖獲取數據來源一樣，故Controller層與Service層代碼同柱狀圖
🌿 參考資料
Echarts 動態加載數據庫中的數據
Hutool讀取Excel內容
到此這篇關於基於springboot實現數據可視化的文章就介紹到這瞭,更多相關基於springboot實現數據可視化內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！
推薦閱讀：
- SpringBoot集成EasyExcel實現Excel導入的方法
- 基於vue+echarts數據可視化大屏展示的實現
- SpringBoot集成EasyExcel的步驟
- ECharts入門教程
- Hutool Java工具類庫_ExcelUtil的使用