SSH框架，Action取JSON数据并传给JSP，生成Echarts

测试后台网址能拿到数据

struts.xml配置文件

此配置文件表示对于http://localhost:8080/ekp/sys/operationPortal.do?method=improveDetail，使用ReportFormAction来处理网页请求，网址后面?method=improveDetail，指向具体的网页分页。

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE struts-config PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 1.2//EN" "http://jakarta.apache.org/struts/dtds/struts-config_1_2.dtd">
<struts-config>
	<!-- 操作映射 -->
	<action-mappings>
		<!--获取报表数据 -->
		<action path="/sys/operationPortal" type="com.landray.kmss.sys.operationPortal.actions.ReportFormAction"
			parameter="method" scope="request">
			<forward name="improveDetail" path="/sys/operationPortal/improvement.jsp" />
			<forward name="serviceDetail" path="/sys/operationPortal/index.jsp" />
			<forward name="operationDetail" path="/sys/operationPortal/operation.jsp" />
			<forward name="projectDetail" path="/sys/operationPortal/project.jsp" />
		</action>
	</action-mappings>
</struts-config>

Action取JSON数据

package com.landray.kmss.sys.operationPortal.actions;

import java.io.PrintWriter;
import java.util.List;
import java.util.Map;

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

import org.apache.struts.action.ActionForm;
import org.apache.struts.action.ActionForward;
import org.apache.struts.action.ActionMapping;

import com.landray.kmss.common.actions.ExtendAction;
import com.landray.kmss.common.service.IBaseService;
import com.landray.kmss.sys.operationPortal.service.ImproveDetailServiceImp;
import com.landray.kmss.sys.operationPortal.service.OperationDetailServiceImp;
import com.landray.kmss.sys.operationPortal.service.ProjectDetailServiceImp;
import com.landray.kmss.sys.operationPortal.service.SharedDetailServiceImp;
import com.landray.kmss.util.ResourceUtil;
import com.landray.kmss.util.web.HttpRequest;

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

/**
 * 运营门户 报表
 * @author shengx
 *
 */
public class ReportFormAction extends ExtendAction{
	//改善服务
	protected ImproveDetailServiceImp improveDetailService;
	//运维
	protected OperationDetailServiceImp operationDetailService;
	//项目管理
	protected ProjectDetailServiceImp projectDetailService;
	//共享服务
	protected SharedDetailServiceImp sharedDetailService;
	
	@Override
	protected IBaseService getServiceImp(HttpServletRequest request) {
		return null;
	}
	
	/**
	 * 初始化共享服务数据
	 * @param mapping
	 * @param form
	 * @param request
	 * @param response
	 * @return
	 * @throws Exception
	 */
	public ActionForward sharedServiceInit(ActionMapping mapping, ActionForm form, HttpServletRequest request,
			HttpServletResponse response) throws Exception {
		//从配置文件sys/operationPortal/ApplicationResources.properties中取AYInfoPlatform的值拼接成地址
		String url = ResourceUtil.getString("AYInfoPlatform", "sys-operationPortal") 
				+ "/api/oa/requests/itsmServiceReport/range/day";// 请求地址
		//从URL中获取JSON数据
		String result = HttpRequest.sendGet(url, "");
	//	String result2 =new String(result1.getBytes(),"UTF-8");
		//取出JSON数据{"dayRange":[{},{}]}
		JSONObject json = JSONObject.fromObject(result);
		//取出dayRange对应的数组[{},{}]
		JSONArray items = (JSONArray) json.get("dayRange");
		//第二种方法，取出的数组放在list中
//		List<Map<String, String>> dayRanges = (List<Map<String, String>>)json.get("dayRange");
		//通过request存储参数
		request.setAttribute("dayRanges", items);
		//跳转到页面
		return getActionForward("serviceDetail", mapping, form, request, response);		
	}
}

index.jsp获取数据并生成柱状图

思路：

1)创建多个数组，每个数组存储一类数据，

var Day_TOTAL = new Array();

    var Day_ResponseTime = new Array();

    var Day_ReceiveTime = new Array();

    var Day_Score = new Array();

    var Day_Date = new Array();

2)从JSON数据中循环取数，并放入到数组中。

   <c:forEach var="var" items="${dayRanges}">

                Day_TOTAL.push('${var.TOTAL}');

        Day_ResponseTime.push('${var.XIANGYING_TIME}');

        Day_ReceiveTime.push('${var.JIEDAN_TIME}');

        Day_Score.push('${var.SCORE}');

        Day_Date.push('${var.DATE}')                           

    </c:forEach>

3)将数据封装到chart变量中

