可能是最简单的jsp+servlet实现ECharts案例(给初学者提供思路)

一个柱状图,一个折线图。不多说直接上代码。一个是jsp的,一个是对应的servlet的。 

<%@ page language="java" contentType="text/html; charset=GBK" pageEncoding="GBK"%>
<%@ taglib prefix="tags" tagdir="/WEB-INF/tags"%>
<script src="<%=request.getContextPath()%>/basejs/echarts.js" charset="UTF-8"></script>
<script src="<%=request.getContextPath()%>/basejs/jquery.min.js"></script>

<style>

	.leftDiv{
		float: left;
		width: 48%;
		height:96%;
		overflow:hidden;
		margin:10px 10px 10px 10px;
	}
	
	.rightDiv{
		float: right;
		width: 48%;
		height:96%;
		overflow:hidden;
		margin:10px 10px 10px 10px;
	}

</style>

<div>
	<div id="left" class="leftDiv"></div>
	
	<div id="right" class="rightDiv" >
	
		<div style="height: 10%;">
			<table>
				<tr>
					<select property="chb001" label="项目名称" onchange="right"/>
				</tr>
			</table>
		</div>
		
		<div id="rightDiv" style="width: 100%; height: 90%;"></div>
		
	</div>
</div>

<script type="text/javascript">
var  centerdiv12= echarts.init(document.getElementById('rightDiv'));
var leftdiv1 = echarts.init(document.getElementById('left'));

	
	var option1 = {
		color: ['#3398DB'],
	    title : {
	    	left:'left',
	        text: '工资范围',
	        subtext: '(单位:人)'
	    },
	    tooltip : {
	        trigger: 'axis'
	    },
	    legend: {
	    	x: 'right',
	        data:['人员数量']
	    },
	    toolbox: {
	        show : false,
	        feature : {
	            dataView : {show: true, readOnly: false},
	            magicType : {show: true, type: ['line', 'bar']},
	            restore : {show: true},
	            saveAsImage : {show: true}
	        }
	    },
	    calculable : true,
	    xAxis : [
	        {
	            type : 'category',
	            data : ['3000元以下', '3000-5000元', '5000-10000元', '10000元以上']
	        }
	    ],
	    yAxis : [
	        {
	            type : 'value'
	        }
	    ],
	    grid:{
	        x:65,
	        y:65,
	        x2:25,
	        y2:35,
	        borderWidth:1
	    },
	    series : [
	        {
	            name:'人员数量',
	            type:'bar',
	            barMaxWidth: '50',
	            data:[],
	        }
	    ]
	};
	

	
	var option4 = {
			title : {
		    	left:'left',
		        subtext: '(单位:元)'
		    },
		    tooltip: {
		        trigger: 'axis'
		    },
		    legend: {
		    	x: 'right',
		        data:[]
		    },
		    grid: {
		        left: '3%',
		        right: '4%',
		        bottom: '3%',
		        containLabel: true
		    },
		    xAxis: {
		        type: 'category',
		        boundaryGap: false,
		        data: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月']
		    },
		    yAxis: {
		        type: 'value'
		    },
		    series: [{
	            name:'',
	            type:'line',
	            data:[]
	        }]
		};
	
	



	
	<!-- 默认加载-->
	window.onload=function(){
		leftdiv1.showLoading();
		centerdiv12.showLoading();
		
		if (option1 && typeof option1 === "object") {
			setOptionsToAll('1','');
		}
		
		/* if (option4 && typeof option4 === "object") {
			setOptionsToAll('2');
		} */
	}
	
	
	/* function optionChange(){
		centerdiv12.showLoading();
		var test=$("#test").val();
		if (option4 && typeof option4 === "object") {
			if(test == '1'){
				setOptionsToAll('2');
			}else{
				setOptionsToAll('3');
			}
		}
	} */
	
	
	function setOptionsToAll(type,project){
		var cc = new Array();
		cc = queryDataAjax(type,project);
		if(type == '1'){
		 	option1.series[0].data= cc[0]; 
			leftdiv1.hideLoading();
			leftdiv1.setOption(option1);	
		}else if(type == '2'){
			option4.series[0].data= cc[0]; 
			option4.series[0].name= cc[1];
			option4.legend.data= cc[1];
			centerdiv12.hideLoading();
			centerdiv12.setOption(option4);	

		}
	
	}

	function queryDataAjax(type,project){//type表示当前获取数据的option,project表示项目名称
		$.ajaxSettings.async = false;
		var Jsondata = new Array();
		var Jsonlegend = new Array();
		var url =  "<%=request.getContextPath()%>/DataStatisticServlet?method=doPost&initParams="+type+"&project="+project;
	    $.getJSON(url, function (json) {  
	    	if(type == '1'){
	    		Jsondata[0] = json.series;
	    	}else if(type == '2'){
	    		Jsondata[0] = json.series;
	    		Jsondata[1] = json.legend;
	    	}
	    	 
	    });  
	 return Jsondata;
	
	}
