基於SpringMVC框架使用ECharts3.0實現折線圖,柱狀圖,餅狀圖,的繪製
阿新 • • 發佈:2019-01-31
頁面部分:
<%@ 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="width: 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 Series(){
super();
}
測試使用的實體類及其他部分:
public class TotalNum {
private Integer id;
private String week;
private Long count;
public class Visit {
private Integer id;
private String name;
private Integer value;
只作為筆記使用,此文轉載自:https://www.cnblogs.com/Damon-Luo/p/5918822.html