Springboot＋Echarts＋Ajax 入门案列

用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运行效果