1.在前一篇文章介紹中的xxx.js文件裏,加入ajax請求,dataType爲json。
2.然後再ajax的success返回函數中,設置echarts圖表的各種屬性,這些屬性當中,除了legend的data的值、series的data
值需要從後臺數據庫獲取意外,其他的都是echarts官方的數據格式。直接複製粘貼即可。
3. java後臺比較簡單,後臺的sql語句和service這裏就不贅述了,相信這些大家都沒問題。這裏介紹一下在action前端控制器中
怎麼返回echarts想要的數據格式。echarts的數據格式在官網的例子中不難看出,option裏面的legend下面的data,數據格式是一個
數組[],series裏面的data是一個數組中包含的鍵值對(key,value)。那麼我們在後臺就必須將數據封裝成鍵值對的形式,再轉換
成json數據格式,返回給前臺。
下圖是echarts官方的series中的data數據格式:
4.有了前臺需要的數據格式,後臺就好辦了。先封裝一個class類,類的屬性爲name和value,目的是將數據封裝好,返回給series
的data使用。因爲series的數據格式必須要是key,value鍵值對的形式。
5.建一個action,建一個方法,對應前臺ajax請求路徑。將從數據庫獲取的數據封裝成List集合。然後轉換成json格式,這裏我
用到的是阿里巴巴的fastjson(自行百度)。然後傳給前臺。直接上源碼:
@Controller
@RequestMapping(value="/population")
public class Population_big {
@Autowired
private PopulationBo populationBo;
@RequestMapping(value="/populationCount")
@ResponseBody
public String populationCount(HttpServletRequest request, HttpServletResponse response) {
List list = new ArrayList();
List<String> popSexList = this.populationBo.getAllPopulation();
System.out.println("popSexList:"+popSexList);
for(int i=0;i<popSexList.size();i++){
Integer countSex = this.populationBo.countPopByPopSex(popSexList.get(i));
Pop_bigData pop_bigData = new Pop_bigData(countSex,popSexList.get(i));
list.add(pop_bigData);
}
String data = JSON.toJSONString(list);
System.out.println("data:"+data);
return data;
}
解釋:requestMapping路徑,對應ajax的請求路徑,ajax請求中,有請求參數請自行加入,我這裏沒有請求參數。建List集合,將
數據封裝進去,popSexList對應前臺頁面中ecahrts的legend裏的data數據格式。pop_bigData是我封裝的key,value鍵值對的一個類
(前面已經說到),將從數據庫中獲取的name值,value值,添加到pop_bigData這個對象中。然後也封裝到一個List集合中。最後,
將這個list對象轉換成json格式,返回給前臺。
下圖是封裝好的數據,轉換成爲了json格式之後,前臺就能使用了:
6.前臺頁面在獲取到後臺傳過來的數據之後,就能使用了。在success的回調函數中,將數據直接展示在echarts的option中的
legend下的data,和series下的data中。直接使用~~方便快捷。。見代碼(乾貨):
$.ajax({
url:'population/populationCount.do?'+(new Date()).getTime(),
type:'post',
async: true,
dataType:'json',
success:function (result) {
pie_data.hideLoading();//隱藏加載動畫
pie_data.setOption({
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient : 'vertical',
x : 'left',
// data:['直接訪問','郵件營銷','聯盟廣告','視頻廣告','搜索引擎']
data:result
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {
show: true,
type: ['pie', 'funnel'],
option: {
funnel: {
x: '25%',
width: '50%',
funnelAlign: 'left',
max: 1548
}
}
},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
series : [
{
name:'訪問來源',
type:'pie',
radius : '55%',
center: ['50%', '60%'],
data:result
}
]
});
},
到這裏爲止,從後臺數據庫動態獲取數據就算成功了,下面是展示圖,請對比控制檯打印的那張圖看數據對不對:
PS:這裏介紹的是在同一個項目下,ajax請求,動態的從後臺獲取數據並展示的情況。後面我將繼續介紹:ajax請求,在跨域的
情況下,動態的獲取後臺數據。即:ajax請求跨域情況如何解決。敬請關注!