Echarts 的 Java 封裝類庫 轉自 https://my.oschina.net/flags/blog/316920

轉自： https://my.oschina.net/flags/blog/316920   

 

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的位置不能那樣居中，不過這都不是必須的