ECharts 与struts的后台交互之柱状图
ECharts主页: http://echarts.baidu.com/index.html
ECharts-2.1.8下载地址: http://echarts.baidu.com/build/echarts-2.1.8.zip
ECharts官方实例: http://echarts.baidu.com/doc/example.html
ECharts官方API文档: http://echarts.baidu.com/doc/doc.html
1、ECharts是百度的开源项目。在其官网上有非常多实例,我就不多废话刘,这里我们引用的是echarts-all.js 官网上下载。还有jquery的js这样就省去了官网上的这样的步骤
// 路径配置
require.config({
paths: {
echarts: 'http://echarts.baidu.com/build/dist'
}
}); // 使用
require(
[
'echarts',
'echarts/chart/bar' // 使用柱状图就载入bar模块。按需载入
],
当你引用了echarts-all.js之后上面的步骤就能够去掉了
2、前台代码例如以下
新建一个div
<div id="main2" style="height:400px"></div>
当点击事件触发先吧可选项注入mychart中
var myChart2 = echarts.init(document.getElementById('main2'));
function createBar(){
option2 = {
title : {
text: '练习',
subtext: '纯属虚构'
},
tooltip : {
trigger: 'axis'
},
grid : {
width : '50%'
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : false,
xAxis : [
{
type : 'category',
data : ['1月','2月','3月','4月','5月','6月','7月']
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'收入',
type:'bar',
data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
}
]};
myChart2.setOption(option2);
myChart2.hideLoading();
getChartData1();//ajax后台交互取得数据
}
function getChartData1() {
//获得图表的options对象
var option2 = myChart2.getOption();
//通过Ajax获取数据
$.ajax({
type : "post",
async : false, //同步运行
url : "<%=path%>/chart_lineData1",
dataType : "json", //返回数据形式为json
success : function(data) {
option2.xAxis[0].data = data.category;
option2.series[0].data = data.series[0].data;
myChart2.hideLoading();
myChart2.setOption(option2);
},
error : function(errorMsg) {
alert("请求数据失败啦!");
myChart.hideLoading();
}
});
}
</script>
3、后台代码
首先新建一个类
public class Series {
public String name;
public String type;
public ArrayList<String> data;//
public Series(String name, String type, ArrayList<String> arrayList) {
this.name=name;
this.type=type;
this.data=arrayList;
}
}
注意get set方法
接着上action的代码
public String lineData1() {
this.collects=this.collectService.findAllCollects("1");//这是我从数据库取数据
String m[]=new String[collects.size()];
for(int i=0;i<collects.size();i++){
m[i]=collects.get(i).getItemAmounts().toString();//数据封装成数组
}
List<String> legend = new ArrayList<String>(Arrays.asList(new String[]{"收入"}));//数据分组
List<String> category = new ArrayList<String>(Arrays.asList(new String []{"周一","周二","周三","周四","周五","周六","周日"}));//横坐标
List<Series> series = new ArrayList<Series>();//纵坐标
series.add(new Series("收入", "bar",new ArrayList<String>(Arrays.asList(m))));
Map<String, Object> map = new HashMap<String, Object>();
map.put("legend", legend);
map.put("category", category);
map.put("series", series);
return Utils.ajaxJson(map);
}
这里我用的封装map集合的方式传递json,Utils.ajaxJson是一个工具类,假设有不懂的看我之前的博客,上面有源代码
到这里前后台的交互就完毕了,
ECharts 与struts的后台交互之柱状图的更多相关文章
- echart使用与后台交互
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- Ztree的简单使用和后台交互的写法(二)
针对Ztree的简单使用和后台交互的写法(一)中的树进行改进 1.增加节点的权限 由页面的当前用户,决定树的根节点 然后动态获取树的详细节点: 初始化函数为: function init(){ //初 ...
- Extjs 4.2 Grid增删改及后台交互(Java)
上次发了Easyui Datagrid的增删改查的使用学习记录后一直想整理下基于Extjs4.2的Grid学习使用记录.苦于抽不出时间,一直拖到现在.不得不说,Extjs确实很强大,新版的Neptun ...
- JSON数据格式以及与后台交互数据转换实例
/* 作者:烟大阳仔 时间:20131013 介绍:主要了解一下json的格式,看看数据是怎么存储的 */ <!DOCTYPE html PUBLIC "-//W3C//DTD HTM ...
- ajax简单后台交互
ajax简单后台交互 1,扯淡 单身的生活,大部分时间享受自由,小部分时间忍受寂寞. 生活有时候,其实蛮苦涩,让人难以下咽.那些用岁月积累起来的苦闷,无处宣泄,在自己的脑海里蔓延成一片片荆棘,让你每每 ...
- 通过ajax前端后台交互/登录页和注册页前端后台交互详解/前端后台交互基础应用/几个后台函数的基础应用/php文件函数基础应用/php字符传函数基础应用/php数组函数基础应用
前 言 PHP 学习了好久的PHP,今天做一个可以后台交互的登录页和注册页,没做什么判断,简单的了解一下. 具体的内容分析如下: ① PHP中的数据传输-->>由注册页传输 ...
- 如何用CropBox实现头像裁剪并与java后台交互
如何用CropBox实现头像裁剪并与java后台交互 参考网站:https://developer.mozilla.org/zh-CN/docs/Web/API/Blob 参考: http://blo ...
- js与后台交互详述(入门篇)
很多新手前端在初期学习的时候往往把注意力放在如何编写页面,如何编写效果上,群里有个朋友问我js是如何与后台交互的,我简单的说一下. 首先需要知道两个东西,一个是客户端,一个是服务器,客户端其实就是我们 ...
- 简单web网页与SSM后台交互
简单web网页与SSM后台交互 情况说明 如今,已经搭建好SSM后台开发环境,并且可以经由postman工具测试成功.现在尝试写出web前端网页,通过实现简单的提交.注册.查询功能来加深对前后端数据传 ...
随机推荐
- Memento 备忘录 快照模式 MD
备忘录模式 简介 在不破坏封装的前提下,捕获一个对象的[内部状态],并在该对象之外保存这个状态,这样以后就可以将该对象恢复到原先保存的状态. 角色: 发起人Originator:要被备份的成员,它提供 ...
- 眼前一亮!十八款新潮而又独特的网站Header设计
一个网站最重要的一个部分就是标题.这将是访问者的第一印象,设计出一个吸引眼球并且功能清晰导航还是比较容易的,但想出一个独特的header却总是困难的,这就是为什么我决定把那些对我有最影响的导航列出来了 ...
- 查询分页-----强势top
查询分页:语句1性能提升10倍多,仅仅是由于多了个topkeyword,非常不理解啊!!!! 1.查询时间1s内,r_object_id主键 select top 100 * from ( sele ...
- 【记录】cygwin下折腾个人配置环境
(本文由hcbbt发布,转载请注明出处,blog.csdn[dot]net/hcbbT) cygwin是windows下的linux的模拟环境,不仅可以执行linux的各种命令,可以在cyg ...
- 【PAT Advanced Level】1013. Battle Over Cities (25)
这题给定了一个图,我用DFS的思想,来求出在图中去掉某个点后还剩几个相互独立的区域(连通子图). 在DFS中,每遇到一个未访问的点,则对他进行深搜,把它能访问到的所有点标记为已访问.一共进行了多少次这 ...
- javascript进行遍历
javascript进行遍历 <!doctype html> <html lang="en"> <head> <meta charset= ...
- [Algorithm] Search for matching words
Implement an autocomplete system. That is, given a query string s and a set of all possible query st ...
- YUM常用命令详解
yum是一个用于管理rpm包的后台程序,用python写成,可以非常方便的解决rpm的依赖关系.在建立好yum服务器后,yum客户端可以通过 http.ftp方式获得软件包,并使用方便的命令直接管理. ...
- java面试第四天
修饰符static: 把对象相关的变成类相关的,它可以修饰属性.方法.代码块和内部类 static修饰属性(类变量): 那么这个属性就可以用" 类名.属性名 "来访问,也就是使这个 ...
- 1z0-052 q209_10
10: A user, who is authenticated externally, logs in to a remote machine and connects to the databas ...