供Java開發使用的ECharts的開發包：ECharts-Java
這是一個針對 ECharts 2.0 版本的Java類庫，實現了所有ECharts中的Json結構對應的Java對象，并且可以很方便的創建Option
本項目是一個供Java開發使用的ECharts的開發包，主要目的是方便在Java中構造ECharts中可能用到的全部數據結構，如完整的結構 Option。Option中的數據Series，包含Bar-柱狀圖，Line-折線圖，Pie-餅圖，Chord-和弦圖等，支持ECharts中的 所有圖表。支持所有的Style類，如AreaStyle,ChordStyle,ItemStyle,LineStyle,LinkStyle等等。支 持多種Data數據類型，一個通用的Data數據，以及PieData,MapData,ScatterData,KData等針對性的數據結構。
你可以使用本項目直接構造一個Option對象，轉換為JSON后直接用js設置myChart.setOption(option)，或者你也可以在前段構造基本的Option對象，然后使用本項目來構造其中需要的任意某部分的數據，如使用Series支持的圖表類型創建Series數據。
文檔地址
目前文檔并不全面，但是我本人并不知道大家需要什么樣的文檔，所以暫時就這樣了，如果有建議可以在這里提建議
項目支持
圖表類型
-
Line - 折線（面積）圖
-
Bar - 柱狀（條形）圖
-
Scatter - 散點（氣泡）圖
-
K - K線圖
-
Pie - 餅（圓環）圖
-
Radar - 雷達（面積）圖
-
Chord - 和弦圖
-
Force - 力導向布局圖
-
Map - 地圖
-
Gauge - 儀表盤
-
Funnel - 漏斗圖
-
Island - 孤島圖（官方未提供，這里只有數據Island對象）
ECharts組件
-
Axis - 坐標軸
-
Grid - 網格
-
Title - 標題
-
Tooltip - 提示
-
Legend - 圖例
-
DataZoom - 數據區域縮放
-
DataRange - 值域漫游
-
Toolbox - 工具箱
-
Timeline - 時間線
Option說明
-
Option正式代碼中使用，不需要任何依賴。 -
GsonOption正式代碼中可以使用，需要引入Gson包，使用toString()方法可以轉換為JSON結構的數據（支持function，詳情看下面的function說明）。 -
EnhancedOption測試專用，主要方便在瀏覽器中直接查看效果。
function說明
由于JSON標準中不包含function類型，因而大多數的JSON庫都不直接支持這種類型，處理這種類型最簡單的方式就是轉換為JSON字符串時，對字符串進行處理。
雖然像jackson json和fastjson通過注解或者自定義的實現序列化接口可以實現，畢竟和JSON庫的結合太密切了，而且使用起來也很麻煩，不如直接處理字符串，或者在js中處理。
本項目中提供了GSON實現的GsonOption，就是重寫了toString()方法，改為輸出JSON結構的字符串，并且支持以下兩種function形式:
{
formatter:function(value){
return value.substring(0,8);
}}//和{
formatter:(function(){
return 'Temperature : <br/>{b}km : {c}°C';
})()} 當然這種形式在Java中書寫的時候有著嚴格的要求：
option.tooltip().trigger(Trigger.axis).formatter("function(value){return value.substring(0,8);}");option.tooltip().trigger(Trigger.axis).formatter("(function(){return 'Temperature : <br/>{b}km : {c}°C';})()"); -
先看第一種，這里的
"function中，雙引號和function必須連著，中間不能存在空格，否則不會識別。然后是結尾的}"，這里也必須連著不能有空格，在首尾這兩段代碼之間不能出現}"，否則會判斷出錯。如果在{}中的代碼有字符串，請使用單引號'，雙引號出現在單引號內時使用\"即可。除此之外沒有別的限制。 -
再看第二種，這里的
"(function中，雙引號、括號和function必須連著，中間不能存在空格，否則不會識別。然后是結尾的})()"，這里也必須連著不能有空格，在首尾這兩段代碼之間不能出現})()"，否則會判斷出錯。如果在{}中的代碼有字符串，請使用單引號'，雙引號出現在單引號內時使用\"即可。除此之外沒有別的限制。
上述對function的處理很簡單，不限制在formatter使用，所有值都能這么寫，你可以參考寫出自己的Option
挑兩個例子大概的看看這個Java類庫如何使用
第一個例子，簡單的折線圖
對應的ECharts例子地址： http://echarts.baidu.com/doc/example/line5.html
測試代碼地址：LineTest5.java
@Testpublic void test() {
//地址:http://echarts.baidu.com/doc/example/line5.html
EnhancedOption option = new EnhancedOption();
option.legend("高度(km)與氣溫(°C)變化關系");
option.toolbox().show(true).feature(Tool.mark, Tool.dataView, new MagicType(Magic.line, Magic.bar), Tool.restore, Tool.saveAsImage);
option.calculable(true);
option.tooltip().trigger(Trigger.axis).formatter("Temperature : <br/>{b}km : {c}°C");
ValueAxis valueAxis = new ValueAxis();
valueAxis.axisLabel().formatter("{value} °C");
option.xAxis(valueAxis);
CategoryAxis categoryAxis = new CategoryAxis();
categoryAxis.axisLine().onZero(false);
categoryAxis.axisLabel().formatter("{value} km");
categoryAxis.boundaryGap(false);
categoryAxis.data(0, 10, 20, 30, 40, 50, 60, 70, 80);
option.yAxis(categoryAxis);
Line line = new Line();
line.smooth(true).name("高度(km)與氣溫(°C)變化關系").data(15, -50, -56.5, -46.5, -22.1, -2.5, -27.7, -55.7, -76.5).itemStyle().normal().lineStyle().shadowColor("rgba(0,0,0,0.4)");
option.series(line);
option.exportToHtml("line5.html");
option.view();} 代碼生成的json結果：
{
"calculable": true,
"toolbox": {
"show": true,
"feature": {
"restore": {
"show": true,
"title": "還原"
},
"magicType": {
"show": true,
"title": {
"line": "折線圖切換",
"stack": "堆積",
"bar": "柱形圖切換",
"tiled": "平鋪"
},
"type": ["line", "bar"]
},
"dataView": {
"show": true,
"title": "數據視圖",
"readOnly": false,
"lang": ["Data View", "close", "refresh"]
},
"mark": {
"show": true,
"title": {
"mark": "輔助線開關",
"markClear": "清空輔助線",
"markUndo": "刪除輔助線"
},
"lineStyle": {
"color": "#1e90ff",
"type": "dashed",
"width": 2
}
},
"saveAsImage": {
"show": true,
"title": "保存為圖片",
"type": "png",
"lang": ["點擊保存"]
}
}
},
"tooltip": {
"trigger": "axis",
"formatter": "Temperature : \u003cbr/\u003e{b}km : {c}°C"
},
"legend": {
"data": ["高度(km)與氣溫(°C)變化關系"]
},
"xAxis": [{
"type": "value",
"axisLabel": {
"formatter": "{value} °C"
}
}],
"yAxis": [{
"type": "category",
"boundaryGap": false,
"axisLine": {
"onZero": false
},
"axisLabel": {
"formatter": "{value} km"
},
"data": [
0, 10, 20, 30, 40, 50, 60, 70, 80
]
}],
"series": [{
"smooth": true,
"name": "高度(km)與氣溫(°C)變化關系",
"type": "line",
"itemStyle": {
"normal": {
"lineStyle": {
"shadowColor": "rgba(0,0,0,0.4)"
}
},
"emphasis": {}
},
"data": [
15, -50, -56.5, -46.5, -22.1, -2.5, -27.7, -55.7, -76.5
]
}]} 第二個例子，使用(function(){})()執行JS代碼
對應的ECharts例子地址： http://echarts.baidu.com/doc/example/pie6.html
測試代碼地址：PieTest6.java
@Testpublic void test() {
//地址：http://echarts.baidu.com/doc/example/pie6.html
ItemStyle dataStyle = new ItemStyle();
dataStyle.normal().label(new Label().show(false)).labelLine().show(false);
ItemStyle placeHolderStyle = new ItemStyle();
placeHolderStyle.normal().color("rgba(0,0,0,0)").label(new Label().show(false)).labelLine().show(false);
placeHolderStyle.emphasis().color("rgba(0,0,0,0)");
EnhancedOption option = new EnhancedOption();
option.title().text("你幸福嗎？")
.subtext("From ExcelHome")
.sublink("http://e.weibo.com/1341556070/AhQXtjbqh")
.x(X.center)
.y(Y.center)
.itemGap(20)
.textStyle().color("rgba(30,144,255,0.8)")
.fontFamily("微軟雅黑")
.fontSize(35)
.fontWeight("bolder");
option.tooltip().show(true).formatter("{a} <br/>{b} : {c} ({d}%)");
option.legend().orient(Orient.vertical)
.x("(function(){return document.getElementById('main').offsetWidth / 2;})()")
.y(56)
.itemGap(12)
.data("68%的人表示過的不錯", "29%的人表示生活壓力很大", "3%的人表示“我姓曾”");
option.toolbox().show(true).feature(Tool.mark, Tool.dataView, Tool.restore, Tool.saveAsImage);
Pie p1 = new Pie("1");
p1.clockWise(false).radius(125, 150).itemStyle(dataStyle)
.data(new Data("68%的人表示過的不錯", 68), new Data("invisible", 32).itemStyle(placeHolderStyle));
Pie p2 = new Pie("2");
p2.clockWise(false).radius(100, 125).itemStyle(dataStyle)
.data(new Data("29%的人表示生活壓力很大", 29), new Data("invisible", 71).itemStyle(placeHolderStyle));
Pie p3 = new Pie("3");
p3.clockWise(false).radius(75, 100).itemStyle(dataStyle)
.data(new Data("3%的人表示“我姓曾”", 3), new Data("invisible", 97).itemStyle(placeHolderStyle));
option.series(p1, p2, p3);
option.exportToHtml("pie6.html");
option.view();} 這段代碼注意
.x("(function(){return document.getElementById('main').offsetWidth / 2;})()") 這個地方，這里巧妙的利用(function(){})()執行JS代碼，實現了官方例子中的功能，生成的JSON結果如下：
{
"title": {
"text": "你幸福嗎？",
"subtext": "From ExcelHome",
"sublink": "http://e.weibo.com/1341556070/AhQXtjbqh",
"textStyle": {
"color": "rgba(30,144,255,0.8)",
"fontSize": 35,
"fontFamily": "微軟雅黑",
"fontWeight": "bolder"
},
"x": "center",
"y": "center",
"itemGap": 20
},
"toolbox": {
"feature": {
"restore": {
"show": true,
"title": "還原"
},
"dataView": {
"show": true,
"title": "數據視圖",
"readOnly": false,
"lang": ["Data View", "close", "refresh"]
},
"mark": {
"show": true,
"title": {
"mark": "輔助線開關",
"markClear": "清空輔助線",
"markUndo": "刪除輔助線"
},
"lineStyle": {
"color": "#1e90ff",
"type": "dashed",
"width": 2
}
},
"saveAsImage": {
"show": true,
"title": "保存為圖片",
"type": "png",
"lang": ["點擊保存"]
}
},
"show": true
},
"tooltip": {
"show": true,
"formatter": "{a} <br/>{b} : {c} ({d}%)"
},
"legend": {
"orient": "vertical",
"data": ["68%的人表示過的不錯", "29%的人表示生活壓力很大", "3%的人表示“我姓曾”"],
"x": (function() {
return document.getElementById('main').offsetWidth / 2;
})(),
"y": 56,
"itemGap": 12
},
"series": [{
"radius": [125, 150],
"clockWise": false,
"name": "1",
"type": "pie",
"itemStyle": {
"normal": {
"label": {
"show": false
},
"labelLine": {
"show": false
}
}
},
"data": [{
"name": "68%的人表示過的不錯",
"value": 68
}, {
"name": "invisible",
"value": 32,
"itemStyle": {
"normal": {
"label": {
"show": false
},
"labelLine": {
"show": false
},
"color": "rgba(0,0,0,0)"
},
"emphasis": {
"color": "rgba(0,0,0,0)"
}
}
}]
}, {
"radius": [100, 125],
"clockWise": false,
"name": "2",
"type": "pie",
"itemStyle": {
"normal": {
"label": {
"show": false
},
"labelLine": {
"show": false
}
}
},
"data": [{
"name": "29%的人表示生活壓力很大",
"value": 29
}, {
"name": "invisible",
"value": 71,
"itemStyle": {
"normal": {
"label": {
"show": false
},
"labelLine": {
"show": false
},
"color": "rgba(0,0,0,0)"
},
"emphasis": {
"color": "rgba(0,0,0,0)"
}
}
}]
}, {
"radius": [75, 100],
"clockWise": false,
"name": "3",
"type": "pie",
"itemStyle": {
"normal": {
"label": {
"show": false
},
"labelLine": {
"show": false
}
}
},
"data": [{
"name": "3%的人表示“我姓曾”",
"value": 3
}, {
"name": "invisible",
"value": 97,
"itemStyle": {
"normal": {
"label": {
"show": false
},
"labelLine": {
"show": false
},
"color": "rgba(0,0,0,0)"
},
"emphasis": {
"color": "rgba(0,0,0,0)"
}
}
}]
}]};