ECharts - Java类库

当前版本2.2.6

本项目是一个供Java开发使用的ECharts的开发包，主要目的是方便在Java中构造ECharts中可能用到的全部数据结构，如完整的结构Option。Option中的数据Series，包含Bar-柱状图，Line-折线图，Pie-饼图，Chord-和弦图等，支持ECharts中的所有图表。支持所有的Style类，如AreaStyle,ChordStyle,ItemStyle,LineStyle,LinkStyle等等。支持多种Data数据类型，一个通用的Data数据，以及PieData,MapData,ScatterData,KData等针对性的数据结构。

你可以使用本项目直接构造一个Option对象，转换为JSON后直接用js设置myChart.setOption(option)，或者你也可以在前端构造基本的Option对象，然后使用本项目来构造其中需要的任意某部分的数据，如使用Series支持的图表类型创建Series数据。

为了便于使用对应版本的ECcharts，本项目的版本号会使用和ECharts相同的版本号。

由于本项目反馈的bug并不多，为了方便每一个开发人员，每次修复bug都会发布一个小版本，并且bug修复只针对当前的大版本进行修复。

Maven坐标

<dependency><groupId>com.github.abel533</groupId><artifactId>ECharts</artifactId><version>2.2.6</version></dependency>

下载地址

ECharts-x.x.x.jar

API文档-2.2.6 下载后解压即可

项目支持

图表类型

  • Line - 折线（面积）图
  • Bar - 柱状（条形）图
  • Scatter - 散点（气泡）图
  • K - K线图
  • Pie - 饼（圆环）图
  • Radar - 雷达（面积）图
  • Chord - 和弦图
  • Force - 力导向布局图
  • Map - 地图
  • Gauge - 仪表盘
  • Funnel - 漏斗图
  • Island - 孤岛图（官方未提供，这里只有数据Island对象）
  • EventRiver - 事件河流图
  • Venn - 韦恩图
  • Tree - 树图
  • Treemap - 矩形树图
  • WordCloud - 词云
  • Heatmap - 热力图

ECharts组件

  • Axis - 坐标轴
  • Grid - 网格
  • Title - 标题
  • Tooltip - 提示
  • Legend - 图例
  • DataZoom - 数据区域缩放
  • DataRange - 值域漫游
  • Toolbox - 工具箱
  • Timeline - 时间线

更新日志

2.2.6

  • 由于echarts.js-2.2.5版本只是修复bug，对本项目没有影响,可以直接用echarts-java-2.2.4，所以跳过2.2.5版本
  • echarts.js-2.2.6新增Option 查找工具，本项目已经完全和这个工具对照过，已经补充部分缺少的属性
  • 新增热力图heatmap，对应测试代码HeatmapTest(如果看不到效果，那就是因为测试中的引用的echarts-all.js还不是2.2.6版本，自己替换就行)

2.2.4

  • TreeMap增加root
  • 官方该版本主要解决一些bug
  • 由于2.2.1,2.2.2,2.2.3版本添加比较匆忙，所以没有进行过测试，但是在2.2.4版本进行了全面的测试，对新增的图表和一些属性进行了测试，所以如果使用2.2.0以后的版本，请直接使用2.2.4版本
  • 测试过程中发现一些官方没有提到的属性，都已经添加到2.2.4版本
  • 新增的4个图表在src/test下面有相应的测试
  • 由于2.2.0~2.2.4间隔周期长，可能存在一些还没发现的bug，主要是少属性或者属性类型的问题，如果大家发现问题，欢迎及时反馈

2.2.3

  • 新增词云WordCloud
  • 新增树图Tree
  • DataRange增加splitList
  • 重要：由于WordCloud和Tree在2.2.4中才添加的测试，因此修复了一些bug，如果需要这两个新功能，请使用2.2.4版本

2.2.2

  • 新增韦恩图Venn
  • 新增Treemap
  • 新增对数轴LogAxis
  • 重要：由于Venn和Treemap在2.2.4中才添加的测试，因此修复了一些bug，如果需要这两个新功能，请使用2.2.4版本

2.2.1

  • Gauge去掉precision
  • MarkLine支持边捆绑Boundling
  • Tooltip增加enterable配置项
  • echarts.js-2.2.1大部分为修改bug

2.2.0.4

  • 修改SplitArea继承sunw.io.Serializable的bug，改为java.io.Serializable
  • Axis增加和log类型有关的两个参数(2.2.2版本有效)

