Echarts 的 Java 封裝類庫

Echarts 的 Java 封裝類庫：http://www.oschina.net/p/echarts-java

沒想到喜歡Echarts 的 Java 封裝類庫的人還挺多，在源碼中的測試例子一般目的只是構造官網例子的結構，這裏寫個比較實際的簡單例子來演示如何寫出一個圖表。

首先看看Option的提示。

##Option說明

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

2. GsonOption正式代碼中可以使用，需要引入Gson包，使用toString()方法可以轉換爲JSON結構的數據（支持function，詳情看下面的<b>function說明</b>），下個版本會加入view()方法，方便在瀏覽器中查看。

3. EnhancedOption測試專用，增加了view()方法和exportToHtml()方法，主要方便在瀏覽器中直接查看效果。

下面的例子使用的EnhancedOption，實際使用時，用json工具將Option轉換爲JSON字符串即可。

##簡單例子

這個例子模仿的OSCGIT中的【管理】中的【項目訪問統計】圖表，這個圖表很簡單。例如本項目的統計圖表如下：

下面開始本例。

創建訪問日期，訪問數對象：

 //數據對象
class AccessData {
    //日期
    private String date;
    //訪問量
    private Integer nums;

    AccessData(String date, Integer nums) {
        this.date = date;
        this.nums = nums;
    }

    public String getDate() {
        return date;
    }

    public Integer getNums() {
        return nums;
    }
}

然後是一個模擬獲取數據的方法：

/**
 * 模擬從數據庫獲取數據
 *
 * @return
 */
public List<AccessData> getWeekData() {
    List<AccessData> list = new ArrayList<AccessData>(7);
    list.add(new AccessData("09-16", 4));
    list.add(new AccessData("09-17", 7));
    list.add(new AccessData("09-18", 14));
    list.add(new AccessData("09-19", 304));
    list.add(new AccessData("09-20", 66));
    list.add(new AccessData("09-21", 16));
    list.add(new AccessData("09-22", 205));
    return list;
}

下面開始構造Option對象：

//獲取數據
List<AccessData> datas = getWeekData();

//創建Option對象
EnhancedOption option = new EnhancedOption();

//設置圖表標題，並且居中顯示
option.title().text("最近7天訪問量圖表").x(X.center);

//設置圖例,居中底部顯示，顯示邊框
option.legend().data("訪問量").x(X.center).y(Y.bottom).borderWidth(1);

//設置y軸爲值軸，並且不顯示y軸，最大值設置400，最小值-100（OSC爲什麼要有-100呢？）
option.yAxis(new ValueAxis().name("IP")
        .axisLine(new AxisLine().show(true).lineStyle(new LineStyle().width(0)))
        .max(400).min(-100));

//創建類目軸，並且不顯示豎着的分割線，onZero=false
CategoryAxis categoryAxis = new CategoryAxis()
        .splitLine(new SplitLine().show(false))
        .axisLine(new AxisLine().onZero(false));

//不顯示錶格邊框，就是圍着圖標的方框
option.grid().borderWidth(0);

處理好上面的基本配置後，下面處理數據。

//創建Line數據
Line line = new Line("訪問量").smooth(true);

//根據獲取的數據賦值
for (AccessData data : datas) {
    //增加類目，值爲日期
    categoryAxis.data(data.getDate());

    //日期對應的數據
    line.data(data.getNums());
}

//設置x軸爲類目軸
option.xAxis(categoryAxis);

//設置數據
option.series(line);

上面通過for循環，一次放入一個類目和數據，最後將類目和Line賦值給option

最後執行view()方法即可查看。

//打開瀏覽器預覽
option.view(); 

效果如下：

從smooth的效果來看，還是highcharts的平滑效果更好。另外IP的位置不能那樣居中，不過這都不是必須的。