echarts饼状图动态获取后台数据ajax+json(三)

最新推荐文章于 2023-09-23 21:24:49 发布

陌上花语

最新推荐文章于 2023-09-23 21:24:49 发布

阅读量3.2k

点赞数 5

分类专栏：前端文章标签： javascript

本文链接：https://blog.csdn.net/wlf_wzx/article/details/106119952

版权

前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

首先给大家推荐echarts官网：里面什么柱状图，折线图，饼状图都有。
https://echarts.apache.org/examples/zh/index.html
可以去下载对应的echarts样式。

1.效果图如下：
在这里插入图片描述我这边是根据开始时间，结束时间，用户选择三个下拉来查询饼状图的数据的。

2.引入前端样式：（前端主要是bootstrap的样式。可以去官网下载哈）
在这里插入图片描述

3.前端代码：

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Dashboard</title>
<link rel="stylesheet" href="../static/assets/css/bootstrap.min.css">
<script src="../static/jquery/jquery-3.2.1.min.js"></script>
<script src="../static/bootstrap/js/bootstrap.js"></script>
<script src="../static/js/echarts.min.js"></script>
</head>

<body>
	
	 <div style="margin-left:10px;">
			<div class="form-group" style="width:280px;margin-top:40px;  position:absolute; ">
			    <label  class="control-label mb-1">开始时间</label>
			    <input id="startDateTime" name="startDateTime" type="date" class="form-control" value="" onchange="checkDate(this)">
			</div>
			
			<div class="form-group" style="width:280px;margin-top:40px;margin-left:350px; position:absolute;">
				<label class="control-label mb-1">结束时间</label>
			    <input id="endDateTime" name="endDateTime" type="date" class="form-control" value="" onchange="checkDate(this)">
			</div>
			
			
			<div class="form-group" style="width:280px;margin-top:40px;margin-left:700px; position:absolute;">
				<label class="control-label mb-1">用户选择</label>
				<select id="userNameId" name="type"  class="form-control"></select>
			</div>
			
			 <div class="form-group" style="width:280px;margin-top:63px; margin-left:1050px;position:absolute;">
				<button type="submit" class="btn btn-primary" onclick="refresh()" style="width:80px;">查询</button>
			</div>
	  </div>

      <div id="main_pie"  style="height:600px; width: 850px;margin-top:250px;margin-left:200px;position:absolute;"></div>
				
