spring boot動(dòng)態(tài)加載Echart餅狀圖
本文實(shí)例為大家分享了spring boot動(dòng)態(tài)加載Echart餅狀圖的具體代碼,供大家參考,具體內(nèi)容如下
先從Echart官網(wǎng)上根據(jù)需要下載所需Echart版本,在頁(yè)面中用script標(biāo)簽引入,這些在Echart官網(wǎng)上有教程。官網(wǎng)上有異步加載和更新Echart圖,知道了是動(dòng)態(tài)把查詢到的結(jié)果按格式拼接到餅狀圖series里面的data中。
嘗試一:在springboot的controller中把查詢到的結(jié)果拼接好放在map里,跳轉(zhuǎn)到頁(yè)面,然后在前臺(tái)javascript中獲取完成動(dòng)態(tài)加載,發(fā)現(xiàn)餅狀圖中data是數(shù)組類(lèi)型,后臺(tái)拼接的String類(lèi)型傳到j(luò)avascript中,然后在頁(yè)面中顯示會(huì)出現(xiàn)單引號(hào)解析錯(cuò)誤。
嘗試二:使用ajax,后臺(tái)跳轉(zhuǎn)到頁(yè)面后自動(dòng)執(zhí)行ajax查詢出餅狀圖所需的data數(shù)據(jù),返回json格式數(shù)據(jù)
1.餅狀圖的data數(shù)據(jù)格式為[{value:235, name:'視頻廣告'},{value:274, name:'聯(lián)盟廣告'},{value:310, name:'郵件營(yíng)銷(xiāo)'} ]
構(gòu)造data實(shí)體
public class EchartData { private String name; private Float value; public EchartData(){} public EchartData(String name, Float value){ this.value = value; this.name = name; } public String getName() { return name; } public void setName(String name) { this.name = name; } public Float getValue() { return value; } public void setValue(Float value) { this.value = value; } }
2.后臺(tái)查詢出數(shù)據(jù)并放入EchartData的list并轉(zhuǎn)化為json數(shù)組返回到ajax
@RequestMapping("/dwcb") @ResponseBody private String dwcb(@RequestParam("scrq1") String scrq1,@RequestParam("scrq2") String scrq2, @RequestParam("dwmc") String dwmc,Map map) throws ParseException { List lis = new ArrayList(); List<ViewNyRxhmx> list = rcbService.findSearchRcb(scrq1,scrq2,dwmc); //查詢出所有的單位信息 Float total = Float.valueOf(0); Float F01 = Float.valueOf(0); Float F02 = Float.valueOf(0); Float F03 = Float.valueOf(0); Float F04 = Float.valueOf(0); Float F05 = Float.valueOf(0); Float F06 = Float.valueOf(0); Float F07 = Float.valueOf(0); for(ViewNyRxhmx item : list){ if(item.getDwdm().equals("F01") && item.getRcb()!=null){ F01 += Float.valueOf(item.getRcb()); } if(item.getDwdm().equals("F02") && item.getRcb()!=null){ F02 += Float.valueOf(item.getRcb()); } if(item.getDwdm().equals("F03") && item.getRcb()!=null){ F03 += Float.valueOf(item.getRcb()); } if(item.getDwdm().equals("F04") && item.getRcb()!=null){ F04 += Float.valueOf(item.getRcb()); } if(item.getDwdm().equals("F05") && item.getRcb()!=null){ F05 += Float.valueOf(item.getRcb()); } if(item.getDwdm().equals("F06") && item.getRcb()!=null){ F06 += Float.valueOf(item.getRcb()); } if(item.getDwdm().equals("F07") && item.getRcb()!=null){ F07 += Float.valueOf(item.getRcb()); } } EchartData echartData1 = new EchartData("第一備煤分廠",F01); EchartData echartData2 = new EchartData("第二備煤分廠",F02); EchartData echartData3 = new EchartData("第一煉焦分廠",F03); EchartData echartData4 = new EchartData("第二煉焦分廠",F04); EchartData echartData5 = new EchartData("第三煉焦分廠",F05); EchartData echartData6 = new EchartData("能源分廠",F06); EchartData echartData7 = new EchartData("綜合保障分廠",F07); lis.add(echartData1); lis.add(echartData2); lis.add(echartData3); lis.add(echartData4); lis.add(echartData5); lis.add(echartData6); lis.add(echartData7); String data = JSON.toJSONString(lis); System.out.println("data:"+data); return data; }
3.加載餅狀圖的series中的data直接使用ajax返回的data即可
$(function () { // 基于準(zhǔn)備好的dom,初始化echarts圖表 var pie_data = echarts.init(document.getElementById('pie_data')); //顯示加載動(dòng)畫(huà) pie_data.showLoading(); var scrq1 = document.getElementById('scrq1').value; var scrq2 = document.getElementById('scrq2').value; var dwmc = document.getElementById('dwmc').value; $.ajax({ type:"POST", cache:false, url:"/dwcb", data:{"scrq1": scrq1,"scrq2": scrq2,"dwmc": dwmc}, dataType: "json", success:function (result) { $('#mytable').html("<thead><tr><th align='center'>單位名稱(chēng)</th><th align='center'>總成本</th></tr></thead>"); <!--向表中填寫(xiě)數(shù)據(jù)--> var item; $.each(result,function(i,res){ item = "<tr><td align='center'>"+res['name']+"</td><td align='center'>"+res['value']+"</td></tr>"; $('#mytable').append(item); }); // $("#mytable").table("refresh"); //隱藏加載動(dòng)畫(huà) pie_data.hideLoading(); pie_data.setOption({ tooltip : { formatter: " : {c} (vvxyksv9kd%)" }, series: [{ // 根據(jù)名字對(duì)應(yīng)到相應(yīng)的系列 name: '訪問(wèn)來(lái)源', type: 'pie', radius: '55%', data: result }] }) } }) });
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
springboot?vue測(cè)試平臺(tái)開(kāi)發(fā)調(diào)通前后端環(huán)境實(shí)現(xiàn)登錄
這篇文章主要介紹了springboot?vue測(cè)試平臺(tái)開(kāi)發(fā)調(diào)通前后端環(huán)境實(shí)現(xiàn)登錄詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-05-05解決idea配置Tomcat Deployment沒(méi)有artifact選項(xiàng)的問(wèn)題
今天在配置的時(shí)候tomcat deployment中卻找不到artifact,沒(méi)有artifact就不能打成war包上傳到服務(wù)器了,那么怎么解決沒(méi)有artifact選項(xiàng)的問(wèn)題呢,今天通過(guò)本文給大家分享idea配置Tomcat Deployment沒(méi)有artifact選項(xiàng)的解決方案,一起看看吧2023-10-10一個(gè)通用的Java分頁(yè)基類(lèi)代碼詳解
這篇文章主要介紹了一個(gè)通用的Java分頁(yè)基類(lèi)代碼詳解,具有一定借鑒價(jià)值,需要的朋友可以參考下。2017-12-12