2.2.0.3

  • 更新serialVersionUID生成方式(不是默认的1L) - galaxist
  • Option中添加RoamController - galaxist
  • 添加fastjson转换，可以使用FsonOption - galaxist
  • 测试代码添加fastjson对应的FsonOption测试 - galaxist
  • Toolbox的feature改为有序的LinkedHashMap#21
  • Bar和K的barWidth和barMaxWidth属性#32
  • Legend增加selected属性，可以配置默认选中状态#34
  • 感谢galaxist提交的合并请求，欢迎各位参与

2.2.0.2

  • 修复5个类中部分属性缺少getter和setter的bug

2.2.0.1

  • 增加Serializable序列化

2.2.0

  • Effect增加Type枚举类型，增加属性type和bounceDistance
  • MarkLine增加属性smoothness和precision
  • MarkLine增加Bundling（边捆绑）类型和bundling属性
  • Data数据增加smoothRadian属性，可以用在MarkLine的data中
  • 由于K和Map都有hoverable属性，因此将该属性提升到父类中

2.1.9

  • Node节点增加label属性#963
  • Chord图表加入categories,nodes,links三项属性
  • Tooltip加入enterable属性:tooltip mouse enterable 优化

2.1.8.4

  • 解决MarkLine缺少smooth属性的问题，这是2.1.8的最后一个版本。

2.1.8.3

  • DataZoom类中zoomLook属性名字错误，修改为zoomLock

2.1.8.2

  • 解决一个反序列时Axis类型为time时的 bug#12

  • 反序列化不是本项目的重点，估计用的人也不多，但是GsonUtil确实支持，但是不会继续强化。

2.1.8.1

  • 该版本在2.1.8基础上解决该问题：http://www.oschina.net/question/2303268_219485

  • GsonOption解决序列化多余空白的问题

  • GsonOption增加view和exportToHtml方法，和测试类中的EnhancedOption功能完全一样

文档地址

http://git.oschina.net/free/ECharts/wikis/Home

目前文档并不全面，但是我本人并不知道大家需要什么样的文档，所以暂时就这样了，如果有建议可以在这里提建议

http://git.oschina.net/free/ECharts/issues

ECharts网址

http://echarts.baidu.com/

Option说明

  1. Option正式代码中使用，不需要任何依赖。

  2. GsonOption正式代码中可以使用，需要引入Gson包，使用toString()方法可以转换为JSON结构的数据（支持function，详情看下面的function说明）。

  3. EnhancedOption测试专用，主要方便在浏览器中直接查看效果。

  4. 使用GsonOption,FsonOption的toString()方法返回给前端时，前端需要使用eval('('+optionJsonStr+')')转换为JSON结构

function说明

由于JSON标准中不包含function类型，因而大多数的JSON库都不直接支持这种类型，处理这种类型最简单的方式就是转换为JSON字符串时，对字符串进行处理。

虽然像jackson json和fastjson通过注解或者自定义的实现序列化接口可以实现，毕竟和JSON库的结合太密切了，而且使用起来也很麻烦，不如直接处理字符串，或者在js中处理。

本项目中提供了GSON实现的GsonOption，就是重写了toString()方法，改为输出JSON结构的字符串，并且支持以下两种function形式:

{formatter:function(value){return value.substring(0,8);}}//和{formatter:(function(){return 'Temperature : <br/>{b}km : {c}°C';})()}

当然这种形式在Java中书写的时候有着严格的要求：

option.tooltip().trigger(Trigger.axis).formatter("function(value){return value.substring(0,8);}");option.tooltip().trigger(Trigger.axis).formatter("(function(){return 'Temperature : <br/>{b}km : {c}°C';})()");

  1. 先看第一种，这里的"function中，双引号和function必须连着，中间不能存在空格，否则不会识别。然后是结尾的}"，这里也必须连着不能有空格，在首尾这两段代码之间不能出现}"，否则会判断出错。如果在{}中的代码有字符串，请使用单引号'，双引号出现在单引号内时使用\\"即可。除此之外没有别的限制。

  2. 再看第二种，这里的"(function中，双引号、括号和function必须连着，中间不能存在空格，否则不会识别。然后是结尾的})()"，这里也必须连着不能有空格，在首尾这两段代码之间不能出现})()"，否则会判断出错。如果在{}中的代码有字符串，请使用单引号'，双引号出现在单引号内时使用\\"即可。除此之外没有别的限制。

