<script type="text/javascript"> $().ready(function() { var myChart = echarts.init(document.getElementById(‘main‘)); //图表显示提示信息 myChart.showLoading(); //定义图表options option = { tooltip : { trigger : ‘axis‘, axisPointer : { // 坐标轴指示器,坐标轴触发有效 type : ‘shadow‘ // 默认为直线,可选为:‘line‘ | ‘shadow‘ } }, legend : { data : [] }, grid : { left : ‘3%‘, right : ‘4%‘, bottom : ‘3%‘, containLabel : true }, xAxis : { type : ‘value‘ }, yAxis : { type : ‘category‘, data : [] }, series : [] }; //通过Ajax获取数据 $.ajax({ type : "post", async : false, //同步执行 url : "showEchartFoldBar.action", dataType : "json", //返回数据形式为json success : function(result) { if (result) { //将返回的category和series对象赋值给options对象内的category和series //因为xAxis是一个数组 这里需要是xAxis[i]的形式 option.legend.data = result.legend; option.yAxis.data = result.category; var serisdata = result.series[0].data; var datas = []; for ( var i = 0; i < serisdata.length; i++) { datas.push({ name : serisdata[i].name, type : serisdata[i].type, stack : serisdata[i].stack, label : { normal : { show : true, position : ‘insideRight‘ } }, data : serisdata[i].data, }); } option.series = datas; myChart.hideLoading(); myChart.setOption(option); } }, error : function(errorMsg) { alert("图表请求数据失败啦!"); } }); }); </script>
@RequestMapping("/showEchartFoldBar")
@ResponseBody
public EchartData FoldBarData() {
List<String> legend = new ArrayList<String>();
List<Visit> vis1 = visitBiz.findByCondition(new Visit(null, "星期一", null, null));
for (Visit visit : vis1) {
legend.add(visit.getName());
}
List<String> category = new ArrayList<String>();
List<Visit> vis2 = visitBiz.findByCondition(new Visit(null,null, null,"邮件营销"));
for (Visit visit : vis2) {
category.add(visit.getWeek());
}
List<Map> serisData=new ArrayList<Map>();
List<String> name = visitBiz.selectName();
for (String str : name) {
Map map =new HashMap();
map.put("name",str);
List<Visit> lis = visitBiz.findByCondition(new Visit(null, null, null, str));
List<Long> data=new ArrayList<Long>();
for (Visit visit : lis) {
data.add(visit.getCount());
}
map.put("data", data);
map.put("type", "bar");
map.put("stack", "总量");
serisData.add(map);
}
List<Series> series = new ArrayList<Series>();// 纵坐标
series.add(new Series(null,null,serisData));
EchartData data = new EchartData(legend,category, series);
return data;
}
public class Visit { private Integer id; private String week; private Long count; private String name;
基于SpringMVC框架使用ECharts3.0实现堆叠条形图的绘制(下篇)
原文:http://www.cnblogs.com/Damon-Luo/p/5924229.html