文档章节

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

西昆仑
 西昆仑
发布于 2015/04/09 22:23
字数 608
阅读 431
收藏 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的解释如下,不多说。

© 著作权归作者所有

共有 人打赏支持
西昆仑

西昆仑

粉丝 137
博文 141
码字总数 102641
作品 0
南京
高级程序员
加载中

评论(3)

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

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

请问,后台控制器.ht是什么?
这个只是一个后缀名,你可以理解为.do.
----欢
----欢
请问,后台控制器.ht是什么?
【实例教程】Echarts 的 Java 封装类库

Echarts 的 Java 封装类库:[http://www.oschina.net/p/echarts-java][1] 没想到喜欢Echarts 的 Java 封装类库的人还挺多,在源码中的测试例子一般目的只是构造官网例子的结构,这里写个比较...

Liuzh_533
2014/09/22
0
30
Echarts视频教程从入门到实战

Echarts视频教程从入门到实战 网盘地址:https://pan.baidu.com/s/1p-G9UbKmXFtnuJEdiLSw2w 密码:0e9u 备用地址(腾讯微云):https://share.weiyun.com/5sKBF8E 密码:4ms8rp 有这样一款制...

放风筝好不
04/16
0
0
ECharts整合HT for Web的网络拓扑图应用

ECharts图形组件在1.0发布的时候我就已经有所关注,今天在做项目的时候遇到了图标的需求,在HT for Web上也有图形组件的功能,但是在尝试了下具体实现后,发现HT for Web的图形组件是以矢量的...

xhload3d
2015/03/16
0
0
Spring Boot 全家桶 - SpringBootBucket

Spring Boot 现在已经成为Java 开发领域的一颗璀璨明珠,它本身是包容万象的,可以跟各种技术集成。 本项目对目前Web开发中常用的各个技术,通过和SpringBoot的集成,并且对各种技术通过“一...

一刀
03/05
0
1
响应式 React Native Echarts 组件

一种在 React Native 中封装的响应式 Echarts 组件,使用与示例请参见:react-native-echarts-demo 近年来,随着移动端对数据可视化的要求越来越高,类似 MPAndroidChart 这样的传统图表库已...

entronad
07/12
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

jetbrains系产品IDEA:mac上面提示快捷键设置

原因 由于Mac上面的Ctrl+空格变成输入法切换的快捷键,在使用IDEA的过程中,代码提示很不方便,需要使用option+/这种传统eclipse上面的代码提示快捷键作为主要快捷键。 怎么修改? 移除【opt...

亚林瓜子
35分钟前
0
0
Exclipse 输出结果时换行

System.out.println(f1 + "\n" + d1 + "\n" + d2);

笑丶笑
35分钟前
1
0
怎样治疗标签不能触发onblur事件

I realize this was over a year ago, but it showed up for me in Google while trying to solve this same issue. It seems Chrome does not consider some elements, like body and ancho......

Weijuer
38分钟前
0
0
vue常见库安装

移动设备上的浏览器默认会在用户点击屏幕大约延迟300毫秒后才会触发点击事件,这是为了检查用户是否在做双击。为了能够立即响应用户的点击事件,才有了FastClick。 安装fastclick npm insta...

林夏夕
40分钟前
0
0
kafka 教程(三) kafka Java API 编程

下午写

MrPei
41分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部