动态数据,通过highcharts实现三级下钻

版权声明: https://blog.csdn.net/chenacxz/article/details/86571192

首先导入所需的文件:所需highcharts文件,提取码:e2az,前端用的jsp

<script src="${ctx}/admin/js/drilldown.js" type="text/javascript"></script>

<script src="${ctx}/admin/js/jquery-1.9.1.min.js" type="text/javascript"></script>

<script src="${ctx}/admin/js/highcharts.js" type="text/javascript"></script>


var data=eval($("#counts").val());
	var data1=data[0];
	var data2;
	for(var i=0;i<data1.length;i++){
		if(data1[i].data.length>0){
			data2=data1[i].data;
			for (var k = 0; k < data2.length; k++) {
		        for (var j =k+1; j <data2.length; ) {
		            if (data2[k].id == data2[j].id) {
		                data2.splice(j, 1);
		        	}
		        	else j++;
		    	}
    		}
    		data1[i].data=data2;
		}
	}
Highcharts.chart('container', {
	chart: {
		type: 'column'
	},
	title: {
		text: '所有预约人数统计'
	},
	subtitle: {
		text: ''
	},
	colors: ['#7cb5ec', '#434348', '#90ed7d', '#f7a35c', '#8085e9', '#f15c80', '#e4d354', '#8085e8', '#8d4653', '#91e8e1'],
	xAxis: {
		type: 'category',
		tickInterval: 1
	},
	yAxis: {
		title: {
			text: '总的预约人数'
		}
	},
	legend: {
		enabled: true,
		
	},
	plotOptions: {
		series: {
			borderWidth: 0,
			dataLabels: {
				enabled: true,
				format: '{point.y}'
			}
		}
	},
	tooltip: {
		headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
		pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y}</b>人数<br/>'
	},
	series: [{
		name: '医院预约数',
		type: 'column',
		colorByPoint: true,
		data: data[1]
	}],
	drilldown: {
		series: data[0]
	}
});
function getData(){
	var startTime=jQuery("#messageStartTime").val();
	var endTime=jQuery("#messageEndTime").val();
	if(startTime=="" && endTime==""){
		getbody('${ctx}/admin/yyPercentNewMap','maincontent');
		return;
	}
	if((startTime!="" && endTime=="") || (startTime=="" && endTime!="")){
		alert("请补全搜索信息");
		return;
	}
	var data={"startTime":startTime,"endTime":endTime};
	postbody('${ctx}/admin/yyGetZhuDateInfo',data,'maincontent');
}
<div id="container"></div>
<input type="hidden" value="${counts}" id="counts"/>
//后端接口数据组装
//预约信息数量(饼图搜索获取数据)
			    @RequestMapping(value="/yyGetDateInfo",method={RequestMethod.GET,RequestMethod.POST})
			public String yyGetDateInfo(@RequestParam(value="startTime")String startTime,@RequestParam(value="endTime")String endTime,HttpServletRequest request){
				StringBuffer buffer=new StringBuffer();
				StringBuffer bufferNew=new StringBuffer();
				StringBuffer bufferSe=new StringBuffer();
				StringBuffer bufferDo=new StringBuffer();
			    //总拼接数据开始
				buffer.append("[");
				//科室拼接数据开始
			    bufferNew.append("[");
			    //医院拼接数据开始
			    bufferSe.append("[");
			    //医院预约人数查询
			    JSONObject ret;
			    //科室预约人数查询
			    JSONObject depRet;
			    //医生预约人数查询
			    JSONObject doRet;
			    //被预约医生信息查询
			    List<ViewYyRecord> DoList;
			    List<Map<String,Object>> list=new ArrayList<>();
			    //医院信息列表
				List<YyHospital> HoList=hospitalService.yyHospitalList();
				for(int i=0;i<HoList.size();i++){
					String Hospitalid=HoList.get(i).getHospitalid();
					//医院预约人数查询
					ret=(JSONObject) userService.hosNewYyAccounts(Hospitalid,startTime,endTime);
					//科室信息列表
					List<YyDept> DeList=hospitalService.YyDeptListByHospitalId(Hospitalid);
					Map<String,Object> map = new HashMap<String,Object>();
					if(DeList.size() <= 0){
						//如果通过医院未查到任何科室医院信息返回0
						bufferSe.append("{name: '"+HoList.get(i).getHospitalname()+"',y:"+0+",colorByPoint: true,drilldown:'"+HoList.get(i).getHospitalname()+"'},");
						continue;
					}
					//如果科室表里Parentid=null时将deptname拼入map否则拼接Parentname
					if(DeList.get(0).getParentid() == null){
						map.put("parentid", DeList.get(0).getDeptid());
						map.put("parentname", DeList.get(0).getDeptname());
					}else{
						map.put("parentid", DeList.get(0).getParentid());
						map.put("parentname", DeList.get(0).getParentname());
					}
					list.add(map);
					//对科室去重,只保留一个大科室
					for(int a=1;a<DeList.size();a++){
						String parentid = "";
						if(DeList.get(a).getParentid() == null){
							parentid = DeList.get(a).getDeptid();
						}else{
							parentid = DeList.get(a).getParentid();
						}
						Boolean flag = false;
						Map<String,Object> map1 = new HashMap<String,Object>();
						for(int b=0;b<list.size();b++){
							if(parentid.equals((String)list.get(b).get("parentid"))){
								flag = true;
							}else{
								continue;
							}
						}
						if(flag){
							continue;
						}else{
							if(DeList.get(a).getParentid() == null){
								map1.put("parentid", DeList.get(a).getDeptid());
								map1.put("parentname", DeList.get(a).getDeptname());
							}else{
								map1.put("parentid", DeList.get(a).getParentid());
								map1.put("parentname", DeList.get(a).getParentname());
							}
							
						}
						list.add(map1);
					}
					//拼接医院信息数据格式并向下钻取
					bufferNew.append("{name: '"+HoList.get(i).getHospitalname()+"',id:'"+HoList.get(i).getHospitalname()+"',colorByPoint: true,data:[");					
					if(list.size()>0){
			    		for(int j=0;j<list.size();j++){
			    			String parentid=(String)list.get(j).get("parentid");
			    			//通过parentid去查询科室所预约数量
			    			depRet=(JSONObject) userService.deptNewYyAccounts(parentid,startTime,endTime);
			    			//拼接科室信息数据格式并向下钻取
		    				bufferNew.append("{'name':'"+list.get(j).get("parentname")+"',y:"+depRet.get("count")+",colorByPoint: true,drilldown:'"+list.get(j).get("parentname")+"',id:'"+list.get(j).get("parentid")+"'},");		    				
		    				//查询parentname下所有对应的医生
		    				DoList=hospitalService.listDoctorsOfDept(DeList.get(j).getHospitalid(),(String)list.get(j).get("parentid"));
		    				//拼接医生信息数据格式
		    				bufferDo.append("{id:'"+list.get(j).get("parentname")+"',colorByPoint: true,data:[");
		    				if(DoList.size()>0){	    							    				
			    				for(int k=0;k<DoList.size();k++){
			    					if(DoList.get(k).getDoctorid() != null){
			    						//通过parentid doctorid hospital去查询每个医生所预约数量
			    						doRet=userService.someNewYyAccounts(DoList.get(k).getDoctorid(),(String)list.get(j).get("parentid"),DoList.get(k).getHospitalid(),startTime,endTime);  			
				    					//拼接医生信息对应的数据格式 最后一层
			    						bufferDo.append("{'name':'"+DoList.get(k).getDoctorname()+"("+DoList.get(k).getDeptname()+")"+"',colorByPoint: true,y:"+doRet.get("count")+",id:'"+DoList.get(k).getDoctorid()+"'},");					    		
			    					}
			    				}			    				
		    				}
		    				//每个医生信息对应的数据格式 拼接结束
		    				bufferDo.append("]},");
			    		}    				
					}						
					bufferSe.append("{name: '"+HoList.get(i).getHospitalname()+"',y:"+ret.get("count")+",colorByPoint: true,drilldown:'"+HoList.get(i).getHospitalname()+"'},");				
					bufferNew.append("]},");
				}
				
				bufferSe.append("]");				
				bufferNew.append(bufferDo.toString());
				bufferNew.append("]");
				buffer.append(bufferNew+","+bufferSe.toString());
				buffer.append("]");					
				String result=buffer.toString(); 
				System.out.println(result);
				request.setAttribute("counts", result);								
				return "admin/yyPercentMap";
			}

数据有点不准确,其他的没什么问题

猜你喜欢

转载自blog.csdn.net/chenacxz/article/details/86571192
今日推荐