ECharts-JavaECharts - Java 類庫

這是一個針對 ECharts 2.0 版本的Java類庫，實現(xiàn)了所有ECharts中的Json結(jié)構(gòu)對應(yīng)的Java對象，并且可以很方便的創(chuàng)建Option

本項目是一個供Java開發(fā)使用的ECharts的開發(fā)包，主要目的是方便在Java中構(gòu)造ECharts中可能用到的全部數(shù)據(jù)結(jié)構(gòu)，如完整的結(jié)構(gòu) Option。Option中的數(shù)據(jù)Series，包含Bar-柱狀圖，Line-折線圖，Pie-餅圖，Chord-和弦圖等，支持ECharts中的 所有圖表。支持所有的Style類，如AreaStyle,ChordStyle,ItemStyle,LineStyle,LinkStyle等等。支 持多種Data數(shù)據(jù)類型，一個通用的Data數(shù)據(jù)，以及PieData,MapData,ScatterData,KData等針對性的數(shù)據(jù)結(jié)構(gòu)。

你可以使用本項目直接構(gòu)造一個Option對象，轉(zhuǎn)換為JSON后直接用js設(shè)置myChart.setOption(option)，或者你也可以在前段構(gòu)造基本的Option對象，然后使用本項目來構(gòu)造其中需要的任意某部分的數(shù)據(jù)，如使用Series支持的圖表類型創(chuàng)建Series數(shù)據(jù)。

關(guān)于本項目的最新狀態(tài)和更新日志請看

gitosc: http://git.oschina.net/free/ECharts

github: https://github.com/abel533/ECharts

項目支持

圖表類型

• Line - 折線（面積）圖

• Bar - 柱狀（條形）圖

• Scatter - 散點（氣泡）圖

• K - K線圖

• Pie - 餅（圓環(huán)）圖

• Radar - 雷達（面積）圖

• Chord - 和弦圖

• Force - 力導(dǎo)向布局圖

• Map - 地圖

• Gauge - 儀表盤

• Funnel - 漏斗圖

• Island - 孤島圖（官方未提供，這里只有數(shù)據(jù)Island對象）

• EventRiver - 事件河流圖

• Venn - 韋恩圖

• Tree - 樹圖

• Treemap - 矩形樹圖

• WordCloud - 詞云

• Heatmap - 熱力圖

ECharts組件

• Axis - 坐標軸

• Grid - 網(wǎng)格

• Title - 標題

• Tooltip - 提示

• Legend - 圖例

• DataZoom - 數(shù)據(jù)區(qū)域縮放

• DataRange - 值域漫游

• Toolbox - 工具箱

• Timeline - 時間線

Option說明

1. Option正式代碼中使用，不需要任何依賴。

2. GsonOption正式代碼中可以使用，需要引入Gson包，使用toString()方法可以轉(zhuǎn)換為JSON結(jié)構(gòu)的數(shù)據(jù)（支持function，詳情看下面的function說明）。

3. EnhancedOption測試專用，主要方便在瀏覽器中直接查看效果。

function說明

由于JSON標準中不包含function類型，因而大多數(shù)的JSON庫都不直接支持這種類型，處理這種類型最簡單的方式就是轉(zhuǎn)換為JSON字符串時，對字符串進行處理。

雖然像jackson json和fastjson通過注解或者自定義的實現(xiàn)序列化接口可以實現(xiàn)，畢竟和JSON庫的結(jié)合太密切了，而且使用起來也很麻煩，不如直接處理字符串，或者在js中處理。

本項目中提供了GSON實現(xiàn)的GsonOption，就是重寫了toString()方法，改為輸出JSON結(jié)構(gòu)的字符串，并且支持以下兩種function形式:

{
    formatter:function(value){
        return value.substring(0,8);
    }}//和{
    formatter:(function(){
        return 'Temperature : <br/>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/>km : {c}°C';})()");

1. 先看第一種，這里的"function中，雙引號和function必須連著，中間不能存在空格，否則不會識別。然后是結(jié)尾的}"，這里也必須連著不能有空格，在首尾這兩段代碼之間不能出現(xiàn)}"，否則會判斷出錯。如果在{}中的代碼有字符串，請使用單引號'，雙引號出現(xiàn)在單引號內(nèi)時使用\"即可。除此之外沒有別的限制。

2. 再看第二種，這里的"(function中，雙引號、括號和function必須連著，中間不能存在空格，否則不會識別。然后是結(jié)尾的})()"，這里也必須連著不能有空格，在首尾這兩段代碼之間不能出現(xiàn)})()"，否則會判斷出錯。如果在{}中的代碼有字符串，請使用單引號'，雙引號出現(xiàn)在單引號內(nèi)時使用\"即可。除此之外沒有別的限制。

上述對function的處理很簡單，不限制在formatter使用，所有值都能這么寫，你可以參考寫出自己的Option

挑兩個例子大概的看看這個Java類庫如何使用

第一個例子，簡單的折線圖

對應(yīng)的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)變化關(guān)系");

    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/>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)變化關(guān)系").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結(jié)果：

{
    "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": "數(shù)據(jù)視圖",
                "readOnly": false,
                "lang": ["Data View", "close", "refresh"]
            },
            "mark": {
                "show": true,
                "title": {
                    "mark": "輔助線開關(guān)",
                    "markClear": "清空輔助線",
                    "markUndo": "刪除輔助線"
                },
                "lineStyle": {
                    "color": "#1e90ff",
                    "type": "dashed",
                    "width": 2
                }
            },
            "saveAsImage": {
                "show": true,
                "title": "保存為圖片",
                "type": "png",
                "lang": ["點擊保存"]
            }
        }
    },
    "tooltip": {
        "trigger": "axis",
        "formatter": "Temperature : \u003cbr/\u003ekm : {c}°C"
    },
    "legend": {
        "data": ["高度(km)與氣溫(°C)變化關(guān)系"]
    },
    "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)變化關(guān)系",
        "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(){})()執(zhí)行JS代碼

對應(yīng)的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/> : {c} (go7utgvlrp%)");
    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(){})()執(zhí)行JS代碼，實現(xiàn)了官方例子中的功能，生成的JSON結(jié)果如下：

{
    "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": "數(shù)據(jù)視圖",
                "readOnly": false,
                "lang": ["Data View", "close", "refresh"]
            },
            "mark": {
                "show": true,
                "title": {
                    "mark": "輔助線開關(guān)",
                    "markClear": "清空輔助線",
                    "markUndo": "刪除輔助線"
                },
                "lineStyle": {
                    "color": "#1e90ff",
                    "type": "dashed",
                    "width": 2
                }
            },
            "saveAsImage": {
                "show": true,
                "title": "保存為圖片",
                "type": "png",
                "lang": ["點擊保存"]
            }
        },
        "show": true
    },
    "tooltip": {
        "show": true,
        "formatter": "{a} <br/> : {c} (go7utgvlrp%)"
    },
    "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)"
                }
            }
        }]
    }]};