报表插件Echart
java类
package com.spring.controller;import java.io.IOException;import java.util.Arrays;import java.util.Date;import java.util.List;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import net.sf.json.JSONArray;import org.springframework.stereotype.Controller;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RequestMethod;import org.springframework.web.servlet.ModelAndView;@Controllerpublic class EchartController { /** * 静态的Echart报表页面 */ @RequestMapping(value="user/echart", method = {RequestMethod.POST,RequestMethod.GET}) public ModelAndView PostJsonTest(HttpServletRequest request,HttpServletResponse response) throws IOException{ ModelAndView mav=new ModelAndView(); mav.addObject("time", new Date()); mav.setViewName("echart/echart"); return mav; } /** * 动态的Echart报表页面 */ @RequestMapping(value="user/echart2", method = {RequestMethod.POST,RequestMethod.GET}) public ModelAndView dynamicEchart(HttpServletRequest request,HttpServletResponse response) throws IOException{ ModelAndView mav=new ModelAndView(); String str[]={"衬衫2","羊毛衫2","雪纺衫2","裤子2","高跟鞋2","袜子2","nickname"}; float bar[]={15, 28, 41, 45, 56, 120, 89}; List<String> category=Arrays.asList(str);//将数组转换成为list mav.addObject("time", new Date()); mav.addObject("listData", category);//list mav.addObject("array", str);//数组 mav.addObject("jsonArray", JSONArray.fromObject(str));//转换为json数组 mav.addObject("jsonList", JSONArray.fromObject(category));//转换为json数组 mav.addObject("jsonInt", JSONArray.fromObject(bar));//转换为json数组 mav.setViewName("echart/dynamicEchart"); return mav; } }静态页面：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <base href="<%=basePath%>"> <title>My JSP 'echart.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <!-- <link rel="stylesheet" type="text/css" href="styles.css"> --> <script type="text/javascript" src="<%=basePath%>resources/echart/esl.js"></script> </head> <body> <div id="main" style="height:400px"></div> <script type="text/javascript"> // 路径配置 require.config({ paths:{ 'echarts' : 'resources/echart/echarts', 'echarts/chart/bar' : 'resources/echart/echarts' } }); // 使用 require( [ 'echarts', 'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载 ], function (ec) { // 基于准备好的dom，初始化echarts图表 var myChart = ec.init(document.getElementById('main')); var option = { tooltip: { show: true }, legend: { data:['销量'] }, xAxis : [ { type : 'category', data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] } ], yAxis : [ { type : 'value' } ], series : [ { "name":"销量", "type":"bar", "data":[5, 20, 40, 10, 10, 20] } ] }; // 为echarts对象加载数据 myChart.setOption(option); } ); </script> </body></html>动态页面：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <base href="<%=basePath%>"> <title>My JSP 'dynamicEchart.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <!-- <link rel="stylesheet" type="text/css" href="styles.css"> --><script src="<%=basePath%>js/jquery.min.js"></script><script type="text/javascript" src="<%=basePath%>resources/echart/esl.js"></script> </head> <body> <div id="main" style="height:400px"></div> <input type="text" id="array" class="array" value="${array}" > <input type="text" id="listData" class="listData" value="${listData}" > <input type="text" id="jsonArray" class="jsonArray" value="${jsonArray}" > <input type="text" id="jsonList" class="jsonList" value="${jsonList}" > <script type="text/javascript"> // 路径配置 require.config({ paths:{ 'echarts' : 'resources/echart/echarts', 'echarts/chart/bar' : 'resources/echart/echarts' } }); // 使用 require( [ 'echarts', 'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载 ], function (ec) { // 基于准备好的dom，初始化echarts图表 var myChart = ec.init(document.getElementById('main')); var jsonList=${jsonList};//接收后台传过来的json数组 alert(jsonList); var jsona=${jsonArray};//接收后台传过来的json数组 alert(jsona); var jsonInt=${jsonInt};//接收后台传过来的json数组 alert(jsonInt); //便利json数组 /* $.each(json,function(n,value) { alert(value) }); */ var option = { tooltip: { show: true }, legend: { data:['销量'] }, xAxis : [ { type : 'category', data : jsonList } ], yAxis : [ { type : 'value' } ], series : [ { "name":"销量", "type":"bar", "data":jsonInt } ] }; // 为echarts对象加载数据 myChart.setOption(option); } ); </script> </body></html>运行效果图：
