在JAVA web开发中实现ECHARTS和后台的交互
在JAVA web开发中实现ECHARTS和后台的交互
西昆仑 发表于3年前
在JAVA web开发中实现ECHARTS和后台的交互
  • 发表于 3年前
  • 阅读 332
  • 收藏 5
  • 点赞 3
  • 评论 3

腾讯云 新注册用户 域名抢购1元起>>>   

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

引言

本文用于说明前端组件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的解释如下,不多说。

标签: echart json java
共有 人打赏支持
西昆仑
粉丝 137
博文 134
码字总数 101966
评论 (3)
----欢
请问,后台控制器.ht是什么?
西昆仑

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

请问,后台控制器.ht是什么?
这个只是一个后缀名,你可以理解为.do.
chengxuyuan
请问,ajxa本身返回值就是json字符串了,干嘛还要转换为就送字符串
×
西昆仑
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: