Java版ECharts圖表庫ECharts-Java

2014-10-17    分類:開源軟體、報表/圖表元件、程式設計開發、首頁精華1人評論發表於2014-10-17

本文由碼農網 – 小峰原創,轉載請看清文末的轉載要求,歡迎參與我們的付費投稿計劃

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說明

  1. Option正式程式碼中使用,不需要任何依賴。
  2. GsonOption正式程式碼中可以使用,需要引入Gson包,使用toString()方法可以轉換為JSON結構的資料(支援function,詳情看下面的function說明)。
  3. 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’;})()”);

  1. 先看第一種,這裡的"function中,雙引號和function必須連著,中間不能存在空格,否則不會識別。然後是結尾的}",這裡也必須連著不能有空格,在首尾這兩段程式碼之間不能出現}",否則會判斷出錯。如果在{}中的程式碼有字串,請使用單引號',雙引號出現在單引號內時使用\"即可。除此之外沒有別的限制。
  2. 再看第二種,這裡的"(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
本文作者:碼農網 – 小峰
原創作品,轉載必須在正文中標註並保留原文連結和作者等資訊。]

相關文章