abel533 / ECharts

来源：互联网发布：淘宝图片放大镜功能编辑：程序博客网时间：2024/06/16 09:04

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说明

Option正式代码中使用，不需要任何依赖。
GsonOption正式代码中可以使用，需要引入Gson包，使用toString()方法可以转换为JSON结构的数据（支持function，详情看下面的function说明）。
EnhancedOption测试专用，主要方便在浏览器中直接查看效果。
使用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';})()");

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

0 0