4)调用createChart函数生成表格

    <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>
    //引用createChart.js文件
    <script src="operationPortal/js/createChart.js"></script>
    <script src="operationPortal/js/animation.js"></script>
    <script>
    	//创建数组用于存储Echarts所用数据
		var Day_TOTAL = new Array();
	    var Day_ResponseTime = new Array();
	    var Day_ReceiveTime = new Array();
	    var Day_Score = new Array();
	    var Day_Date = new Array();
	    //从Action中取出的JSON数据
	   <c:forEach var="var" items="${dayRanges}">
                Day_TOTAL.push('${var.TOTAL}');
	       	Day_ResponseTime.push('${var.XIANGYING_TIME}');
	       	Day_ReceiveTime.push('${var.JIEDAN_TIME}');
	       	Day_Score.push('${var.SCORE}');
	        Day_Date.push('${var.DATE}')              	            	
	    </c:forEach>
		//将JSON数据封装到chart变量中
        $(function () {
        	var chart1 = {
                    //dom节点 
                    dom: 'serviceChart',
                    // x轴坐标系
                    //xAxis: ["06.01", "06.02", "06.03", "06.04", "06.05", "06.06", "06.07", "06.08", "06.09", "06.10", "06.11", "06.12"],
                    xAxis:Day_Date,
                    // y1轴坐标系
                    yAxis1: { min: 0, max: 5, interval: 1 },
                    // y2轴坐标系
                    yAxis2: { min: 0, max: 10, interval: 2 },
                    //图例名称
                    legend: ['总数', '响应时间', '接单时间', '评价得分'],
                    //总数
                    //total: [2.0, 4.9, 4.0, 3.2, 2.6, 4.7, 3.6, 2.2, 2.6, 2.0, 4.4, 3.3],
                    total:Day_TOTAL,
                    //响应时间
                    //res: [2.0, 2.2, 3.3, 3.5, 5.3, 7, 8, 9, 9.0, 6.5, 7.0, 6.2],
                    res:Day_ResponseTime,
                    //接单时间
                    //order: [3.0, 3.3, 3.3, 4.5, 6.3, 10, 9.3, 7.4, 8.0, 6.5, 3.0, 6.3],
                    order:Day_ReceiveTime,
                    //评价得分
                    //score: [3.0, 3.3, 5, 4.5, 4.3, 3.3, 4.3, 3.4, 3.0, 4.5, 4.0, 4.3],
                    score:Day_Score
                }

        	//调用createCharts中的函数
            createChart(chart1);

        }
       
    </script>

createChart.js保存的函数如下：

function createChart(obj) {
    // 基于准备好的dom，初始化echarts实例
    var chart = echarts.init(document.getElementById(obj.dom));

    var option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                crossStyle: {
                    color: '#fff'
                }
            }
        },
        color: ['#dd3ee5', '#12e78c', '#fe8104'],
        legend: {
            data: obj.legend,
            itemHeight: 9,//改变圆圈大小
            icon: "circle",
            textStyle: {
                color: '#B0CEFC'                              // 图例文字颜色
            }
        },
        grid: {
            x: 35,
            y: 38,
            x2: 35,
            y2: 26,
        },
        xAxis: [
            {
                type: 'category',
                data: obj.xAxis,
                axisPointer: {
                    type: 'shadow'
                },
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#B0CEFC',
                    }
                },
            },
        ],
        yAxis: [
            {
                type: 'value',
                name: '(分值)      ',
                min: obj.yAxis1.min,
                max: obj.yAxis1.max,
                interval: obj.yAxis1.interval,
                nameTextStyle: {
                    color: '#B0CEFC',
                    padding: 10
                },

                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#B0CEFC',
                    }
                },
                //网格样式
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: ['#14364f', '#11233c', '#122b44', '#14314a', '#102c42'],
                        width: 1,
                        type: 'solid'
                    }
                },
                axisLine: {
                    show: false
                }
            },
            {
                type: 'value',
                name: '      (分钟)',
                nameTextStyle: {
                    color: '#B0CEFC',
                    padding: 10
                },
                //网格样式
                splitLine: {
                    show: false,
                    lineStyle: {
                        color: ['blue'],
                        width: 1,
                        type: 'solid'
                    }
                },
                min: obj.yAxis2.min,
                max: obj.yAxis2.max,
                interval: obj.yAxis2.interval,
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#B0CEFC',
                    }
                },
                axisLine: {
                    show: false
                }
            }
        ],
        series: [
            {
                name: '总数',
                type: 'bar',
                data: obj.total,
                barWidth: 12,//柱图宽度
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                    offset: 0,
                    color: '#d223e7'
                }, {
                    offset: 1,
                    color: '#f376e0'
                }]),
                itemStyle: {
                    normal: {
                        //柱形图圆角，初始化效果
                        barBorderRadius: [10, 10, 10, 10],
                    }
                },
            },
            {
                name: '响应时间',
                type: 'line',
                yAxisIndex: 1,  //选择index为1的Y轴作为参考系
                data: obj.res,
                lineStyle: {
                    normal: {
                        color: "#dd3ee5"
                    }
                }
            },
            {
                name: '接单时间',
                type: 'line',
                yAxisIndex: 1,   //选择index为1的Y轴作为参考系
                data: obj.order,
                lineStyle: {
                    normal: {
                        color: "#12e78c"
                    }
                }
            },
            {
                name: '评价得分',
                type: 'line',
                yAxisIndex: 0,  //选择index为0的Y轴作为参考系
                data: obj.score,
                lineStyle: {
                    normal: {
                        color: "#fe8104"
                    }
                }
            }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    chart.setOption(option);
}