</script>

<script type="text/javascript">
	
</script>
package com.tony.siis.local.file;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.commons.lang.StringUtils;
import org.hibernate.Session;

import net.sf.json.JSONArray;
import net.sf.json.JSONObject;

import com.alibaba.fastjson.JSON;
import com.tony.framework.AppException;
import com.tony.framework.commform.hibernate.HUtil;
import com.tony.framework.persistence.HBSession;
import com.tony.framework.persistence.HBTransaction;
import com.tony.framework.persistence.HBUtil;
import com.tony.framework.privilege.PrivilegeException;
import com.tony.siis.local.pagemodel.comm.AreaCode;
import com.tony.siis.local.util.JsonUtils;

/**
 * Servlet implementation class EchartsUtils
 */
public class DataStatisticServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
	
			doPost(request,response);
		
		
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		response.setContentType("text/html");
		response.setCharacterEncoding("GBK");
		PrintWriter out = response.getWriter();
		
		
		
		HBSession sess = HBUtil.getHBSession();
		Map<String,Object> map = new HashMap<String, Object>();
		//获取当前需要传递数值的统计模板
		String type = new String(request.getParameter("initParams").getBytes("ISO-8859-1"),"GBK");
		String chb001 = new String(request.getParameter("project").getBytes("ISO-8859-1"),"GBK");
		
		if("1".equals(type)){
			
			ArrayList<Object> list3 = new ArrayList<Object>();//存series数据值
			List<Object[]> getOption1 = sess.createSQLQuery("select sum (case  when 0 < = chc002 and chc002 < 3000 then 1 else 0 end )as a ,"
					+ "sum (case  when 3000 < = chc002 and chc002 < 5000 then 1 else 0 end )as b ,"
					+ "sum (case  when 5000 < = chc002 and chc002 < 10000 then 1 else 0 end )as c,"
					+ "sum (case  when 10000 < = chc002 then 1 else 0 end )as from xx").list();
			
			Object[] option1Arr = getOption1.get(0);
			for(int i=0;i<option1Arr.length;i++){
				
				list3.add(option1Arr[i]);
			}
				
			JSONArray jsonObject1 = JSONArray.fromObject(list3);
			map.put("series", jsonObject1);
		}else if("2".equals(type)){
			
			ArrayList<Object> list3 = new ArrayList<Object>();//存series数据值
			ArrayList<Object> list4 = new ArrayList<Object>();//存legend的值
			List<Object[]> getOption1 = sess.createSQLQuery("select SUM (case  when  TO_CHAR(chc003 , 'MM')= '01' then chc002 else '0' end) 一月,"
					+ "SUM (case  when  TO_CHAR(chc003 , 'MM')= '02' then chc002 else '0' end) 二月,"
					+ "SUM (case  when  TO_CHAR(chc003 , 'MM')= '03' then chc002 else '0' end) 三月,"
					+ "SUM (case  when  TO_CHAR(chc003 , 'MM')= '04' then chc002 else '0' end) 四月,"
					+ "SUM (case  when  TO_CHAR(chc003 , 'MM')= '05' then chc002 else '0' end) 五月,"
					+ "SUM (case  when  TO_CHAR(chc003 , 'MM')= '06' then chc002 else '0' end) 六月,"
					+ "SUM (case  when  TO_CHAR(chc003 , 'MM')= '07' then chc002 else '0' end) 七月,"
					+ "SUM (case  when  TO_CHAR(chc003 , 'MM')= '08' then chc002 else '0' end) 八月,"
					+ "SUM (case  when  TO_CHAR(chc003 , 'MM')= '09' then chc002 else '0' end) 九月,"
					+ "SUM (case  when  TO_CHAR(chc003 , 'MM')= '10' then chc002 else '0' end) 十月,"
					+ "SUM (case  when  TO_CHAR(chc003 , 'MM')= '11' then chc002 else '0' end) 十一月,"
					+ "SUM (case  when  TO_CHAR(chc003 , 'MM')= '12' then chc002 else '0' end) 十二月 "
					+ "from xx where TO_CHAR(chc003, 'yyyy') = TO_CHAR(sysdate, 'yyyy') and chb001 = '"+chb001+"'").list();
			
			Object[] option1Arr = getOption1.get(0);
			for(int i=0;i<option1Arr.length;i++){
				
				list3.add(option1Arr[i]);
			}
			String legendData = chb001+"周期工资发放统计";
			list4.add(legendData);
			JSONArray jsonObject1 = JSONArray.fromObject(list3);
			JSONArray jsonObject2 = JSONArray.fromObject(list4);
			map.put("series", jsonObject1);
			map.put("legend", jsonObject2);
		}
		
		JsonUtils.writeJson(map, request, response);
	}

}

