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 ...
随机推荐
- CDR X6三折促销活动，可入
继CDR X6双十二限量活动之后,CorelDRAW官方为庆祝2018新年新气象,折扣狂潮,又来一波.上次活动由于时间短,任务急,数量少,使得不少小伙伴抱憾而止,选择默默等待良机.现在,良机来了,即便 ...
- Remember the Word UVALive - 3942 DP_字典树
每个小单词的长度都是小于等于100的,这是个重要的突破口. Code: #include <cstdio> #include <algorithm> #include < ...
- NodeJS学习笔记 (1)资源压缩-zlib(ok)
原文: https://github.com/chyingp/nodejs-learning-guide/blob/master/README.md 自己的跟进学习: 概览 做过web性能优化的同学, ...
- Base64编码字符串时数据量明显变大
那就是当把byte[]通过Convert.ToBase64String转换成Base64编码字符串时数据量明显变大 Base64编码的思想是是采用64个基本的ASCII码字符对数据进行重新编码.它将需 ...
- 洛谷 P4932 浏览器 (思维题)
题目大意:给你一个序列,求满足$x_{i}\: xor\; x_{j}$在二进制下1的数量为奇数的数对数量 打月赛的时候真没想出来,还是我太弱.. xor意义下,对于两个数,假设它们两个每一位都是2个 ...
- 洛谷 P1417 烹调方案 （01背包拓展）
一看到这道题就是01背包 但是我注意到价值和当前的时间有关. 没有想太多,直接写,0分 然后发现输入方式不对-- 改了之后只有25分 我知道wa是因为时间会影响价值,但不知道怎么做. 后来看了题解,发 ...
- Obfuscating computer code to prevent an attack
A method and system for obfuscating computer code of a program to protect it from the adverse effect ...
- 使用sh运行bash脚本的奇怪问题
在同一个文件夹下有两个脚本.a.sh和b.sh,脚本内容例如以下: a.sh: echo "test for a" source b.sh b.sh: echo "tes ...
- 泛泰 A850 4.1.2 刷第三方专用Recovery合集
下载 http://download.csdn.net/detail/benjaminwan/7406089 专用于刷基于AOSP4.1.2的乐蛙和MIUIV5 由于本人制作的第三方ROM,为了通刷, ...
- jquery-easyui的datagrid在checkbox多选时，行选中不正确应，去除高亮的解决方法
jquery-easyui的datagrid在checkbox多选时,行选中不正确应,去除高亮的解决方法 工作中用到一个具有多选功能的easyui-datagrid在处理cell的点击事件时,不同 ...