百度echarts是一种很好的绘制图表的工具,现在介绍一下如何异步加载echarts的数据
首先贴上百度echarts的官网地址(http://echarts.baidu.com/index.html),下载echarts.js文件和喜欢的主题js
我的demo例子是基于SSM(Spring+SpringMVC+MyBatis)框架+Maven 创建的,工程结构如下
-
下面来梳理一下图表需要用到的数据:
- 1、legend的data:图例组件,data属性要与xAxis的data属性一致
- 2、xAxis的data:x轴的数值
- 3、series: 填充图表的数据 首先看一下jsp页面如何设置
- 1、导入js文件
<script src="jquery/1.9.1/jquery.min.js"></script>
<script src="echarts/echarts.js"></script>
<script src="echarts/macarons.js"></script>
2、定义div块
<!-- 定义一个div块,设置宽高,图表就加载到div里面 -->
<div id="main" style="width: 600px; height: 400px;"></div>
3、设置js脚本,利用ajax加载数据
<script type="text/javascript">
//基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'),'macarons');
$.ajax({
'url' : '/echarts/chart/getAllCount.do', //url路径
'type' : 'post', //数据传送方法
'dataType' : 'json', //返回的数据类型
success : function(result) {
fetchData(result);
}
})
myChart.showLoading(); //显示缓冲遮盖层
function fetchData(result) {
myChart.hideLoading(); //隐藏遮盖层
myChart.setOption({ //加载echarts
title : {
text: '企业年用户增加数',
},
tooltip : { //提示框组件
trigger: 'axis'
},
legend: { //图例组件
data:result.legend
//data:["数量"]
},
toolbox: {
show : true,
feature : {
mark : {show: true},
magicType : {show: true, type: ['line', 'bar']}, //可以转换为柱状图或折线图(由type定义)
}
},
calculable : true,
xAxis : [
{
type : 'category',
boundaryGap : false,
data : result.category
//data:["2016","2017","2018"]
}
],
yAxis : {},
series : [
{
name: result.series.name,
type: result.series.type,
data: result.series.data, //data:["4","10","1"]
markPoint : { //图表标注
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
},
markLine : { //图表标注线
data : [
{type : 'average', name: '平均值'}
]
}
},
]
});
}
</script>
-
然后看一下后台的设置:
- 1、ChartsModel.java (包含列表所需的所有数据)
public class ChartsModel {
private List legend; //对应于图表的legend的data数组
private List category; //对应于图表的category的data数组(就是x轴)
private SeriesModel series; //图表的series属性是一个对象数组,额外设置一个series类
//get、set方法
public List getLegend() {
return legend;
}
public void setLegend(List legend) {
this.legend = legend;
}
public List getCategory() {
return category;
}
public void setCategory(List category) {
this.category = category;
}
public SeriesModel getSeries() {
return series;
}
public void setSeries(SeriesModel series) {
this.series = series;
}
}
2、SeriesModel.java
public class SeriesModel {
private int id; //series的序号(因为可能有多个series)
private String name; //series的名称,对应legend的name
private String type; //图表类型,可以是line,pie之类的
private List data; //图表数据
//对应的get、set方法
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getType() {
return type;
}
public void setType(String type) {
this.type = type;
}
public List getData() {
return data;
}
public void setData(List data) {
this.data = data;
}
}
3、ChartServiceImpl.java的一些代码 (封装图表数据)
public ChartsModel getAllCount(){
List<Map> list=new ArrayList(chartDao.getAllCount());
ChartsModel chartsModel=new ChartsModel();
SeriesModel seriesModel=new SeriesModel();
//设置legend数组
ArrayList list1=new ArrayList();
list1.add("数量");
//设置category数组(X轴)
ArrayList list2=new ArrayList();
for(int i=0;i<list.size();i++){
list2.add(list.get(i).get("years"));
}
//设置series的data数组
ArrayList list3=new ArrayList();
for(int i=0;i<list.size();i++){
list3.add(list.get(i).get("count"));
}
seriesModel.setId(1);
seriesModel.setName("数量"); //series的name要与legend的元素一致
seriesModel.setType("bar"); //类型设为柱形图
seriesModel.setData(list3); //填充在X轴上面的Y轴数据
chartsModel.setLegend(list1);
chartsModel.setCategory(list2);
chartsModel.setSeries(seriesModel);
return chartsModel;
}
4、Controller层的调用(要对应前端ajax的url地址)
@Controller
@RequestMapping("/chart")
public class ChartController {
@Resource(name="ChartServiceImpl")
IChartService chartService;
@RequestMapping(value="/getAllCount.do",method=RequestMethod.POST)
@ResponseBody
public ChartsModel getAllCount(){
return chartService.getAllCount();
}
}
最终效果图:
最后附上demo的下载地址:(http://pan.baidu.com/s/1dFIcZ89)
ps:demo中还加上了饼图的异步加载方法,直接上代码吧。