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"%>




	



	



	

	

		年份： 
		
				
					selected  >${ys}
				
		
		
		 月份：
		  
				selected>1
				selected>2
				selected>3
				selected>4
				selected>5
				selected>6
				selected>7
				selected>8
				selected>9
				selected>10
				selected>11
				selected>12
		
		
	

处理事件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 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 chartInfo(String time);

  serviceImpl层：

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

mapper层：

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

mapper.xml:

	
		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},'%')

	

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

 

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