springboot如何从数据库获取数据,用echarts显示(数据可视化)
更新时间：2023年12月22日 09:30:53 作者：only-qi
这篇文章主要介绍了springboot如何从数据库获取数据,用echarts显示(数据可视化),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
上图是实现的效果图：
Echarts插件，对于图表操控是十分方便的，但是一般生产环境
是把数据通过Json的格式传到HTML页面，
利用Ajax解析Json，所以我们来模拟一下该过程
1.下载Echarts的js文件和Jquery.js
Echarts地址：http://echarts.baidu.com/download.html
Jquery地址：https://jquery.com/download/
2.controller里面的代码
@RequestMapping(value = "/kucun")
@ResponseBody
public List<PurchasingManagement> kucunData(Model model){
List<PurchasingManagement> purcahseManagements=purchasingManagementService.findAll();
//PurchasingManagement是我pojo中创建的实体
System.err.println(purcahseManagements.toString());
return purcahseManagements;
}
@GetMapping(value = "/kucundata")
public String echarts4(Model model){
System.err.println("========开始");
return "purchasing-kucun";
}3.前端代码
http://localhost:8080/kucundata
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>图表</title>
<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
<!-- 引入 echarts.js -->
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 800px;height:450px;"></div>
<script type="text/javascript">
$(document).ready(function(){
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
//数据加载完之前先显示一段简单的loading动画
myChart.showLoading();
var names=[]; //横坐标数组（实际用来盛放X轴坐标值）
var values=[]; //纵坐标数组（实际用来盛放Y坐标值）
$.ajax({
type : "post",
async : true, //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
url : "/kucun", //请求发送到dataActiont处
data : {},
dataType : "json", //返回数据形式为json
success : function(result) {
//请求成功时执行该函数内容，result即为服务器返回的json对象
if (result) {
for(var i=0;i<result.length;i++){
names.push(result[i].nameandnum);
values.push(result[i].purchasingamount);
}
myChart.hideLoading(); //隐藏加载动画
myChart.setOption({ //加载数据图表
title: {
text: '库存数据'
},
tooltip: {},
legend: {
data:['數量']
},
xAxis: {
data: names
},
yAxis: {
type: 'value'
},
series: [{
// 根据名字对应到相应的系列
name: '數量',//薪资 series not exists. Legend data should be same with series name or data name.
type: 'bar',
data: values
}]
});
}
},
error : function(errorMsg) {
//请求失败时执行该函数
alert("图表请求数据失败!");
myChart.hideLoading();
}
});//end ajax
});
</script>
</body>
</html>
这是一个很简单的小例子，仔细看看，肯定可以实现的！！！
持久层无论是mybatis，还是jpa都可以的。
就是遍历数据库，然后存入数组，最后传给前端，如此而已。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
Dozer是Java Bean到Java Bean映射器，它以递归方式将数据从一个对象复制到另一个对象，这篇文章主要介绍了Java中的dozer对象转换的操作方法,需要的朋友可以参考下2022-08-08
本文是个人刚刚开始学习如何通过socket去发送信息下边的案例，也是书上的在这留下笔记，最后附上一个实例，有需要的小伙伴可以参考下。2015-10-10
在实际开发中，每次修改代码就需要重启项目，重新部署，对于一个后端开发者来说，重启确实很难受。在java开发领域，热部署一直是一个难以解决的问题，目前java虚拟机只能实现方法体的热部署，对于整个类的结构修改，仍然需要重启项目2022-10-10
springboot对象为null的属性在json中不显示的解决
这篇文章主要介绍了springboot对象为null的属性在json中不显示的解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-09-09
在本篇文章里小编给大家整理分享的是关于java向上转型发生的时机知识点内容，有兴趣的读者们可以参考下。2021-05-05
下面小编就为大家带来一篇利用Java Set 去除重复object的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-01-01
Java使用 try-with-resources 实现自动关闭资源的方法
这篇文章主要介绍了Java使用 try-with-resources 实现自动关闭资源的方法,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-06-06
Java采用setAsciiStream方法检索数据库指定内容实例解析
这篇文章主要介绍了Java采用setAsciiStream方法检索数据库指定内容,是比较实用的功能,需要的朋友可以参考下2014-08-08
这篇文章主要介绍了Java深度复制功能与用法,简单讲述了深度复制的概念、功能并结合实例形式分析了java实现深度复制的具体操作技巧,需要的朋友可以参考下2018-01-01
Spring Cloud Feign实现文件上传下载的示例代码
Feign框架对于文件上传消息体格式并没有做原生支持，需要集成模块feign-form来实现，本文就详细的介绍一下如何使用，感兴趣的可以了解一下2022-02-02
最新评论