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 ...
随机推荐
- 响应式流API的构建基础
下面三个重要的概念是响应式流API的构建基础: 发布者是事件的发送方,可以向它订阅. 订阅者是事件订阅方. 订阅将发布者和订阅者联系起来,使订阅者可以向发布者发送信号. http://www.info ...
- 关联对象 AssociatedObject 完全解析
我们在 iOS 开发中经常需要使用分类(Category),为已经存在的类添加属性的需求,但是使用 @property 并不能在分类中正确创建实例变量和存取方法. 不过,通过 Objective-C ...
- 深入了解JWT以及JWT的执行机制
1.JWT以什么样的形式存在? eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9 ...
- javascript的var声明变量和不用var声明变量在全局作用域的区别;
在全局作用域下,使用var定义的变量不可以delete,没有var 定义的变量可以delete.也就说明隐含全局变量严格来说不是真正的变量,而是全局对象的属性,因为属性可以通过delete删除,而变量 ...
- 【Computer Vision】角点检测和匹配——Harris算子
一.基本概念 角点corner:可以将角点看做两个边缘的交叉处,在两个方向上都有较大的变化.具体可由下图中分辨出来: 兴趣点interest point:兴趣点是图像中能够较鲁棒的检测出来的点,它不仅 ...
- 仿射变换(Affine Transformation)
转自:https://www.cnblogs.com/bnuvincent/p/6691189.html http://www.cnblogs.com/ghj1976/p/5199086.html 变 ...
- django 之数据库模块
前提ajango的 数据库主要是为了存取网站的一些内容,数据库的设置一般放在model.py 下 目录下 我们设置如下的数据库:具体的代码如下面所示: # -*- coding: utf-8 -* ...
- Angry IP Scanner 获取设备的IP
给大家介绍一款软件Angry IP scanner,这款软件最大的用处就是能够扫描某一网段的各个主机的ip.通过使用发现,原理就是通过高速的ping每一个ip,假设有主机存在.就获取这个主机的user ...
- Cube Simulation zoj3429 模拟
Description Here's a cube whose size of its 3 dimensions are all infinite. Meanwhile, there're 6 pro ...
- USACO 1.2 Palindromic Squares (进制转换，回文)
/* ID:twd30651 PROG:palsquare LANG:C++ */ #include<iostream> #include<fstream> #include& ...