补充一个json转换公共类:

package com.tony.siis.local.util;

import java.io.IOException;  
import java.io.PrintWriter;  
import java.util.Arrays;  
  
import javax.servlet.http.HttpServletRequest;  
import javax.servlet.http.HttpServletResponse;  
  
import com.alibaba.fastjson.JSON;  
import com.alibaba.fastjson.serializer.SerializerFeature;  
  

public class JsonUtils {  
      
    public static void writeJson(Object object,   
            HttpServletRequest request, HttpServletResponse response) {  
        writeJsonByFilter(object, null, null, request, response);  
    }  
      
    public static void writeJsonByIncludesProperties(Object object, String[] includesProperties,  
            HttpServletRequest request, HttpServletResponse response) {  
        writeJsonByFilter(object, includesProperties, null, request, response);  
    }  
      
    public static void writeJsonByExcludesProperties(Object object, String[] excludesProperties,  
            HttpServletRequest request, HttpServletResponse response) {  
        writeJsonByFilter(object, null, excludesProperties, request, response);  
    }  
      
    public static void writeJsonByFilter(Object object, String[] includesProperties,  
            String[] excludesProperties, HttpServletRequest request, HttpServletResponse response) {  
        response.setContentType("text/html;charset=utf-8");  
        response.setHeader("Cache-Control", "no-cache");  
        PrintWriter writer = null;  
        try {  
            writer = response.getWriter();  
            FastjsonPropertyFilter filter = new FastjsonPropertyFilter();  
            if (includesProperties != null && includesProperties.length > 0) {  
                filter.getIncludes().addAll(Arrays.<String> asList(includesProperties));  
            }  
            if (excludesProperties != null && excludesProperties.length > 0) {  
                filter.getExcludes().addAll(Arrays.<String> asList(excludesProperties));  
            }  
            String userAgent = request.getHeader("User-Agent");  
            if (userAgent.indexOf("MSIE") > -1 && (userAgent.indexOf("MSIE 6") > -1)) {  
                writer.write(JSON.toJSONString(object, filter,   
                        SerializerFeature.WriteDateUseDateFormat,   
                        SerializerFeature.DisableCircularReferenceDetect,   
                        SerializerFeature.BrowserCompatible));  
            } else {  
                writer.write(JSON.toJSONString(object, filter,   
                        SerializerFeature.WriteDateUseDateFormat,   
                        SerializerFeature.DisableCircularReferenceDetect));  
            }  
            writer.flush();  
        } catch (IOException e) {  
            e.printStackTrace();  
        } finally {  
            if (writer != null) {  
                writer.close();  
            }  
        }  
    }  
  
} 

猜你喜欢

转载自blog.csdn.net/sinat_26494147/article/details/84940780