Java版ECharts圖表庫ECharts-Java
本文由碼農網 – 小峰原創,轉載請看清文末的轉載要求,歡迎參與我們的付費投稿計劃!
ECharts-Java專案簡介
ECharts是一款功能非常強大的JavaScript圖表庫,ECharts-Java是ECharts的Java版,用Java程式碼實現了ECharts的所有圖表功能,ECharts中的Json結構也都轉換成了Java物件,這樣我們使用起來會非常方便,設定也相當靈活。
本專案是一個供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
ECharts-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 ] }]}
本文連結:http://www.codeceo.com/article/echarts-java.html
本文作者:碼農網 – 小峰
[ 原創作品,轉載必須在正文中標註並保留原文連結和作者等資訊。]
相關文章
- Angular10.x 如何使用eCharts圖表庫AngularEcharts
- ECharts:基於HTML5 Canvas的JavaScript圖表庫EchartsHTMLCanvasJavaScript
- 繪製圖表 go-echartsGoEcharts
- echarts圖表樣式轉換Echarts
- layui 中echarts實現圖表UIEcharts
- ECharts圖表——封裝通用配置Echarts封裝
- 三大圖表庫:ECharts 、 BizCharts 和 G2,該如何選擇?Echarts
- 前端圖表外掛ECharts入門教程前端Echarts
- Echarts資料視覺化,easyshu圖表整合。Echarts視覺化
- Echarts折線圖表斷點如何補全Echarts斷點
- asp.net使用echarts展示圖表資料ASP.NETEcharts
- H5 Echarts視覺化圖表的使用H5Echarts視覺化
- ECharts資料圖表使用介紹 超詳細Echarts
- ECharts實現資料圖表分析及程式碼Echarts
- 完整的 java/kotlin 生成 echarts 圖片方法JavaKotlinEcharts
- jCharts:Java圖表類庫使用介紹Java
- JFreeChart:多功能Java圖表類庫Java
- 將echarts生成的圖表變為圖片儲存起來Echarts
- 深圳地圖echarts地圖Echarts
- echarts圖表y軸資料反轉的實現Echarts
- 基於SWT的Java圖表類庫SWTChartJava
- Angular8 引入百度 Echarts,進行圖表分析AngularEcharts
- Java智慧圖表類庫JChartLib使用介紹Java
- echarts 地圖統計Echarts地圖
- echarts 折線圖拼接Echarts
- ASP.NET Web開發 Echarts圖表空資料優化ASP.NETWebEcharts優化
- Echarts資料視覺化:圖表篇(2)—— 折線圖、堆疊面積折線圖Echarts視覺化
- ECharts 餅圖繪製教程Echarts
- JavaWeb之製圖神器EchartsJavaWebEcharts
- Echarts 設定地圖大小Echarts地圖
- echarts調整圖表和標題的距離,以及設定高度Echarts
- 【vue3 + ts + echarts】封裝一個通用echarts元件-2.0版VueEcharts封裝元件
- ECharts 實現地圖散點圖(上)Echarts地圖
- Echarts 柱狀圖配置詳解Echarts
- echarts 3D圓柱圖Echarts3D
- vue使用Echarts繪製地圖VueEcharts地圖
- 圖表庫原始碼剖析 – Chart.js 最流行的 Canvas 圖表庫原始碼JSCanvas
- 圖表庫原始碼剖析 - Chart.js 最流行的 Canvas 圖表庫原始碼JSCanvas