一篇让你学会springboot用echarts实现柱状图和饼状图查询
1.业务说明
让数据库数据用柱状图或者饼状图显示出来
2.柱状图
引入js
<script src="echarts.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/echarts/4.2.0-rc.2/echarts.js"></script>
2.2柱状图实现
在页面上加一个跳转的按钮
<input type="button" value="柱状图" onclick="location.href='/doColumner'">
页面跳转以Ajax方式
/*
跳转到柱状图前端页面
*/
@RequestMapping("/doColumnar")
public String doColumnar() {
return "merch-min";
}
merch-min.html页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="echarts.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/echarts/4.2.0-rc.2/echarts.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 1000px;height:700px;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
// 显示标题，图例和空的坐标轴
myChart.setOption({
title: {
text: '商品库存实时柱状图'
},
tooltip: {
},
legend: {
data: ['库存']
},
xAxis: {
data: []
},
yAxis: {
},
series: [{
name: '销量',
type: 'bar',
data: []
}]
});
/* myChart.showLoading();
// 异步加载数据
$.get('http://localhost/merch/findAll').done(function (data) {
myChart.hideLoading();
// 填入数据
myChart.setOption({
xAxis: {
data: data.id
},
series: [{
// 根据名字对应到相应的系列
name: '销量',
data: data.data
}]
});
});
*/
// 一、将data2.json中data的id转化成数组(将月份提取出来并放到一个新数组里)
function convertMonthToArray(resule) {
var data = resule.data;
var arr = [];
for (var i = 0; i < data.length; i++) {
// 1、获取data中的time属性
console.log(data[i].name);
// 2、将time属性放到一个新的数组里
arr.push(data[i].name);
}
console.log(arr);
// 3、返回arr数组
return arr;
}
//二、将data2.json中间隔时间装换成数组
function convertIntervalDaysToArray(resule) {
var data = resule.data;
var arr = [];
for (var i = 0; i < data.length; i++) {
arr.push(data[i].stock);
}
return arr;
}
// 三、异步请求数据
$.get('http://localhost:8080/merch/findAll').done(function (resule) {
// 获的X，函数方法要传参，不然无意义
var xAxisMonth = convertMonthToArray(resule);
// 获的Y
var yAxisIntervalDays = convertIntervalDaysToArray(resule);
myChart.setOption({
xAxis: {
// 根据data2.json获取需要的值
data: xAxisMonth
},
yAxis: {
},
series: [{
name: 'name',
type: 'bar',
// 根据data2.json获取需要的值
data: yAxisIntervalDays
}]
});
})
</script>
</body>
</html>
/*
后台查询所有商品，前台展现json(+柱状图)
*/
@RequestMapping("merch/findAll")
@ResponseBody
public JsonResult findAll(){
return new JsonResult().success(merchService.findMerchs());
}
JsonResult工具类
@Data
@Accessors(chain = true)
@NoArgsConstructor
@AllArgsConstructor
public class JsonResult implements Serializable {
private Integer status; //200表示成功，201表示失败
private String msg; //服务器返回的提示信息
private Object data; //服务器返回的数据
//定义JsonResult封装对象
public static JsonResult fail(){
return new JsonResult(201,"服务器执行失败",null);
}
public static JsonResult success(Object data){
return new JsonResult(200,"服务器执行成功",data);
}
public static JsonResult success(String msg, Object data){
return new JsonResult(200,msg,data);
}
}
最终显示效果图
3.1饼状图实现
饼状图和柱状图思路大致相同 ，直接上代码了
引入Js
<script src="/jquery.min.js"></script>
<script src="/echarts.js"></script>
<scriptsrc="http://cdn.highcharts.com.cn/highcharts/highcharts.js"></script>
页面加上按钮
<input type="button" value="饼状图" onclick="location.href='/doPieChart'">
/*
跳转到饼状图页面
*/
@RequestMapping("/doPieChart")
public String doPieChart() {
return "merch-pieChart";
}
<!DOCTYPE html>
<html lang="en" style="height: 100%">
<head>
<meta charset="UTF-8">
<title>实时饼状图查询</title>
<script src="/echarts.js"></script>
<script src="/jquery.min.js"></script>
<script src="http://cdn.highcharts.com.cn/highcharts/highcharts.js"></script>
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {
};
var option;
option = {
title: {
text: '商品实时饼状图',
subtext: '纯属虚构(才怪)',
left: 'center'
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left',
},
series: [
{
name: '商品库存',
type: 'pie',
radius: '50%',
data: [
{
value: 500, name: '景品路飞'},
{
value: 20, name: '精品罗'},
{
value: 0, name: '精品索隆'},
{
value: 1000, name: '假面骑士dcd'},
{
value: 200, name: '四档路飞弹力人'}
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
if (option && typeof option === 'object') {
myChart.setOption(option);
}
$(function () {
var servicedata = [];
$.ajax({
url: "/merch/findAll2",
type: "post",
dataType: "json",
success: function (data) {
if (data) {
var obj = eval(data);
for (var i = 0; i < obj.length; i++) {
var sum = new Object();
sum.name = data[i].name;
sum.value = data[i].stock;
servicedata[i] = sum;
}
}
myChart.setOption({
series: [{
//根据名字对应到相应的系列
name: '访问来源',
data: servicedata
}]
})
}
})
})
</script>
</body>
</html>
/*
后台查询所有商品,前台展现json(+饼状图)
*/
@RequestMapping(value = "merch/findAll2",produces = "application/json;charset=utf-8", method = RequestMethod.POST)
@ResponseBody
public List<Merch> findAll2(){
List<Merch> merchs = merchService.findMerchs();
return merchs;
}
饼状图实现效果图
OK，至此一个简单的柱状图和饼状图就完成了，如果对你有帮助最好一件三连哈!！！