SpringBoot+Echarts实现获取数据库（mysql）数据在前台的柱状图、折线图、饼图显示

柱状图

折线图

饼图

上面三张图是早期的，博客里给出源码实际效果如下

楼主已将页面整合到后台，还是一样的实现过程

实体类entity

public class User { private int id; private String username; private String password; private int age; }

引入echarts与jQuery

为了避免找js文件出现路径问题，可以下面这样的方式引用

柱状图bar.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>

<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<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 : "/show", //请求发送到dataActiont处
data : {},
dataType : "json", //返回数据形式为json
success : function(result) {
//请求成功时执行该函数内容，result即为服务器返回的json对象
if (result) {
for(var i=0;i<result.length;i++){
names.push(result[i].username);
values.push(result[i].age);
}
myChart.hideLoading(); //隐藏加载动画
myChart.setOption({
//加载数据图表
title:{
text: '用户年龄统计图'
},

legend: {
data:['用户年龄']
},
xAxis: {
data: names,
axisLabel:{
interval: 0
}

},
yAxis: {
type: 'value'
},
series: [{
// 根据名字对应到相应的系列
name: '用户年龄',
type: 'bar',
data: values
}]
});
}
},
error : function(errorMsg) {
//请求失败时执行该函数
alert("图表请求数据失败!");
myChart.hideLoading();
}
});//end ajax
});
</script>
</body>
</html>

折线图line.html

legend: {
data:['用户年龄']
},
xAxis: {
data: names,
axisLabel:{
interval: 0
}

},
yAxis: {
type: 'value'
},
series: [{
// 根据名字对应到相应的系列
name: '用户年龄',
type: 'line',
data: values
}]
});
}
},
error : function(errorMsg) {
//请求失败时执行该函数
alert("图表请求数据失败!");
myChart.hideLoading();
}
});//end ajax
});

</script>
</body>
</html>

饼图pie.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>饼状图</title>
<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>

<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 800px;height:450px;" align="center"></div>
<script type="text/javascript">
$(document).ready(function(){
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
//数据加载完之前先显示一段简单的loading动画
myChart.showLoading();
var values=[];
//数据加载完之前先显示一段简单的loading动画
myChart.showLoading();
$.ajax({
type : "post",
async : true, //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
url : "/show", //请求发送到dataActiont处
data : {},
dataType : "json", //返回数据形式为json
success : function(data) {
//请求成功时执行该函数内容，result即为服务器返回的json对象
if (data) {
for(var i=1;i<data.length;i++){
var test={"value":data[i].age, "name":data[i].username};
values.push(test);

}

myChart.hideLoading(); //隐藏加载动画
myChart.setOption(
{
title: {
text: '爱情公寓人物受欢迎度统计',
subtext: '纯属虚构',
left: 'center'
},
legend: {
orient: 'vertical',
left: 'left',
data: values
},
series: [
{
name: '物料来源',
type: 'pie',
radius: '60%',
center: ['50%', '50%'],
data:values,
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
}
);
}
},
error : function(errorMsg) {
//请求失败时执行该函数
alert("图表请求数据失败!");
myChart.hideLoading();
}
});//end ajax
});//刷新方法结束
</script>
</body>
</html>

posted on 2021-04-01 14:44 UnmatchedSelf 阅读(1873) 评论(0) 编辑收藏举报

刷新页面返回顶部

Unmatched