springmvc使用echarts生成图表展示功能

谁借莪１个温暖的怀抱￠ 2022-05-15 10:54 264阅读 0赞

编辑工具：Eclipse

项目：ssm(spring+springmvc+mybatis)

报表展示：使用echarts框架：

效果展示：

![70][] 根据月报表数据生成图表：

![70 1][]

前端页面jsp:

注：需要用到echarts的js去[echarts官网][echarts]下载

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
    <%@ include file="../taglibs.jsp"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <meta charset="utf-8">
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    </head>
    <script type="text/javascript"
    	src="<%=request.getContextPath()%>/js/echarts/echarts-all.js"></script>
    <script type="text/javascript"
    	src="<%=request.getContextPath()%>/js/echarts/jquery.min.js"></script>
    	
    <script type="text/javascript"
    	src="<%=request.getContextPath()%>/js/park/echarts.js"></script>
    <body>
    
    	<div id="chartmain" style="width: 600px; height: 400px;"></div>
    	<p>
    		<span>年份： 
    		<select name="years" id="years">
    				<c:forEach items="${sessionScope.years}" var="ys">
    					<option value="${ys}" <c:if test="${ys eq year }">selected</c:if>  >${ys}</option>
    				</c:forEach>
    		</select>
    		</span>
    		 <span>月份：
    		  <select id="mth" name="month">
    				<option value="1"  <c:if test="${'01' eq sessionScope.month}">selected</c:if>>1</option>
    				<option value="2" <c:if test="${'02' eq sessionScope.month}">selected</c:if>>2</option>
    				<option value="3" <c:if test="${'03' eq sessionScope.month}">selected</c:if>>3</option>
    				<option value="4" <c:if test="${'04' eq sessionScope.month}">selected</c:if>>4</option>
    				<option value="5" <c:if test="${'05' eq sessionScope.month}">selected</c:if>>5</option>
    				<option value="6" <c:if test="${'06' eq sessionScope.month}">selected</c:if>>6</option>
    				<option value="7" <c:if test="${'07' eq sessionScope.month}">selected</c:if>>7</option>
    				<option value="8" <c:if test="${'08' eq sessionScope.month}">selected</c:if>>8</option>
    				<option value="9" <c:if test="${'09' eq sessionScope.month}">selected</c:if>>9</option>
    				<option value="10" <c:if test="${'10' eq sessionScope.month}">selected</c:if>>10</option>
    				<option value="11" <c:if test="${'11' eq sessionScope.month}">selected</c:if>>11</option>
    				<option value="12" <c:if test="${'12' eq sessionScope.month}">selected</c:if>>12</option>
    		</select>
    		</span>
    	</p>
    </body>
    <script type="text/javascript">
    	//初始化echarts
    	function chushihua(myChart) {
    		var option = {
    			title : {
    				show : true,
    				text : '月报分析表'
    			},
    			tooltip : {
    				trigger : 'item',
    				formatter : "{a} <br/>{b} : {c} ({d}%)"
    			},
    			series : [ {
    				name : '该月份收入',
    				type : 'pie',
    				radius : '90%',
    
    				data : [ {
    					value : 0,
    					name : '无'
    				}, ]
    			} ]
    		};
    
    		myChart.setOption(option);
    	}
    
    	//从数据库读取数据赋值给echarts
    	function fuzhi(myChart, time) {
    		$.ajax({
    			contentType : "application/json",
    			type : "GET",
    			url : "echartInfo?time=" + time,
    			dataType : "json",
    			success : function(data) {
    				//创建一个数组，用来装对象传给series.data，因为series.data里面不能直接for循环
    				var servicedata = [];
    				console.log(data);
    				if(data.length>0){
    				for (var i = 0; i < data.length; i++) {
    					var obj = new Object();
    					obj.name = data[i].cg_name;
    					obj.value = data[i].income;
    					servicedata[i] = obj;
    				}
    				var yr=$("#years").val();
    				var mh=$("#mth").val();
    				var names=yr+"-"+mh+"月份总收入(元)";
    				myChart.setOption({
    					title : {
    						text : yr+"-"+mh+'月份报表统计'
    					},
    					series : [ {
    						name : names,
    						type : 'pie',
    						radius : '60%',
    						data : servicedata,
    					} ]
    
    				});
    				}else{
    					alert("无该月份数据");
    				}
    			}
    		});
    	}
    
    	//初始化echarts实例
    	var myChart = echarts.init(document.getElementById('chartmain'));
    	chushihua(myChart);
    	var date = new Date();
    	var year = date.getFullYear();
    	var month = (date.getMonth() + 1).toString();
    	if (month < 10) {
    		month = "0" + month;
    	}
    	var dateTime = year + "-" + month;
    	fuzhi(myChart, dateTime);
    </script>
    </html>

处理事件js:主要是根据年份，月份的变动来ajax请求实现图表动态数据的变换展示：

$(function(){
    	
    	$("#years").change(function(){
    		var year=$("#years").val();
    		var month=$("#mth").val();
    		if (month < 10) {
    			month = "0" + month;
    		}
    		var dateTime = year + "-" + month;
    		fuzhi(myChart, dateTime);
    	});
    	
    	$("#mth").change(function(){
    		var year=$("#years").val();
    		var month=$("#mth").val();
    		if (month < 10) {
    			month = "0" + month;
    		}
    		var dateTime = year + "-" + month;
    		fuzhi(myChart, dateTime);
    	});
    	
    })

controller层：

/**
    	 * 根据时间查询月报表时间返回给前端页面
    	 * @param req
    	 * @param time
    	 * @return
    	 */
    	@RequestMapping("/echartInfo")
    	@ResponseBody
    	public List<ParkingBo> chartInfo(HttpServletRequest req,String time) {
    		req.getSession().setAttribute("year", time.substring(0, 4));
    		req.getSession().setAttribute("month",time.substring(5,7));
    		return mthReportService.chartInfo(time);
    	}

service层：

//获取数据生成图表
    	List<ParkingBo> chartInfo(String time);

serviceImpl层：

@Override
    	public List<ParkingBo> chartInfo(String time) {
    		return mthReportMapper.chartInfo(time);
    	}

mapper层：

//获取数据生成图表
    		List<ParkingBo> chartInfo(String time);

mapper.xml:

<select id="chartInfo" resultType="com.st.eleventh.bo.ParkingBo"
    		parameterType="java.lang.String">
    		select p.cg_name,mr.income from t_parking p
    		,t_monthly_report mr
    		where p.cg_id=mr.cg_id
    		and mr.r_time like
    		concat('%',#{time},'%')
    
    	</select>

好了，实现图表功能思路就是通过ajax拿到你想展示的数据返回到页面，然后对数据进行渲染。如果你想用其他图形展示数据的变化，具体可以看[echarts官网][echarts]，可以下载其案例进行相应的改动，实现你相应的功能。

### 我的座右铭：不会，我可以学；落后，我可以追赶；跌倒，我可以站起来；我一定行。  ###

[70]: /images/20220515/aa202459aa29457bba499d22b9a3143e.png
[70 1]: /images/20220515/7cfedb2b4fa3426996926d6056ae4d4c.png
[echarts]: http://echarts.baidu.com/