前言
前面的几篇小例子中,echarts数据都是写死在js中的,但是在实际echarts中,数据都是从数据库中动态获取过来。所以这里来简单演示一下echarts怎么通过ajax异步获取数据库中的数据在页面上进行动态展示。下面只是功能代码展示,具体的js包导入,以及springmvc等等这里不详细介绍!
具体代码演示
- 页面代码展示
<body>
<!-- 为 ECharts 准备一个具备大小(宽高)的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption({
title: {
text: '合肥市各区人口数统计',
left:'left'
},
legend:{
data:['人口数']
},
xAxis:{
data:[]
},
yAxis:{},
series : [{
name:'人口数',
type:'bar',
data:[]
}
]
});
myChart.showLoading({text: '数据正在加载中...' });
//这里设置定时器模拟数据延时加载
setTimeout(function(){
$.ajax({
url:"<%=basePath%>echartsAsynController/getDatas",
dataType:"json",
success:function(jsonData){
myChart.setOption({
xAxis: {
data: jsonData.xAxisCategory
},
series: [{
// 根据名字对应到相应的系列
name: '人口数',
data: jsonData.datas
}]
});
// 设置加载等待隐藏
myChart.hideLoading();
}
});
},2000);
</script>
</body>
上面页面上,我们先初始化echarts图标配置。然后将需要动态获取的xAxis上的数据和series上的数据先置空。后面在用ajax异步获取数据,然后再添加到echarts配置上去。上面简单利用js的延迟执行来模拟大量数据加载的空白,如果数据加载很慢留下空的图标在页面上,会造成很不好的用户体验。所以这里使用showLoading来显示一个数据加载中。
- 下面是echarts图标的数据包装类
/**
- @ClassName: EchartsBean
- @Description: TODO(图标数据包装类)
- @author 爱琴孩
*/
public class EchartsBean {
//表中的x轴类别
private List<String> xAxisCategory;
//表中的数据
private List<Integer> datas;
public EchartsBean(){}
public EchartsBean(List<String> xAxisCategory,List<Integer> datas){
this.xAxisCategory=xAxisCategory;
this.datas=datas;
}
public List<String> getxAxisCategory() {
return xAxisCategory;
}
public void setxAxisCategory(List<String> xAxisCategory) {
this.xAxisCategory = xAxisCategory;
}
public List<Integer> getDatas() {
return datas;
}
public void setDatas(List<Integer> datas) {
this.datas = datas;
}
}
- 下面是具体的逻辑控制层代码
@Controller
@RequestMapping("/echartsAsynController")
public class EchartsAsynController {
/**
* @Description: TODO(跳转页面)
* @return
* @author 爱琴孩
* @version V1.0
*/
@RequestMapping("/showTable")
public String showTable(){
System.out.println("跳转到对应的页面");
return "/core/echarts/asynData";
}
/**
*
* @Description: TODO(模拟从数据库获取数据)
* @return
* @author 爱琴孩
* @version V1.0
*/
@ResponseBody
@RequestMapping("/getDatas")
public EchartsBean getDatas(){
EchartsBean echartsBean =new EchartsBean();
List<String> xAxisCategory =Arrays.asList("高新区","蜀山区","瑶海区","包河区",
"经开区","政务区","滨湖新区","新站区");
List<Integer> datas = Arrays.asList(300,600,230,239,100,800,300,500);
echartsBean.setDatas(datas);
echartsBean.setxAxisCategory(xAxisCategory);
return echartsBean;
}
}
- 具体页面效果如下
最终展示效果如下
总结
上面只是简单模拟echarts从数据库动态获取数据。后面会和大家继续深入echarts的小细节!