Apache ECharts (incubating) - Java类库

本项目已暂停维护，只接受PR并小版本更新

当前版本

本项目是一个供Java开发使用的Apache ECharts (incubating)的开发包，主要目的是方便在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修复只针对当前的大版本进行修复。

示例

ECharts-Java使用Java快速开发ECharts图表

Maven坐标

<dependency>
  <groupId>com.github.abel533</groupId>
  <artifactId>ECharts</artifactId>
  <version>最新版本</version>
</dependency>

下载地址

ECharts-x.x.x.jar

API文档

打开后，查找需要的版本，下载其中的 javadoc 文件，解压即可。

项目支持

图表类型3.x版本(2.x版本支持的图表不一样)

Line - 折线（面积）图
Lines - 线图
Bar - 柱状（条形）图
Scatter - 散点（气泡）图
EffectScatter - 涟漪效果散点图
Candlestick - K线图
Pie - 饼（圆环）图
Graph - 关系图,可以实现force
Map - 地图
Gauge - 仪表盘
Funnel - 漏斗图
Treemap - 矩形树图
Heatmap - 热力图
Boxplot - 箱形图
Parallel - 平行坐标系
Sankey - 桑基图

ECharts组件

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

更新日志

3.x版本相比2.x版本改动很大，除了部分图表不一样外，少数api也有改动，因此如果要从2.x升级3.x，一定要做好测试!

3.0.0.3 - 2018-06-24

增加图例类型 by freelyshadow pr#46

3.0.0.2 - 2016-10-18

avoidLabelOverlap参数
Position位置 center
Line 的areaStyle属性
LineStyle属性
本次更新全部内容由 mic [email protected] 提供

3.0.0.1 - 2016-03-20

完善Style和Label的属性，对应的normal和emphasis增加position,formatter,textStyle三个属性

3.0.0 - 2016-02-28

3.0版本去掉了k(改为candlestick),radar(雷达图),chord(和弦图),force(使用graph,layout=force替代),island(孤岛),eventRiver(事件河流图),venn(韦恩图),wordCloud(词云),Tree(树图)
3.0版本新增了lines(线图),effectScatter(涟漪效果散点图),candlestick(新的k线图),graph(关系图,可以实现force),boxplot(箱形图),parallel(平行坐标系),sankey(桑基图)
新增大量相关类，部分已有类增加大量属性
新版本改动非常大，如果发现问题或者不合理的方法，可以在项目中提交issues

2.2.7 - 2016-01-15

修复Gauge中AxisLine类型使用错误的bug#65
解决LineType中的broken拼写错误#58
TreeData中的value改为Double类型，仍然保留一个Integer的构造方法
TreeData添加缺少的两个属性symbol和symbolSize#69
AxisPointer增加show属性，该属性出现在scatter6的例子中
AbstractData中的List<Object> data属性和相关调用都去掉泛型类型<Object>
新增EMap，和Map（地图）类完全相同，只是为了避免和java.util.Map同时使用时不方便
新增简单工厂SeriesFactory，提供了所有Series子类的创建方法
Legend通用去掉<Object>
由于fastjson存在多种bug，从这个版本移除FsonOption相关的类
增加了一个BarTest14测试，彩虹柱状图

完整更新日志

如果你觉得这个项目对你有帮助，你可以通过捐赠来支持作者

支付宝二维码

或

微信二维码

感谢各位的支持~~

宇哲 - ￥10 - 2016-03-15

ECharts网址

https://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例子地址： https://echarts.baidu.com/doc/example/line5.html

测试代码地址：LineTest5.java

@Test
public void test() {
    //地址:https://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例子地址： https://echarts.baidu.com/doc/example/pie6.html

测试代码地址：PieTest6.java

@Test
public void test() {
    //地址：https://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("https://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": "https://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)"
                }
            }
        }]
    }]
};

Name		Name	Last commit message	Last commit date
Latest commit History 297 Commits
src		src
.gitignore		.gitignore
CHANGELOG.md		CHANGELOG.md
LICENSE		LICENSE
README.md		README.md
pom.xml		pom.xml

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Repository files navigation

Apache ECharts (incubating) - Java类库

本项目已暂停维护，只接受PR并小版本更新

示例

Maven坐标

下载地址

项目支持

图表类型3.x版本(2.x版本支持的图表不一样)

ECharts组件

更新日志

3.0.0.3 - 2018-06-24

3.0.0.2 - 2016-10-18

3.0.0.1 - 2016-03-20

3.0.0 - 2016-02-28

2.2.7 - 2016-01-15

完整更新日志

如果你觉得这个项目对你有帮助，你可以通过捐赠来支持作者

支付宝二维码

或

微信二维码

感谢各位的支持~~

ECharts网址

Option说明

function说明

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

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

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

About

Releases

Packages

Languages

License

Hansz00/ECharts

Folders and files

Latest commit

History

Repository files navigation

Apache ECharts (incubating) - Java类库

本项目已暂停维护，只接受PR并小版本更新

示例

Maven坐标

下载地址

项目支持

图表类型3.x版本(2.x版本支持的图表不一样)

ECharts组件

更新日志

3.0.0.3 - 2018-06-24

3.0.0.2 - 2016-10-18

3.0.0.1 - 2016-03-20

3.0.0 - 2016-02-28

2.2.7 - 2016-01-15

完整更新日志

如果你觉得这个项目对你有帮助，你可以通过捐赠来支持作者

支付宝二维码

或

微信二维码

感谢各位的支持~~

ECharts网址

Option说明

function说明

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

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

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

About

Resources

License

Stars

Watchers

Forks

Releases

Packages 0

Languages

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

Packages