在springboot中怎么实现数据可视化，代码是什么？
导读：在这篇文章中我们将学习“在springboot中怎么实现数据可视化，代码是什么？”的相关知识，下文有详细的介绍及实例，步骤过程清晰，简单易懂，小编觉得挺不错的，有需要的朋友可以借鉴参考，希望大家阅读完这篇能有所获。...
在这篇文章中我们将学习“在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.读取第二行到最后一行数据
//ListListObject>
>
read = excelReader.read(1, excelReader.getRowCount());
ListMapString,Object>
>
read = excelReader.readAll();
for (MapString,Object>
objects : read) {
SetString>
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;
idata.length;
i++){
names.push(data[i].name);
//挨个取出类别并填入类别数组
}
for(var i=0;
idata.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 MapString,Object>
getList() throws Exception {
MapString,Object>
map = new HashMap>
();
ListMapString,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 ListMapString,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.读取第二行到最后一行数据
//ListListObject>
>
read = excelReader.read(1, excelReader.getRowCount());
ListMapString,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;
idata.length;
i++){
names.push(data[i].name);
//挨个取出类别并填入类别数组
nums[i] = {
value: data[i].count,name:data[i].name}
;
}
/* for(var i=0;
idata.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层代码同柱状图
以上就是关于在springboot中怎么实现数据可视化，代码是什么？的介绍啦，需要的朋友可以参考上述内容，希望对大家有帮助，想要了解更多，欢迎关注网络，小编将为大家输出更多高质量的实用文章！
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： 在springboot中怎么实现数据可视化，代码是什么？
本文地址： https://pptw.com/jishu/652295.html