<script>
	
	
	$(function() {
	    //一进入页面就加载用户选择的下拉框的数据
		onUserNameList();
	});
	
	
	//用来检验开始时间不能大于结束时间
	function checkDate(date){
	    var startDate = $("#startDateTime").val();
	    var endDate = $("#endDateTime").val();
	    if(startDate.length>0 && endDate.length>0){
		    var startDateTemp = startDate.split("-");
		    var endDateTemp = endDate.split("-");
		    var allStartDate = new Date(startDateTemp[0], startDateTemp[1], startDateTemp[2]);
		    var allEndDate = new Date(endDateTemp[0], endDateTemp[1], endDateTemp[2]);
		    if(allStartDate.getTime()>allEndDate.getTime()){
			    alert("开始时间不能大于结束时间,请重新选择");
			    date.value='';
			    return false;
		    }else {
		    	return true;
		    }
	    }
	}
	
	
	//获取下拉框得数据 
	function onUserNameList(){
		$.ajax({
			url : "/dashboard/getUserList",		
			dataType : 'json',
			type : 'GET',
			success : function(dataInfo) {
				 var dataOptions = '<option value="">请选择或搜索查询</option>';
				 $('#userNameId').html(dataOptions);
				 if(dataInfo.length>0){
					 for(var i = 0; i < dataInfo.length; i++){
						 dataOptions +="<option value='"+dataInfo[i].id+"'>"+dataInfo[i].userName+ "</option>";
						 //用户id：dataInfo[i].id
						 //用户名称：dataInfo[i].userName
						 //id和userName必须要和后台接口传过来的名称保持一致。否则前端打印就是undefined的
						 $('#userNameId').html(dataOptions);//拼接到JSP页面
					 }
				 }else{
					 alert("数据为空");
				 }
				 
		    }
	    });
	}
	
	
	 //查询按钮事件
	 function refresh(){
	     //获取下拉框选中的用户id
		 var userId = $('#userNameId').children('option:selected').val();
	     var jsonData = {};
	     jsonData.startTime = $("#startDateTime").val();
	     jsonData.endTime = $("#endDateTime").val();
	     jsonData.userId = userId;
	     //调用展示饼状图的方法
	     echartsPieFuncOne(jsonData);
	 }

 
	    
		
	  var echartsPieFuncOne = function(jsonData){
    	  $.ajax({
    			url : "/dashboard/getBar",
    			dataType : 'json',
    			type : 'GET',
    			//async : false,
    			data: jsonData,//代表传给后端的三个值。startTime，endTime，userId
    			success : function(data) {
    				var json = data;
    				var jsonPieNameX = json.jsonPieRuleNameX;
    				var jsonPieY = json.jsonPieCountY;
    				var pieAllCount = json.pieAllCount;
   					//饼状图的图例名称：jsonPieRuleNameX
   					//饼状图的data数据：jsonPieCountY
   					//饼状图错误的总和：pieAllCount
   					//jsonPieRuleNameX，jsonPieCountY，pieAllCount必须要和后端传过来的map的key是一样。否则前端出现undefined
    				echartsCommonPie(jsonPieNameX, jsonPieY, pieAllCount);
    			}
      	  });
	  }
	      
		
		
	 //饼状图
     function echartsCommonPie(jsonPieNameX, jsonPieY,pieAllCount){
		  var jsonPieX = jsonPieNameX;
		  var jsonPieY = jsonPieY;
		  var pieAllCount = pieAllCount;
		  var myChart = echarts.init(document.getElementById('main_pie'));
		  //myChart.clear();//清空画布，可以加，也可以不加。
		  
	      var option = {
	           title : {
	        	  //subtext: '错误总个数：'+pieAllCount,
	              text: '错误分布数量图(错误总个数：'+pieAllCount+')',
	              x:'center',
	              y:'bottom',
	          },  
	          tooltip : {
	              trigger: 'item',
	              formatter: "{a} <br/>{b} : {c} ({d}%)"
	          },
	          legend: {
	              orient: 'vertical',
	              x:'right',
	              y:'top',
	              itemWidth: 23,   // 设置图例图形的宽
	              itemHeight: 10,  // 设置图例图形的高
	          	  data:jsonPieX
	          },
	          toolbox: {
	              show : true,
	              feature : {
	                  magicType : {
	                      type: ['pie', 'funnel'],
	                      option: {
	                          funnel: {
	                              x: '25%',
	                              width: '50%',
	                              funnelAlign: 'left',
	                              max: 1548
	                          }
	                      }
	                  },
	              }
	          }, 
	          calculable : true,
	          series: [
	              {
	                  name: '错误分布数量',
	                  type: 'pie',
	                  radius: '55%',
	                  //radius: ["40%", "60%"],
	                  center: ['25%', '60%'],
	                  data:jsonPieY,
	                  emphasis: {
	                      itemStyle: {
	                          shadowBlur: 10,
	                          shadowOffsetX: 0,
	                          shadowColor: 'rgba(0, 0, 0, 0.5)'
	                      }
	                  },  
	                  
	                 label: { //去掉指示线
	                  	normal: {
	                  	show: false,
	                  	position: 'inside',
	                  	formatter:"{b}:{d}%"
	                  	}
	                  }, 
	                  
	              }
	          ],
	      };
	      // 为echarts对象加载数据
	      myChart.setOption(option);
	}
	   
	    
	</script>
</body>
</html>

4.后端代码：


	A.controller层代码

  
    @RequestMapping(value = "/getUserList")
    @ResponseBody
    public List<UserVo> getUserList() {
    	return dashBoardService.getUserList();
    }

	 @RequestMapping(value = "/getBar")
	 @ResponseBody
	 public  Map<String, Object> getBar(@RequestParam(value = "userId", required = false) int userId,
	    		@RequestParam(value = "startTime", required = false) String startTime,
	    		@RequestParam(value = "endTime", required = false) String endTime) {
    	 Map<String, Object> jsonMap = new HashMap<>();
    	 if(startTime!=null && startTime!="") {
    		 startTime = startTime.replaceAll("-", "/");
    	 }
    	 if(endTime!=null && endTime!="") {
    		 endTime = endTime.replaceAll("-", "/");
    	 }
    	 //根据userId查询所有的用户
    	 UserVo vo = userService.getUserInfoById(userId);
    	 //饼状图
         List<String> listPieRuleNameX = new ArrayList<>();
   	     List<Map<String, Object>> listPieCountY = new ArrayList<>();
   	     Map<String, Integer> mapPieName = dashBoardService.getEchartsPieCount(vo.getUserName(), startTime, endTime);
   	     int pieAllCount = 0;
   	     for (String pieName : mapPieName.keySet()) {
 	    	 Map<String, Object> mps=new HashMap<String, Object>();
        	 mps.put("value", mapPieName.get(pieName));
        	 mps.put("name", pieName);
        	 listPieRuleNameX.add(pieName);
	         listPieCountY.add(mps);
	         //错误总个数
	         int temp = mapPieName.get(pieName);
	         pieAllCount+=temp;
   	     }
   	     jsonMap.put("jsonPieRuleNameX", listPieRuleNameX);
	  	 jsonMap.put("jsonPieCountY", listPieCountY);
	  	 jsonMap.put("pieAllCount", pieAllCount);
	     return jsonMap;
	 }


