最近由於要使用到百度的echarts來做圖表的展示，近些天一直在學習echarts的使用，說實話百度echarts的官方文檔對於前端通過js來完成圖表的展示，確實有很方便之處，但是對於某些數據的處理和賦值都在前端完成確實有些繁瑣，國人對於這方面矢志不渝，在後端通過封裝好option對象然後轉成json傳到前端 極大的簡化了前端對option的操作。這裏就簡單的寫一些後端對option對象的封裝。
首先引入 echarts的jar包依賴和js腳本
這裏後端使用 ECharts-2.2.7.jar
下載地址 http://mvnrepository.com/artifact/com.github.abel533/ECharts
前端使用 echart.js
下載地址 http://echarts.baidu.com/echarts2/
前後端都是使用2.X版本 echarts對2.x支持比較全面
注意：echarts的後端封裝是針對於Echarts2.x相契合的 對於3.x之後沒有進行更新 所以如果使用盡量安裝2.x的官方文檔進行相應的option對象的後臺封裝 ！！切記
依賴引入完之後就可以開始寫代碼了
1.前後端實現 – 柱狀圖表
後端首先進行option對象的封裝
代碼如下：
/**
* 柱狀圖------圖表測試 Controller
*
*/
@Controller
@RequestMapping("/echart")
public class EchartsController {
/**
* 柱狀圖 圖表option 的封裝 測試用例--路段人流數據
* @return
*/
@RequestMapping(value = "/bar",method = RequestMethod.POST)
@ResponseBody()
public String bar(){
//由於是測試用例首先聲明 1.標題 2.x軸代表的路段 3.路段數據
//標題
String title = "路段人流數據統計";
//路段
String[] roads = {"長江路","長河路","長安路","西湖路","建安路"};
//路段數據
int[] datas = {123,153,643,234,453};
//####開始構建option對象 ######
//這裏先做最簡單的測試用用例 其他渲染的屬性 大家可以在瞭解之後自行測試使用
//1.創建option對象 有兩種方式 一種是直接創建option但是在封裝好option之後要使用json轉換工具進行格式的轉換
//這裏使用第二種方式直接構建GsonOption 通過toString方法可轉換成json
Option option = new GsonOption();
//2.設置標題 可選
option.title().text(title).x("left");//將標題傳入即可 並且支持鏈式調用 設置顯示位置 居左
//3.設置圖例 可選
option.legend("路段數據");
//4.設置工具欄 可選
option.toolbox().show(true).feature(Tool.mark,
Tool.magicType); //設置可標記
//5.設置顯示工具
option.tooltip().show(true).
formatter("{a}</br>{b}:{c}");//設置顯示的格式 當鼠標放到柱狀圖上時的顯示格式
//6.設置x軸數據
CategoryAxis categoryAxis = new CategoryAxis();
categoryAxis.data(roads);
option.xAxis(categoryAxis);
//7.設置y軸 這裏不給指定數據 自動調整
ValueAxis valueAxis = new ValueAxis();
option.yAxis(valueAxis);
//8.填充柱狀圖數據
Bar bar = new Bar();
bar.name("路段數據");
for(int i = 0; i < roads.length; i++){
Map<String,Object> map = new HashMap<>();
map.put("value",datas[i]);
map.put("name",roads[i]);
bar.data(map);//指定路段裝入指定數據
}
//裝入數據表中
option.series(bar);
//option進行json格式處理
String result = option.toString();
return result ;
}
}其中特別要注意的是option最後轉換成json格式的數據
如果使用Option opiton = new Option()來構建的option對象 在傳入前端時可使用Goolge的Gson轉換jar進行json的轉換
例如 new Gson().toJosn(option);
如果使用的是 Option option = new GsonOption(); 來構建的對象
可直接對option進行toString()即可 GsonOption對toString進行了重寫;
傳入前端的數據用eval（）方法對json字符串進行解析並加上（）後可直接使用
前端代碼如下：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
//一定要指定div的高度和寬度以便能撐起圖標
<div id="echart"style="height:300px;width:600px;>
</div>
<script src="/static/jquery.min.js"></script>
<script src="/static/echarts.min.js"></script>
<script>
//圖表的初始化
var echarts = echarts.init(document.getElementById('echart');
initEcharts();
function initEcharts(){
echarts.clear();
echarts.showLoading({text: '正在努力的讀取數據中...'});
$.ajax({
url:"/echarts/bar",
type:"post",
success:function(data){
var option = eval("("+data+")");
echarts.setOption(option);
echarts.hideLoading();
}
})
}
</script>顯示圖表如下：
解釋一下圖標
1.代表標題並且居左
2.代表圖例 在填充內容是bar的name應與之對應
3.代表工具欄
4.代表顯示工具格式如上 – –：–
5.代表x軸路段名稱
折線圖測試
直接上代碼：
java封裝option代碼：
/**
* 折線圖的 測試用例
* @return
*/
@RequestMapping(value = "/line",method =RequestMethod.POST,
produces = {"application/text;charset=UTF-8"})
@ResponseBody()
public String line(){
String title = "斷舍離";
String[] types = {"斷","舍","離"};
int[][] datas = {{13,456,72,68,242,445,81},
{123,46,752,78,22,45,841},
{123,456,72,778,222,45,841}};
String[] weeks ={"星期一","星期二","星期三","星期四","星期五","星期六","星期日"};
Option option = new GsonOption();
option.title().text(title).x("left");
option.legend().data(types).x("center");
option.tooltip().show(true);
option.toolbox().show(true).feature(Tool.magicType,Tool.dataZoom);
CategoryAxis categoryAxis = new CategoryAxis();
categoryAxis.data(weeks);
option.xAxis(categoryAxis);
option.yAxis(new ValueAxis());
//循環爲了獲取多條折線數據
for(int i =0;i< types.length;i++){
//創建line對象
Line line = new Line();
String type = types[i];
line.name(type);
for(int j = 0; j<weeks.length;j++){
line.data(datas[i][j]);
}
option.series(line);
}
return option.toString();
}前端代碼：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
//一定要指定div的高度和寬度以便能撐起圖標
<div id="echart"style="height:300px;width:600px;>
</div>
<script src="/static/jquery.min.js"></script>
<script src="/static/echarts.min.js"></script>
<script>
//圖表的初始化
var echarts = echarts.init(document.getElementById('echart');
initEcharts();
function initEcharts(){
echarts.clear();
echarts.showLoading({text: '正在努力的讀取數據中...'});
$.ajax({
url:"/echarts/line",
type:"post",
success:function(data){
//對傳過來的json字符串轉化爲json對象 等同於 JSON.parse(data);
var option = eval("("+data+")");
echarts.setOption(option);
echarts.hideLoading();
}
})
}
</script>結果如下圖：
下一篇 Echarts-java後端封裝option —（二）餅圖測試用例
如有錯誤還請見諒 ，如有能幫助到你的地方 榮幸之至