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

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
        ]
    }]}

軟體首頁 軟體文件 軟體下載