用Springboot1.5.6做后台数据接口
用百度Echarts做前端数据可视化展示
用Ajax做数据交互
创建springboot工程
在pom.xml配置文件添加配置
创建一个main方法和一个控制器
运行程序看到" hello world "项目搭建成功
编写控制器页面跳转
编写class对象
编写控制器获取json数据
编写css
编写bar.js
$(function () {
main();
function main() { //main start
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption({
title: {
text: '衣服售价数据异步数据加载示例'
},
tooltip: {},
legend: {
data:['销量test']
},
xAxis: {
data: []
},
yAxis: {},
series: [{
name: '销量test',
type: 'bar',
color: "#5EBEFC", //改变柱状图的颜色
data: []
}]
});
myChart.showLoading(); //数据加载完之前先显示一段简单的loading动画
var names=[]; //类别(实际用来盛放X轴坐标值)
var nums=[]; //销量(实际用来盛放Y坐标值)
$.ajax({
type : "post",
async : true, //异步请求(同步请求将会锁住浏览器,用户其他操作必须等待请求完成才可以执行)
url : "/BarDate", //请求发送到BarDate处
data : {},
dataType : "json",
success : function(result) {
if (result) {
for(var i=0;i
names.push(result[i].product_name); //挨个取出类别并填入类别数组
}
for(var i=0;i
nums.push(result[i].product_sale); //挨个取出销量并填入销量数组
}
myChart.hideLoading(); //隐藏加载动画
myChart.setOption({ //加载数据图表
xAxis: {
data: names
},
series: [{
// 根据名字对应到相应的系列
name: '销量test',
data: nums
}]
});
}
},
error : function(errorMsg) {
//请求失败时执行该函数
alert("图表请求数据失败!");
myChart.hideLoading();
}
})
//循环操作 实时更新
setInterval(function(), 30000);
} //main end
});
然后启动springboot运行效果
领取专属 10元无门槛券
私享最新 技术干货