首页 > 代码库 > 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>
执行效果图：
EChart报表插件使用笔记（1）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。