最近在工作中使用到了echarts來製作圖表，在網上搜了好多例子幾乎都是千篇一律的在前台寫死一些js，然後把變數通過ajax或者遍歷集合的方式插進去，這樣子一旦某一頁面的圖表一多，就會異常混亂，偶然在開源中國看到有人做成了個echarts物件的jar包，在後台進行完美封裝傳回乙個option在前台接收了並set進option即可。試了試，效果非常好。
下面給出例子**：
該方法返回的keyword指向了前台負責圖表顯示的jsp頁面
[html]view plain
copy
?public string keyword()
return "keyword" ;
}
該方法根據jsp的ajax傳回來顯示的條數datenum進行資料庫取值（這地方我沒有使用實時拿值，而是通過定時來把資料更新進一張表，從而圖表拿值會非常迅速）
可以看出我定義了乙個option物件，裡面的引數都可以在裡面以方法或者屬性的方式呼叫。最後封裝好option後，把他放入jsonobject物件傳回前台一接收json值即可。
[html]view plain
copy
?public string getkeyworddata() throws parseexception
string riqiarr
= new
string[num] ;
for(int j
=num
;j>
0;j--)
option option
=new
gsonoption();
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++)
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 plain
copy
?<
divid
="main"
style
="height: 400px; border: 1px solid #ccc; padding: 10px;"
>
圖形正在載入中...
div>
[html]view plain
copy
?$(function());
[html]view plain
copy
?function drawechart(ec) );
var date
= $("#datenum").val() ;
$.ajax(,
url : "$/statistics/statistics!getkeyworddata.action",
datatype : "json",
success : function(data) ,
error : function(errormsg)
});
}
echarts 自動生成option配置
echarts 圖形y軸一般情況下只有一條，但是x軸可能有n 0 1 2 條,如果需要大量重複的圖形，但是只是x軸的條數不一樣的 通過傳遞的二維陣列判斷x軸的條數，生成相應的配置，而不用為x軸的不同而寫echarts的不同的option，前提是專案中需要大量 echats圖的基礎。由於專案中只是用了...
echarts整合多個類似option的方法例項
前言 最近專案裡面遇到一些圖表需要用echarts來做。而我之前只用過一次echarts,也只是做了乙個簡單的餅狀圖，並沒有涉及到很多的配置。但是現在這個專案，這些圖表需要自己配置很多東西。像什麼多餘的網格線不顯示啊，每個柱子的不一樣的顏色漸變啊，這些都還好。問題在乙個頁面有多個柱狀圖，而這些柱狀圖...
ECharts顯示後台傳送的JSON資料
廢話不多說，直接上 一 定義乙個後台資料儲存類 public class bardto public void setname string name public string gettype public void settype string type public listgetdata p...