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

编辑工具：Eclipse

项目：ssm(spring+springmvc+mybatis)

报表展示：使用echarts框架：

效果展示：

根据月报表数据生成图表：

前端页面jsp:

注：需要用到echarts的js去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>
	<!--处理事件js  -->
<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官网，可以下载其案例进行相应的改动，实现你相应的功能。

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

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

猜你喜欢