生活随笔
收集整理的這篇文章主要介紹了
Echarts后台option对象
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
最近在工作中使用到了Echarts來制作圖表，在網上搜了好多例子幾乎都是千篇一律的在前臺寫死一些js，然后把變量通過ajax或者遍歷集合的方式插進去，這樣子一旦某一頁面的圖表一多，就會異常混亂，偶然在開源中國看到有人做成了個Echarts對象的jar包，在后臺進行完美封裝傳回一個option在前臺接收了并set進option即可。試了試，效果非常好。
下面給出例子代碼：
該方法返回的keyword指向了前臺負責圖表顯示的jsp頁面
[html]?view plaincopy print?
public?String?keyword()?{?????????if(this.dateNum?==?null?||?this.dateNum.equals(""))?{?????????????this.dateNum?=?"5"?;?????????}?????????return?"keyword"?;??????}?? 該方法根據jsp的ajax傳回來顯示的條數dateNum進行數據庫取值（這地方我沒有使用實時拿值，而是通過定時來把數據更新進一張表，從而圖表拿值會非常迅速）
可以看出我定義了一個Option對象，里面的參數都可以在里面以方法或者屬性的方式調用。最后封裝好Option后，把他放入jsonObject對象傳回前臺一接收json值即可。
[html]?view plaincopy print?
public?String?getKeyWordData()?throws?ParseException{?????????LoginUser?user?=?(LoginUser)?((SecurityContext)?ServletActionContext??????????????????.getRequest().getSession()??????????????????.getAttribute("SPRING_SECURITY_CONTEXT")).getAuthentication()??????????????????.getPrincipal();?????????Long?id?=?user.getId()?;?????????int?num?=?Integer.parseInt(this.dateNum)?;?????????jsonObj?=?new?JSONObject()?;?????????//取到該用戶的所有關鍵字放入legendName數組?????????List<String>?names?=?this.cacheCountManager.getKeywordNames(id)?;?????????String[]?legendName?=?new?String[names.size()]?;?????????for(int?i=0;i<names.size();i++)?{?????????????String?name?=?names.get(i)?;?????????????legendName[i]?=?name?;?????????}?????????String[]?riqiArr?=?new?String[num]?;?????????for(int?j=num;j>0;j--)?{?????????????String?riqi?=?getStrDate(String.valueOf(j))?;?????????????riqiArr[num-j]?=?riqi?;?????????}?????????Option?option=new?GsonOption();?????????option.title().text("關鍵詞文章統計");?????????option.tooltip().trigger(Trigger.axis);?????????option.legend().data(legendName);?????????ValueAxis?axis?=?new?ValueAxis();?????????axis.type(AxisType.category).boundaryGap(false).data(riqiArr);?????????option.xAxis(axis);?????????CategoryAxis?yaxis?=?new?CategoryAxis();?????????yaxis.type(AxisType.value);?????????option.yAxis(yaxis);?????????List<Series>?seriess?=?new?ArrayList<Series>()?;?????????MarkPoint?mp?=?new?MarkPoint()?;?????????mp.data(new?Data().type(MarkType.max).name("最大值"),?????????????????new?Data().type(MarkType.min).name("最小值"))?;?????????for(int?i=0;i<names.size();i++)?{?????????????Integer[]?countArr?=?new?Integer[num]?;?????????????Line?line?=?new?Line()?;?????????????String?name?=?names.get(i)?;?????????????for(int?j=num;j>0;j--)?{?????????????????String?riqi?=?getStrDate(String.valueOf(j))?;?????????????????countArr[num-j]?=?this.cacheCountManager.getCount(id,?riqi,?name)?;?????????????}?????????????line.name(name).type(SeriesType.line).data(countArr).markPoint(mp)?;?????????????seriess.add(line)?;?????????}?????????option.series(seriess);?????????jsonObj=JSONObject.fromObject(option.toString());?????????return?"echartsJson";?????}?? 頁面顯示部分很簡潔。
[html]?view plaincopy print?
<div?id="main"??style="height:?400px;?border:?1px?solid?#ccc;?padding:?10px;">圖形正在加載中...</div>?? [html]?view plaincopy print?
$(function(){??????require([?'echarts','echarts/chart/line'?],DrawEChart);??});?? [html]?view plaincopy print?
function?DrawEChart(ec)?{??????var?myChart;??????myChart?=?ec.init(document.getElementById('main'));??????myChart.showLoading({??????text:?"圖表數據正在努力加載...",??????});??????var?date?=?$("#dateNum").val()?;??????$.ajax({??????type?:?"post",??????data:{"dateNum":date},??????????url?:?"${ctx}/statistics/statistics!getKeyWordData.action",??????????dataType?:?"json",??????????success?:?function(data)?{??????????????myChart.setOption(data.jsonObj);??????????myChart.hideLoading();??????????},??????????error?:?function(errorMsg)?{??????????alert("不好意思大爺，圖表請求數據失敗啦！");??????????}??????});??}?? jar包下載：http://mvnrepository.com/artifact/com.github.abel533/ECharts
總結
以上是生活随笔為你收集整理的Echarts后台option对象的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
