文档章节

在JAVA web开发中实现ECHARTS和后台的交互

西昆仑
 西昆仑
发布于 2015/04/09 22:23
字数 608
阅读 470
收藏 5

引言

本文用于说明前端组件ECHARTS如何与系统后台进行交互,动态地从后台拉取数据并显示。


交互流程

1. 初始化ECHARTS
2. 通过AJAX向指定控制器发请求,要求返回符合JSON格式的字符串数据;
3. 控制器收到前端请求,通过DAO等收集数据并整理,返回符合ECHART指定格式要求的JSON格式字符串
4. 收到数据后,转换为JSON对象,填充至ECHART图表中并显示。

实现机制
1. 前端实现
前端实现机理是统一的,该段代码可通用。
截图中指明了前端实现要注意的关键,即
a. 在HTML页面中指定显示区域,并设定独一ID
b. 指定具体响应的URL,可返回正确JSON数据


2. 后端实现
本文在后端采用了开源软件ECh  arts-Java( http://git.oschina.net/free/ECharts/wikis/Home  )。  主要目的是方便在Java中构造ECharts中可能用到的全部数据结构,如完整的Option。目前支持ECharts中的所有图表。通过  该项目可以直接构造一个 Option  对象,设置属性后转换为JSON字符串,传至前端即可。
下图展示了使用开源软件Echarts-Java的过程,对于不懂前端开发的人员来说,按照下文套路直接设置
属性即可。非常简易,该开源项目附带了大量的示例。



效果图展示
在数据还没有送达时,界面显示“正在加载数据”
数据送达后,界面显示如下:

在基于BPMX进行实现时,犯了几个错误导致无法正确的交互,此处列出。
1.指定url未写完整,在使用BPMX时,系统中设定URL时往往是不带前缀的,如下图。习惯后  导致在写ECHART相关的JS代码时,使用的url没带完整前缀,导致请求无法正确发送。

2. 后端返回的只是一个JSON格式的字符串,echart是没法直接使用的,需要转为JSON对象才可。
    采用如下方式: var option = eval('(' + result + ')');
W3C对eval的解释如下,不多说。

© 著作权归作者所有

共有 人打赏支持
西昆仑

西昆仑

粉丝 136
博文 141
码字总数 102735
作品 0
南京
高级程序员
私信 提问
加载中

评论(3)

chengxuyuan
chengxuyuan
请问,ajxa本身返回值就是json字符串了,干嘛还要转换为就送字符串
西昆仑
西昆仑

引用来自“----欢”的评论

请问,后台控制器.ht是什么?
这个只是一个后缀名,你可以理解为.do.
----欢
----欢
请问,后台控制器.ht是什么?
ECharts-Java 类库 2.2.0.3 版本发布

本项目是一个供Java开发使用的ECharts的开发包,主要目的是方便在Java中构造ECharts中可能用到的全部数据结构,如完整的结构Option。Option中的数据Series,包含Bar-柱状图,Line-折线图,P...

Liuzh_533
2015/06/03
2.7K
6
Echart 类库 option设置问题

@Liuzh_533 你好,想跟你请教个问题: "你可以使用本项目直接构造一个Option对象,转换为JSON后直接用js设置myChart.setOption(option)"关于文档里的这句话,有实际的demo吗,我做了,但是图...

ggg1
2015/01/25
3K
1
ECharts - Java 类库 1.0.0 发布

这是一个针对 ECharts 2.0 版本的Java类库,实现了所有ECharts中的Json结构对应的Java对象,并且可以很方便的创建Option 本项目是一个供Java开发使用的ECharts的开发包,主要目的是方便在Jav...

Liuzh_533
2014/09/19
6K
24
ECharts-Java 类库 2.2.6 版本发布

ECharts - Java类库 当前版本2.2.6 本项目是一个供Java开发使用的ECharts的开发包,主要目的是方便在Java中构造ECharts中可能用到的全部数据结构,如完整的结构Option。Option中的数据Serie...

Liuzh_533
2015/07/16
4.6K
13
ECharts-Java 类库 2.1.8 版本发布

本项目是一个为了便于在Java中使用ECharts的类库,不是ECharts本身,也不是官方提供的Java类库。 双11的时候ECharts更新到了2.1.8版本,更新增加了大量内容。 为了便于使用对应版本的ECchart...

Liuzh_533
2014/12/02
8.5K
11

没有更多内容

加载失败,请刷新页面

加载更多

为什么只有你每次提交代码,log里面会出现merge

http://www.cnblogs.com/Sinte-Beuve/p/9195018.html

踏破铁鞋无觅处
6分钟前
0
0
如何学习大数据:spark发布程序

一、对于spark程序只是用于默认的spark包的情况 直接点击pcakage 将程序进行在linux当中进行发布 客户端模式:测试 spark-submit --class com.keduox.App \ --master yarn \ --deploy-mode ...

架构师springboot
6分钟前
0
0
oracle job(定时任务)

创建 定时任务 job declare job number;BEGIN DBMS_JOB.SUBMIT( JOB => job, -- job任务的唯一标识(自动生成) WHAT => 'INSERT into TEXTL (id) VALUES(TEXT......

骑羊放狼灬
10分钟前
0
0
Spring声明式事务在抛出异常时不回滚(RollBack)

Spring声明式事务默认只在RuntimeException时Rollback(回滚),不当的try catch会导致事务不回滚。 spring事务默认运行时异常回滚,RuntimeException 配置时添加异常回滚 rollback-for="Th...

叶落花开
10分钟前
0
0
赋能时空云计算 阿里云数据库时空引擎Ganos上线

随着移动互联网、位置感知技术、对地观测技术的快速发展,时空信息已从传统GIS行业渗透到大众应用及各行各业。从静态POI(兴趣点)到APP位置信息,从导航电子地图到车辆行驶轨迹,从卫星影像...

阿里云云栖社区
12分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部