一个柱状图,一个折线图。不多说直接上代码。一个是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();
}
}
}
}