页面部分
<%@ page language="java" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts柱状图</title> <script type="text/javascript" src="../js/jquery.min.js"></script> <script type="text/javascript" src="../js/echarts.js"></script> </head> <body> <!-- 为ECharts准备一个具备大小（宽高）的Dom --> <div id="main" style=" 600px;height:400px;"></div> <script type="text/javascript"> $().ready(function() { var myChart = echarts.init(document.getElementById('main')); //图表显示提示信息 myChart.showLoading(); //定义图表options var options = { color : [ '#3398DB' ], title : { text : "通过Ajax获取数据呈现图标示例", subtext : "www.stepday.com", sublink : "http://www.stepday.com/myblog/?Echarts" }, tooltip : { trigger : 'axis' }, legend : { data : [] }, toolbox : { show : true, feature : { mark : false } }, calculable : true, xAxis : [ { type : 'category', data : [] } ], yAxis : [ { type : 'value', splitArea : { show : true } } ], series : [ { barWidth : '60%' } ] }; //通过Ajax获取数据 $.ajax({ type : "post", async : false, //同步执行 url : "showEchartBar.action", dataType : "json", //返回数据形式为json success : function(result) { if (result) { //将返回的category和series对象赋值给options对象内的category和series //因为xAxis是一个数组 这里需要是xAxis[i]的形式 options.xAxis[0].data = result.category; options.series = result.series; options.legend.data = result.legend; myChart.hideLoading(); myChart.setOption(options); } }, error : function(errorMsg) { alert("图表请求数据失败啦!"); } }); }); </script> </body> </html>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>echarts饼状图</title> <script type="text/javascript" src="../js/jquery.min.js"></script> <script type="text/javascript" src="../js/echarts.js"></script> </head> <body> <!--定义页面图表容器--> <!-- 必须制定容器的大小（height、width） --> <div id="main" style="height: 400px; border: 1px solid #ccc; padding: 10px;"></div> <script type="text/javascript"> $().ready(function() { var myChart = echarts.init(document.getElementById('main')); //图表显示提示信息 myChart.showLoading(); //定义图表options var options = { title : { text : '某站点用户访问来源', subtext : '纯属虚构', x : 'center' }, tooltip : { trigger : 'item', formatter : "{a} <br/>{b} : {c} ({d}%)" }, legend : { orient : 'vertical', left : 'left', data : [] }, series : [ { name : '访问来源', type : 'pie', data : [] } ] }; //通过Ajax获取数据 $.ajax({ type : "post", async : false, //同步执行 url : "showEchartPie.action", dataType : "json", //返回数据形式为json success : function(result) { if (result) { options.legend.data = result.legend; //将返回的category和series对象赋值给options对象内的category和series //因为xAxis是一个数组 这里需要是xAxis[i]的形式 options.series[0].name = result.series[0].name; options.series[0].type = result.series[0].type; var serisdata = result.series[0].data; //遍历 /* var datas = []; for ( var i = 0; i < serisdata.length; i++) { datas.push({ name : serisdata[i].name, value : serisdata[i].value }); } options.series[0].data = datas; */ //jquery遍历 var value = []; $.each(serisdata, function(i, p) { value[i] = { 'name' : p['name'], 'value' : p['value'] }; }); options.series[0]['data'] = value; myChart.hideLoading(); myChart.setOption(options); } }, error : function(errorMsg) { alert("图表请求数据失败啦!"); } }); }); </script> </body> </html>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="../js/echarts.js"></script> <script type="text/javascript" src="../js/jquery.min.js"></script> </head> <title>echarts折线图</title> <body> <!--定义页面图表容器--> <!-- 必须制定容器的大小（height、width） --> <div id="main" style="height: 400px; border: 1px solid #ccc; padding: 10px;"></div> <script type="text/javascript"> $().ready( function() { var myChart = echarts.init(document.getElementById('main')); //图表显示提示信息 myChart.showLoading(); //定义图表options var options = { title: { text: "通过Ajax获取数据呈现图标示例", subtext: "www.stepday.com", sublink: "http://www.stepday.com/myblog/?Echarts" }, tooltip: { trigger: 'axis' }, legend: { data: [] }, toolbox: { show: true, feature: { mark: false } }, calculable: true, xAxis: [ { type: 'category', data: [] } ], yAxis: [ { type: 'value', splitArea: { show: true } } ], series: [] }; //通过Ajax获取数据 $.ajax({ type : "post", async : false, //同步执行 url : "showEchartLine.action", dataType : "json", //返回数据形式为json success : function(result) { if (result) { //将返回的category和series对象赋值给options对象内的category和series //因为xAxis是一个数组 这里需要是xAxis[i]的形式 options.xAxis[0].data = result.category; options.series = result.series; options.legend.data = result.legend; myChart.hideLoading(); myChart.setOption(options); } }, error : function(errorMsg) { alert("图表请求数据失败啦!"); } }); }); </script> </body> </html>
后端java代码
@Controller @RequestMapping("/echartsJSP") public class EchartAction { @Autowired private TotalNumBiz toatlNumBiz; @Autowired private VisitBiz visitBiz; @RequestMapping("/showEchartLine") @ResponseBody public EchartData lineData() { System.out.println("折线图"); List<String> category = new ArrayList<String>(); List<Long> serisData=new ArrayList<Long>(); List<TotalNum> list = toatlNumBiz.findAll(); for (TotalNum totalNum : list) { category.add(totalNum.getWeek()); serisData.add(totalNum.getCount()); } List<String> legend = new ArrayList<String>(Arrays.asList(new String[] { "总数比较" }));// 数据分组 List<Series> series = new ArrayList<Series>();// 纵坐标 series.add(new Series("总数比较", "line", serisData)); EchartData data = new EchartData(legend, category, series); return data; } @RequestMapping("/showEchartBar") @ResponseBody public EchartData BarData() { System.out.println("柱状图"); List<String> category = new ArrayList<String>(); List<Long> serisData=new ArrayList<Long>(); List<TotalNum> list = toatlNumBiz.findAll(); for (TotalNum totalNum : list) { category.add(totalNum.getWeek()); serisData.add(totalNum.getCount()); } List<String> legend = new ArrayList<String>(Arrays.asList(new String[] { "总数比较" }));// 数据分组 List<Series> series = new ArrayList<Series>();// 纵坐标 series.add(new Series("总数比较", "bar", serisData)); EchartData data = new EchartData(legend, category, series); return data; } /** * 饼状图 * @param <T> * @return */ @RequestMapping("/showEchartPie") @ResponseBody public EchartData PieData() { List<String> legend = new ArrayList<String>(); List<Map> serisData=new ArrayList<Map>(); List<Visit> list = visitBiz.findAll(); for (Visit visit : list) { Map map =new HashMap(); legend.add(visit.getName()); map.put("value", visit.getValue()); map.put("name",visit.getName()); serisData.add(map); } List<Series> series = new ArrayList<Series>();// 纵坐标 series.add(new Series("总数比较", "pie",serisData)); EchartData data = new EchartData(legend,null, series); return data; } }
另外使用EchartsData和Series两个类封装数据
public class EchartData { public List<String> legend = new ArrayList<String>();// 数据分组 public List<String> category = new ArrayList<String>();// 横坐标 public List<Series> series = new ArrayList<Series>();// 纵坐标 public EchartData(List<String> legendList, List<String> categoryList, List<Series> seriesList) { super(); this.legend = legendList; this.category = categoryList; this.series = seriesList; } }
public class Series<T>{ public String name; public String type; public List<T> data;// 这里要用int 不能用String 不然前台显示不正常（特别是在做数学运算的时候） public Series(String name, String type, List<T> data) { super(); this.name = name; this.type = type; this.data = data; }
测试使用的实体类及其他部分
public class TotalNum { private Integer id; private String week; private Long count;
public class Visit { private Integer id; private String name; private Integer value;