文档章节

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

西昆仑
 西昆仑
发布于 2015/04/09 22:23
字数 608
阅读 447
收藏 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
码字总数 102735
作品 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
基于Django+Bootstrap框架,可视化展示内存监控信息

构思过程:  一开始单纯的写了个内存监控的脚本,每隔5分钟收集服务器的内存信息,然后将收集到的数据写进数据库中,但后来发现就算把收集的信息写入数据库,如果需要查询某个时段的内存信息...

Java架构解析
09/20
0
0
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项目

sudo npm i -g create-react-app@1.5.2 create-react-app react-app cd react-apprm -rf package-lock.jsonrm -rf node_modules #主要是为了避免报错npm installnpm start......

lilugirl
52分钟前
1
0
在浏览器中进行深度学习:TensorFlow.js (八)生成对抗网络 (GAN)

Generative Adversarial Network 是深度学习中非常有趣的一种方法。GAN最早源自Ian Goodfellow的这篇论文。LeCun对GAN给出了极高的评价: “There are many interesting recent development...

naughty
今天
0
0
搬瓦工镜像站bwh1.net被DNS污染,国内打不开搬瓦工官网

今天下午(2018年10月17日),继搬瓦工主域名bandwagonhost.com被污染后,这个国内的镜像地址bwh1.net也被墙了。那么目前应该怎么访问搬瓦工官网呢? 消息来源:搬瓦工优惠网->搬瓦工镜像站b...

flyzy2005
今天
2
0
SpringBoot自动配置

本篇介绍下,如何通过springboot的自动配置,将公司项目内的依赖jar,不需要扫描路径,依赖jar的情况下,就能将jar内配置了@configuration注解的类,创建到IOC里面 介绍下开发环境 JDK版本1.8 spr...

贺小五
今天
3
0
命令行新建Maven多项目

参考地址 # DgroupId 可以理解为包名# DartifactId 可以理解为项目名mvn archetype:generate -DgroupId=cn.modfun -DartifactId=scaffold -DarchetypeArtifactId=maven-archetype-quickst......

阿白
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部