B.service层代码

	public List<UserVo> getUserList() {
			 return userDao.getUserList();
	}
	
	 public Map<String, Integer> getEchartsPieCount(String userName, String startTime, String endTime){
	    	Map<String, Integer> allPCBNameMap = getAllPCBNameMap();
	    	List<String> dashBoardList = dashBoardDao.getEachCountByTime(userName, startTime, endTime);
	    	for (String d : dashBoardList) {
				//String arrCount = d.getErrorEachCount();
				String[] arr = d.split(";");
			    Map<String, Integer> newMap = new HashMap<>();
			    for (int i = 0; i < arr.length; i++) {
		            String[] ruleArr = arr[i].split(":");
		            newMap.put(ruleArr[0], Integer.parseInt(ruleArr[1]));
		        }
		        newMap.forEach((key,value) -> allPCBNameMap.merge(key,value,Integer::sum));//合并两个map，key相同value相加
	    	}
			return allPCBNameMap;
	}


C.dao层代码


    //代表表名
	private String projectsTable = "projects";
	
	private String userTable = "sys_user";
	
	
    //得到所有用户信息
    public List<UserVo> getUserList() {
        ArrayList<UserVo> list = new ArrayList<>();
        StringBuffer sf = new StringBuffer();
        sf.append("SELECT id,user_name FROM " + userTable );
        SqlRowSet rs = jt.queryForRowSet(sf.toString(), new Object[] {  }, new int[] { });
        while (rs.next()){
            UserVo userVo = new UserVo();
           userVo.setId(rs.getInt("id"));
           userVo.setUserName(rs.getString("user_name"));
           list.add(userVo);
        }
        return list;
    }
    
	
	public List<String> getEachCountByTime(String userName, String startTime, String endTime) {
				List<String> voList = new ArrayList<>();
			    StringBuffer sf = new StringBuffer();
			    sf.append("SELECT error_each_count FROM " + projectsTable);
			    sf.append(" WHERE 1 = 1 ");
			    sf.append(" AND user_name = ?");
			    sf.append(" AND date_time >= '"+startTime+"'");
			    sf.append(" AND date_time <= '"+endTime+"'");
			    SqlRowSet rs = jt.queryForRowSet(sf.toString(),  new Object[] { userName }, new int[] { Types.VARCHAR } );
			    while (rs.next()){
			        String errorEachCount = rs.getString("error_each_count");
			        voList.add(errorEachCount);
			    }
			    return voList;
	}

注意：后端接口 /dashboard/getBar 返回的数据格式：
1. jsonMap的数据格式才是传值到前端，展示饼状图的数据.
2. 代表饼状图的图例名称：jsonPieRuleNameX，也就是jsonMap的key
3. 代表饼状图的data数据：jsonPieCountY，也就是jsonMap的key

jsonPieRuleNameX和jsonPieCountY传过去的格式必须要统一否则饼状图数据加载不出来。

因为我用的框架是springboot，可以根据自己的框架自己更改后端的方法。
在这里插入图片描述
5.数据库表结构：

总结：以上就是我的思路。纯属个人见解，记录一下以防万一。如果您有更好的解决方式，欢迎留言指教。

陌上花语

关注

5
点赞
踩
19

收藏

觉得还不错? 一键收藏
3
评论
echarts饼状图动态获取后台数据ajax+json(三)

首先给大家推荐echarts官网：里面什么柱状图，折线图，饼状图都有。https://echarts.apache.org/examples/zh/index.html可以去下载对应的echarts样式。1.效果图如下：我这边是根据开始时间，结束时间，用户选择三个下拉来查询饼状图的数据的。2.引入前端样式：（前端主要是bootstrap的样式。可以去官网下载哈）3.前端代码：<%@ page language="java" contentType="text/html; charset
复制链接

扫一扫