文档章节

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

西昆仑
 西昆仑
发布于 2015/04/09 22:23
字数 608
阅读 385
收藏 5
点赞 3
评论 3

引言

本文用于说明前端组件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
博文 135
码字总数 102641
作品 0
南京
高级程序员
加载中

评论(3)

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

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

请问,后台控制器.ht是什么?
这个只是一个后缀名,你可以理解为.do.
----欢
----欢
请问,后台控制器.ht是什么?
Echarts视频教程从入门到实战

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

放风筝好不 ⋅ 04/16 ⋅ 0

阿里年薪50WJAVA工程师转大数据学习路线!

大数据有两个方向,一个是偏计算机的,另一个是偏经济的。你学过Java,所以你可以偏将计算机的。 Java程序员想转大数据可行吗?Java是全世界使用人数最多的编程语言。不少程序员选择Java做为...

JAVA丶学习 ⋅ 04/25 ⋅ 0

百度Echarts图表在Vue项目的完整引入以及按需加载

导语 近日在项目中需要进行图表展示,百度的Echarts图表是非常合适的一个选择。项目是vue-cli搭建的,如何在项目中引入Echarts就是一个问题了。亲自动手实践了下,整理总结,希望对小伙伴提供...

JustBeCoder ⋅ 06/15 ⋅ 0

NEV与其他图表引擎的横向对比

本文由 网易云 发布 作者:刘阳 本篇文章仅限内部分享,如需转载,请联系网易获取授权。 NEV与其他图表引擎的横向对比 对比的其他图表库包括vega、HighCharts、 ECharts以及G2 图表类型 柱状...

wangyiyungw ⋅ 05/14 ⋅ 0

Echarts-百度地图省分着色

通过Echarts3结合百度地图,对全国省分进行着色。 起因 由于Echarts3中,不再使用china.js文件: ECharts 之前提供下载的矢量地图数据来自第三方,由于部分数据不符合国家《测绘法》规定,目...

莫显辉 ⋅ 05/04 ⋅ 0

ECharts 4.1.0.rc1 发布,基于 JS 的开源可视化库

ECharts 4.1.0.rc1 发布,带来一些性能提升和 bug 修复。 更新内容包括: 在大量数据(200K)的情况下启用烛状和条形图渲染并缩放 为树形图添加缩放和拖动交互 在折线图中,使用类别轴时增强...

雨田桑 ⋅ 04/29 ⋅ 0

ssh结合echarts做图表展示

在日常的开发中,我们常常需要使用图表对数据进行展示,在这里作者使用百度的开源图表echarts动态的展示数据。 看过echarts的API都知道,要想使用某种类型的图表展示数据,必须封装好一个JSO...

_Artisan ⋅ 06/04 ⋅ 0

vue之将echart封装为组件

最近的新项目里,有大量数据图表类的需求,为了增强代码的复用性,减少冗余,我开始思考如何将echart封装为组件调用。本文将会以雷达图为案例,一步步讲解在vue项目中如何使用echart,如何将...

四小七 ⋅ 05/21 ⋅ 0

Vue教程(五)在vue项目中使用echarts

1安装Echart cnpm install echarts --save 2项目页面引用Echart import echarts from 'echarts' 3启动项目 npm run dev...

凌雲木 ⋅ 04/20 ⋅ 0

ECharts 4.1.0.rc2 发布, 基于 JS 的开源可视化库

ECharts 4.1.0.rc2 发布,ECharts 是一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层...

雨田桑 ⋅ 05/03 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Java 后台判断是否为ajax请求

/** * 是否是Ajax请求 * @param request * @return */public static boolean isAjax(ServletRequest request){return "XMLHttpRequest".equalsIgnoreCase(((HttpServletReques......

JavaSon712 ⋅ 27分钟前 ⋅ 0

Redis 单线程 为何却需要事务处理并发问题

Redis是单线程处理,也就是命令会顺序执行。那么为什么会存在并发问题呢? 个人理解是,虽然redis是单线程,但是可以同时有多个客户端访问,每个客户端会有 一个线程。客户端访问之间存在竞争...

码代码的小司机 ⋅ 58分钟前 ⋅ 0

到底会改名吗?微软GVFS 改名之争

微软去年透露了 Git Virtual File System(GVFS)项目,GVFS 是 Git 版本控制系统的一个开源插件,允许 Git 处理 TB 规模的代码库,比如 270 GB 的 Windows 代码库。该项目公布之初就引发了争...

linux-tao ⋅ 今天 ⋅ 0

笔试题之Java基础部分【简】【二】

1.静态变量和实例变量的区别 在语法定义上的区别:静态变量前要加static关键字,而实例变量前则不加。在程序运行时的区别:实例变量属于某个对象的属性,必须创建了实例对象,其中的实例变...

anlve ⋅ 今天 ⋅ 0

Lombok简单介绍及使用

官网 通过简单注解来精简代码达到消除冗长代码的目的 优点 提高编程效率 使代码更简洁 消除冗长代码 避免修改字段名字时忘记修改方法名 4.idea中安装lombnok pom.xml引入 <dependency> <grou...

to_ln ⋅ 今天 ⋅ 0

【转】JS浮点数运算Bug的解决办法

37.5*5.5=206.08 (JS算出来是这样的一个结果,我四舍五入取两位小数) 我先怀疑是四舍五入的问题,就直接用JS算了一个结果为:206.08499999999998 怎么会这样,两个只有一位小数的数字相乘,怎...

NickSoki ⋅ 今天 ⋅ 0

table eg

user_id user_name full_name 1 zhangsan 张三 2 lisi 李四 `` ™ [========] 2018-06-18 09:42:06 星期一½ gdsgagagagdsgasgagadsgdasgagsa...

qwfys ⋅ 今天 ⋅ 0

一个有趣的Java问题

先来看看源码: public class TestDemo { public static void main(String[] args) { Integer a = 10; Integer b = 20; swap(a, b); System.out......

linxyz ⋅ 今天 ⋅ 0

十五周二次课

十五周二次课 17.1mysql主从介绍 17.2准备工作 17.3配置主 17.4配置从 17.5测试主从同步 17.1mysql主从介绍 MySQL主从介绍 MySQL主从又叫做Replication、AB复制。简单讲就是A和B两台机器做主...

河图再现 ⋅ 今天 ⋅ 0

docker安装snmp rrdtool环境

以Ubuntu16:04作为基础版本 docker pull ubuntu:16.04 启动一个容器 docker run -d -i -t --name flow_mete ubuntu:16.04 bash 进入容器 docker exec -it flow_mete bash cd ~ 安装基本软件 ......

messud4312 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部