在JAVA web开发中实现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的解释如下，不多说。

转载于:https://my.oschina.net/myspaceNUAA/blog/398306