Echarts的使用,非同步載入資料及返回資料型別
阿新 • • 發佈:2018-12-12
前臺js建立圖形
var option1={ title : { text: '學歷統計', x:'center', y:'center' }, series: [{ type: 'pie', clockwise:false, radius:['45%','75%'], label: { normal: { show: true, formatter: '{b},{c}', rich: {} } } }], color:['#27AAE1','#0071BC','#83B15A','#FBB040','#BE1E2D','#C6E579','#fad797'], textStyle:{ color:'#333', fontSize:16 } } chart1.setOption(option1); var unitId=document.getElementById("selectUnit").value; //非同步載入資料 $.ajax({ url:path+"/unitConditionController/getDegreeData.do?unitId="+unitId, type:'post', dataType:'json', async:false, success:function(data){ chart1.setOption({ series:[{ data:data,//接受後臺返回的資料,需要注意資料型別 }] }); }, error:function(){ } })
controller層:
/** * 獲取學歷資訊 * @param unitId * @return */ @RequestMapping(value="/getDegreeData", method = { RequestMethod.POST }) @ResponseBody public List<Map<String, Object>> getDegreeData(@RequestParam("unitId") String unitId){ List<Map<String,Object>> list=new ArrayList<Map<String,Object>>(); Map<String,Object> map1=new HashMap<String,Object>(); map1.put("unitId",unitId); List<PersonBaseInfoDTO> personBaseInfoDTOs=personBaseInfoService.searchListByCondition(map1); list=unitConditionService.getDegreeList(personBaseInfoDTOs); return list; }
serviceImpl
資料存在一個map型別的list集合中,返回json資料,加@ResponseBody註解
/** * 獲取學歷資訊 */ @Override public List<Map<String, Object>> getDegreeList(List<PersonBaseInfoDTO> personBaseInfoDTOs) { List<Map<String,Object>> list=new ArrayList<Map<String,Object>>(); int twen=0; int btt=0; int btf=0; int bff=0; int bfs=0; int os=0; int k=0; for(PersonBaseInfoDTO pDTO:personBaseInfoDTOs){ if(pDTO.getDegreeStatus()!=null){ String degree=pDTO.getDegreeStatus(); if(degree.equals("研究生")){ twen++; }else if (degree.equals("碩士")) { btt++; }else if (degree.equals("本科")) { btf++; }else if (degree.equals("自考本科")) { bff++; }else if (degree.equals("大專")) { bfs++; }else if(degree.equals("博士")){ os++; }else if(degree.equals("其他")){ k++; } } } Map<String,Object> map=new HashMap<String,Object>(); map.put("name","研究生"); map.put("value",twen); Map<String,Object> map2=new HashMap<String,Object>(); map2.put("name","碩士"); map2.put("value",btt); Map<String,Object> map3=new HashMap<String,Object>(); map3.put("name","本科"); map3.put("value",btf); Map<String,Object> map4=new HashMap<String,Object>(); map4.put("name","自考本科"); map4.put("value",bff); Map<String,Object> map5=new HashMap<String,Object>(); map5.put("name","大專"); map5.put("value",bfs); Map<String,Object> map6=new HashMap<String,Object>(); map6.put("name","博士"); map6.put("value",os); Map<String,Object> map7=new HashMap<String,Object>(); map7.put("name","其他"); map7.put("value",k); list.add(map); list.add(map2); list.add(map3); list.add(map4); list.add(map5); list.add(map6); list.add(map7); return list; }