首页 > 代码库 > EChart报表插件使用笔记(1)
EChart报表插件使用笔记(1)
报表插件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; @Controller public class EchartController { /** * 静态的Echart报表页面 */ @RequestMapping(value=http://www.mamicode.com/"user/echart", method = {RequestMethod.POST,RequestMethod.GET})>
静态页面:<%@ 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>
运行效果图:
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。