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="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>
执行效果图：
EChart报表插件使用笔记（1）的更多相关文章
- echart报表插件使用笔记（二）--按月统计
按月统计注冊人数 java类: package com.spring.controller; import java.io.IOException; import java.sql.Connectio ...
- ionic3引用外部插件--百度地图及echart报表的使用
前言 ionic3提供的组件已经相当丰富咯,但是事实上有些特殊的需求,比如使用百度地图,或者第三方插件echart报表插件是,就不能用传统的方式去使用第三方插件咯,如何在Ionic3项目中使用第三方J ...
- 安装VS2010水晶报表插件
Visual Studio 2010默认不带水晶报表,需要安装一个水晶报表插件,首先下载此插件: http://downloads.businessobjects.com/akdlm/cr4vs201 ...
- highcharts js报表工具(报表插件)
highcharts报表工具(报表插件.图表工具) highcharts效果在线演示(可查看源代码): http://www.hcharts.cn/demo/index.php?p=56 Highc ...
- MyBean通用报表插件介绍
特性: 1.基于MyBean插件平台.可以在任何插件中无缝调用显示. 2.其他窗体中无需引用报表控件.就可以拥有报表的设计预览打印等功能. 3.甚至可以不用带包,制作报表插件,也就是说你可以将RM的报 ...
- VS2010中水晶报表插件下载安装方法
Visual Studio 2010默认不带水晶报表,需要安装一个水晶报表插件,首先下载此插件: http://downloads.businessobjects.com/akdlm/cr4vs201 ...
- jquery报表插件收藏 MARK
Highcharts http://www.hcharts.cn/ 统计报表插件 jquery ui官网 http://jqueryui.com/selectmenu/#custom_render
- 挖到一款免费好用的web报表插件
最近公司项目需要用到报表,公司领导要求我来调研下报表工具.开始的时候了解了目前市场上功能强大,占有率高的两款报表工具,帆软报表和润乾报表,这两款报表工具功能比较强大,覆盖的行业较广,基本能满足所有的报 ...
- JQ 报表插件 jquery.jqplot 使用
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...
随机推荐
- 优动漫PAINT画树教程
依次解析画树要点!让画树不再是难事~ 优动漫PAINT下载:http://wm.makeding.com/iclk/?zoneid=18597
- java爬虫的selenium基础使用
实用博客 selenium java教程 具体项目运用 项目背景:从西安市人民政府网站上获取到县区新闻,从下图可以看出“区县热点”是需要在页面中进行点击的,这里页面使用的是javascript的函数 ...
- 洛谷P3834 【模板】可持久化线段树 1 主席树
Code: #include<cstdio> #include<algorithm> using namespace std; const int maxn = 2000000 ...
- NodeJS学习笔记 (9)网络服务-https(ok)
模块概览 这个模块的重要性,基本不用强调了.在网络安全问题日益严峻的今天,网站采用HTTPS是个必然的趋势. 在nodejs中,提供了 https 这个模块来完成 HTTPS 相关功能.从官方文档来看 ...
- 51nod 1526 分配笔名（Trie树+贪心）
建出Trie树然后求出一个点子树中有多少笔名和真名.然后贪心匹配即可. #include<iostream> #include<cstring> #include<cst ...
- 关于python return 和 print 的区别
概念上一个是 返回值 一个是打印输出 区别一:return是结束语一般放在函数的最后,当你在return 结束后面再写一些东西是不执行的如 下 def renshu(x,y): h=x+y pri ...
- 重载和const形参
1.int lookup(string p); 2.int lookup(const string p);//同1 3.int lookup(string *);//传入一个指针,指针指向string ...
- curl命令查看响应时间
curl -w "%{time_namelookup}::%{time_connect}::%{time_starttransfer}::%{time_total}::%{speed_dow ...
- javascript取前n天的日期两种方法
方法一: var d = new Date(); d = new Date(d.getFullYear(),d.getMonth(),d.getDate()-n); 方法二: var now = ne ...
- OpenCASCADE点向平面投影
OpenCASCADE点向平面投影 OpenCASCADE的ProjLib类提供了解析曲线(直线.圆.椭圆.抛物线.双曲线)向解析曲面(平面.圆柱面.圆锥面.球面.圆环面)投影的功能,主要用来计算三维 ...