轉自: https://my.oschina.net/flags/blog/316920 javascript
Echarts 的 Java 封裝類庫:http://www.oschina.net/p/echarts-javaphp
沒想到喜歡Echarts 的 Java 封裝類庫的人還挺多,在源碼中的測試例子通常目的只是構造官網例子的結構,這裏寫個比較實際的簡單例子來演示如何寫出一個圖表。java
首先看看Option的提示。數據庫
##Option說明json
Option
正式代碼中使用,不須要任何依賴。瀏覽器
GsonOption
正式代碼中能夠使用,須要引入Gson
包,使用toString()
方法能夠轉換爲JSON結構的數據(支持function
,詳情看下面的<b>function說明</b>),下個版本會加入view()
方法,方便在瀏覽器中查看。echarts
EnhancedOption
測試專用,增長了view()
方法和exportToHtml()
方法,主要方便在瀏覽器中直接查看效果。工具
下面的例子使用的EnhancedOption
,實際使用時,用json工具將Option轉換爲JSON字符串便可。測試
##簡單例子this
這個例子模仿的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的位置不能那樣居中,不過這都不是必須的