首页 > 代码库 > 基于SpringMVC框架使用ECharts3.0实现堆叠条形图的绘制(下篇)
基于SpringMVC框架使用ECharts3.0实现堆叠条形图的绘制(下篇)
<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=http://www.mamicode.com/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=http://www.mamicode.com/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实现堆叠条形图的绘制(下篇)
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。