上述对function的处理很简单，不限制在formatter使用，所有值都能这么写，你可以参考写出自己的Option

挑两个例子大概的看看这个Java类库如何使用

第一个例子，简单的折线图

对应的ECharts例子地址： http://echarts.baidu.com/doc/example/line5.html

测试代码地址：LineTest5.java

@Testpublic void test() {//地址:http://echarts.baidu.com/doc/example/line5.htmlEnhancedOption option = new EnhancedOption();option.legend("高度(km)与气温(°C)变化关系");option.toolbox().show(true).feature(Tool.mark, Tool.dataView, new MagicType(Magic.line, Magic.bar), Tool.restore, Tool.saveAsImage);option.calculable(true);option.tooltip().trigger(Trigger.axis).formatter("Temperature : <br/>{b}km : {c}°C");ValueAxis valueAxis = new ValueAxis();valueAxis.axisLabel().formatter("{value} °C");option.xAxis(valueAxis);CategoryAxis categoryAxis = new CategoryAxis();categoryAxis.axisLine().onZero(false);categoryAxis.axisLabel().formatter("{value} km");categoryAxis.boundaryGap(false);categoryAxis.data(0, 10, 20, 30, 40, 50, 60, 70, 80);option.yAxis(categoryAxis);Line line = new Line();line.smooth(true).name("高度(km)与气温(°C)变化关系").data(15, -50, -56.5, -46.5, -22.1, -2.5, -27.7, -55.7, -76.5).itemStyle().normal().lineStyle().shadowColor("rgba(0,0,0,0.4)");option.series(line);option.exportToHtml("line5.html");option.view();}

代码生成的json结果：

{"calculable": true,"toolbox": {"show": true,"feature": {"restore": {"show": true,"title": "还原"},"magicType": {"show": true,"title": {"line": "折线图切换","stack": "堆积","bar": "柱形图切换","tiled": "平铺"},"type": ["line", "bar"]},"dataView": {"show": true,"title": "数据视图","readOnly": false,"lang": ["Data View", "close", "refresh"]},"mark": {"show": true,"title": {"mark": "辅助线开关","markClear": "清空辅助线","markUndo": "删除辅助线"},"lineStyle": {"color": "#1e90ff","type": "dashed","width": 2}},"saveAsImage": {"show": true,"title": "保存为图片","type": "png","lang": ["点击保存"]}}},"tooltip": {"trigger": "axis","formatter": "Temperature : \u003cbr/\u003e{b}km : {c}°C"},"legend": {"data": ["高度(km)与气温(°C)变化关系"]},"xAxis": [{"type": "value","axisLabel": {"formatter": "{value} °C"}}],"yAxis": [{"type": "category","boundaryGap": false,"axisLine": {"onZero": false},"axisLabel": {"formatter": "{value} km"},"data": [0, 10, 20, 30, 40, 50, 60, 70, 80]}],"series": [{"smooth": true,"name": "高度(km)与气温(°C)变化关系","type": "line","itemStyle": {"normal": {"lineStyle": {"shadowColor": "rgba(0,0,0,0.4)"}},"emphasis": {}},"data": [15, -50, -56.5, -46.5, -22.1, -2.5, -27.7, -55.7, -76.5]}]}

第二个例子，使用(function(){})()执行JS代码

对应的ECharts例子地址： http://echarts.baidu.com/doc/example/pie6.html

测试代码地址：PieTest6.java

@Testpublic void test() {//地址：http://echarts.baidu.com/doc/example/pie6.htmlItemStyle dataStyle = new ItemStyle();dataStyle.normal().label(new Label().show(false)).labelLine().show(false);ItemStyle placeHolderStyle = new ItemStyle();placeHolderStyle.normal().color("rgba(0,0,0,0)").label(new Label().show(false)).labelLine().show(false);placeHolderStyle.emphasis().color("rgba(0,0,0,0)");EnhancedOption option = new EnhancedOption();option.title().text("你幸福吗？").subtext("From ExcelHome").sublink("http://e.weibo.com/1341556070/AhQXtjbqh").x(X.center).y(Y.center).itemGap(20).textStyle().color("rgba(30,144,255,0.8)").fontFamily("微软雅黑").fontSize(35).fontWeight("bolder");option.tooltip().show(true).formatter("{a} <br/>{b} : {c} ({d}%)");option.legend().orient(Orient.vertical).x("(function(){return document.getElementById('main').offsetWidth / 2;})()").y(56).itemGap(12).data("68%的人表示过的不错", "29%的人表示生活压力很大", "3%的人表示“我姓曾”");option.toolbox().show(true).feature(Tool.mark, Tool.dataView, Tool.restore, Tool.saveAsImage);Pie p1 = new Pie("1");p1.clockWise(false).radius(125, 150).itemStyle(dataStyle).data(new Data("68%的人表示过的不错", 68), new Data("invisible", 32).itemStyle(placeHolderStyle));Pie p2 = new Pie("2");p2.clockWise(false).radius(100, 125).itemStyle(dataStyle).data(new Data("29%的人表示生活压力很大", 29), new Data("invisible", 71).itemStyle(placeHolderStyle));Pie p3 = new Pie("3");p3.clockWise(false).radius(75, 100).itemStyle(dataStyle).data(new Data("3%的人表示“我姓曾”", 3), new Data("invisible", 97).itemStyle(placeHolderStyle));option.series(p1, p2, p3);option.exportToHtml("pie6.html");option.view();}

这段代码注意

.x("(function(){return document.getElementById('main').offsetWidth / 2;})()")

这个地方，这里巧妙的利用(function(){})()执行JS代码，实现了官方例子中的功能，生成的JSON结果如下：

{"title": {"text": "你幸福吗？","subtext": "From ExcelHome","sublink": "http://e.weibo.com/1341556070/AhQXtjbqh","textStyle": {"color": "rgba(30,144,255,0.8)","fontSize": 35,"fontFamily": "微软雅黑","fontWeight": "bolder"},"x": "center","y": "center","itemGap": 20},"toolbox": {"feature": {"restore": {"show": true,"title": "还原"},"dataView": {"show": true,"title": "数据视图","readOnly": false,"lang": ["Data View", "close", "refresh"]},"mark": {"show": true,"title": {"mark": "辅助线开关","markClear": "清空辅助线","markUndo": "删除辅助线"},"lineStyle": {"color": "#1e90ff","type": "dashed","width": 2}},"saveAsImage": {"show": true,"title": "保存为图片","type": "png","lang": ["点击保存"]}},"show": true},"tooltip": {"show": true,"formatter": "{a} <br/>{b} : {c} ({d}%)"},"legend": {"orient": "vertical","data": ["68%的人表示过的不错", "29%的人表示生活压力很大", "3%的人表示“我姓曾”"],"x": (function() {return document.getElementById('main').offsetWidth / 2;})(),"y": 56,"itemGap": 12},"series": [{"radius": [125, 150],"clockWise": false,"name": "1","type": "pie","itemStyle": {"normal": {"label": {"show": false},"labelLine": {"show": false}}},"data": [{"name": "68%的人表示过的不错","value": 68}, {"name": "invisible","value": 32,"itemStyle": {"normal": {"label": {"show": false},"labelLine": {"show": false},"color": "rgba(0,0,0,0)"},"emphasis": {"color": "rgba(0,0,0,0)"}}}]}, {"radius": [100, 125],"clockWise": false,"name": "2","type": "pie","itemStyle": {"normal": {"label": {"show": false},"labelLine": {"show": false}}},"data": [{"name": "29%的人表示生活压力很大","value": 29}, {"name": "invisible","value": 71,"itemStyle": {"normal": {"label": {"show": false},"labelLine": {"show": false},"color": "rgba(0,0,0,0)"},"emphasis": {"color": "rgba(0,0,0,0)"}}}]}, {"radius": [75, 100],"clockWise": false,"name": "3","type": "pie","itemStyle": {"normal": {"label": {"show": false},"labelLine": {"show": false}}},"data": [{"name": "3%的人表示“我姓曾”","value": 3}, {"name": "invisible","value": 97,"itemStyle": {"normal": {"label": {"show": false},"labelLine": {"show": false},"color": "rgba(0,0,0,0)"},"emphasis": {"color": "rgba(0,0,0,0)"}}}]}]};

abel533 / ECharts相关推荐

  1. Echarts后台option对象

    最近在工作中使用到了Echarts来制作图表,在网上搜了好多例子几乎都是千篇一律的在前台写死一些js,然后把变量通过ajax或者遍历集合的方式插进去,这样子一旦某一页面的图表一多,就会异常混乱,偶然在 ...

  2. 学习echarts需要先学习java 吗_Echarts和Echarts-java类库简单使用方法

    1.Eharts简介 ECharts,一个纯Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safa ...

  3. java后台生成echarts图表

    java后台生成echarts图表 最近博主在做一个项目,需要后台出图和前端echarts一样的图,比如折线图和柱状图. 经过一番整理,顺利实现了该功能,特此分享,需要白嫖的,拿走不谢. 直接上效果图 ...

  4. Echart Java类库实现轻爽炫丽的Android Echarts图表

    简要说明: 本人最近在学习Android的网络一节时,看到和JavaScript有关的知识时,就很想趁热打铁实现Echarts炫彩图表的Android本地展示,便在此处予以分享,有不足与错误之处请各位 ...

  5. Android Echarts单折线图和多折线图的使用

    提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 Android 内Echarts的使用 一.单折线图形式 1.代码示例: 二.多折线图形式 1.代码示例 总结 提示:以下是本篇文章正 ...

  6. java图书分析echarts_Echarts后台Java解析

    Echarts 后台 Java 解析 一.引入 Echarts 的封装类 1 .基于 maven 架构的 com.github.abel533 ECharts 2.2.7 com.google.cod ...

  7. Android专题-常用第三方框架

    Android专题-常用第三方框架 HTTP网络请求 带*号的是个人推荐比较好用的 HTTP网络请求 okhttp * :https://github.com/square/okhttp retrof ...

  8. Java项目：SSH学生请假管理系统

    作者主页:夜未央5788 简介:Java领域优质创作者.Java项目.学习资料.技术互助 文末获取源码 项目介绍 本项目分为管理员.教师.学生三种角色: 教师角色包含以下功能: 教师角色登录,请假查看 ...

  9. SSM框架介绍与搭建

    1.ssm简介 ssm实际上是三种框架的集成,它们分别是Spring,SpringMVC以及mybatis.笔者的个人见解更愿意认为ssm是一个优秀的平台,在这个平台上开发者可以更有效率的实现CRUD ...

最新文章

  1. 为什么说机器学习是预防欺诈的最佳工具？
  2. android分享到指定应用,Android调用系统分享，指定某些应用来分享
  3. SpringBoot高级-检索-Elasticsearch简介安装
  4. sql order by,desc和limit使用(mysql)
  5. 【LightOJ - 1027】A Dangerous Maze（概率dp，数学期望）
  6. 程序猿的崛起，一篇文章看懂编程语言
  7. 用memcached-session-manager实现Tomcat集群
  8. 先进数据系统实验室（Advanced Data Systems Laboratory, ADSL）
  9. 【报告分享】2020年中国金融科技企业领袖观点洞察报告.pdf（附下载链接）
  10. tail怎么写中文_为什么不能用中文进行编程，而英文却可以？程序员的分析很透彻...
  11. js字符串转换为json对象JSON.parse()及将json对象转为json字符串JSON.stringify()
  12. VGA接口(四)字符
  13. 【语音识别】基于matlab GUI DTW MFCC 0-9数字语音识别（带面板）【含Matlab源码 385期】
  14. 企业服务器型号对照表,云手机服务器规格列表
  15. ar5b97无线网卡驱动linux 版下载,atheros ar5b97驱动
  16. 思科交换机接口配置trunk_cisco交换机vlan-trunk的配置详解及应用实例
  17. 再观《一步之遥》观后感
  18. 在Excel中查找/替换时使用换行符
  19. NLP基础入门：Word2Vec模型
  20. 三天全力冲上中科大先研院

热门文章

  1. Til the Cows Come Home
  2. 聊一下面试经常问的SQL注入
  3. 【转载】BLE安全机制从入门到放弃
  4. 从塞上明珠到科创新城 榆林数字经济的“速度与激情”
  5. ubuntu配置工作环境
  6. Paper之EfficientDet: 《Scalable and Efficient Object Detection—可扩展和高效的目标检测》的翻译及其解读
  7. 表示自己从头开始的句子_一切从头开始唯美句子，致自己重新开始的句子
  8. tushare的使用
  9. C语言讲义——链表的实现
  10. 南京理工大学c语言课程设计,南京理工大学C语言讲义第7章.ppt