ECharts-Java ECharts - Java类库

MIT
Java
跨平台
2014-09-19
Liuzh_533

这是一个针对 ECharts 2.0 版本的Java类库,实现了所有ECharts中的Json结构对应的Java对象,并且可以很方便的创建Option

本项目是一个供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数据。

关于本项目的最新状态和更新日志请看


gitosc: http://git.oschina.net/free/ECharts
github: https://github.com/abel533/ECharts


项目支持

图表类型

  • 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 - 时间线

Option说明

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

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

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

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.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)"
                }
            }
        }]
    }]};


加载中

评论(33)

yqgyuan
yqgyuan
echarts4.1的地图功能怎么用啊
草原的雄鹰
草原的雄鹰
/** * 会员绑定手机比例 * @return */ @RequestMapping(value = "/consumePie") @ResponseBody public JSONObject consumePie(){ //需要的数据 String title = "消费会员比例"; Map list = memberCountService.consum
欧阳飘
欧阳飘
EnhancedOption 找不到
IT漂客
IT漂客
直接调用toString方法即可
wallace8
wallace8
very good
xiejinjie
xiejinjie
求3.0例子。为啥后台用ECharts类库传一个function,(json格式),到前台function无法运算,多了个“”,求解
蓝水晶飞机
蓝水晶飞机
用起来难度不小,如果你很熟悉ECharts,那使用起来倒是很不错的。初学者建议直接编写Javascript。
Bob_Jackson
Bob_Jackson
原本我想着对照官网一个一个对象,一个一个属性封装,后来想着这种活应该有人干过。先试试水。用后再来追评。
雪纺啦啦啦
形成option之后,要怎么转换为json对象?求指教
漠上刀栈
漠上刀栈
非常不错,可惜没有持续更新了,老板。

ECharts-Java 类库 3.0.0 版本发布

ECharts - Java类库 当前版本3.0.0 本项目是一个供Java开发使用的ECharts的开发包,主要目的是方便在Java中构造ECharts中可能用到的全部数据结构,如完整的结构 Option。Option中的数据Serie...

2016/03/07 08:47

ECharts-Java 类库 2.2.7 版本发布

ECharts - Java类库 当前版本2.2.7 本项目是一个供Java开发使用的ECharts的开发包,主要目的是方便在Java中构造ECharts中可能用到的全部数据结构,如完整的结构 Option。Option中的数据Serie...

2016/01/15 08:44

ECharts-Java 类库 2.2.6 版本发布

ECharts - Java类库 当前版本2.2.6 本项目是一个供Java开发使用的ECharts的开发包,主要目的是方便在Java中构造ECharts中可能用到的全部数据结构,如完整的结构Option。Option中的数据Serie...

2015/07/16 15:08

ECharts-Java 类库 2.2.4 版本发布

ECharts - Java类库 当前版本2.2.4 本项目是一个供Java开发使用的ECharts的开发包,主要目的是方便在Java中构造ECharts中可能用到的全部数据结构,如完整的结构Option。Option中的数据Serie...

2015/06/30 11:18

ECharts-Java 类库 2.2.0.3 版本发布

本项目是一个供Java开发使用的ECharts的开发包,主要目的是方便在Java中构造ECharts中可能用到的全部数据结构,如完整的结构Option。Option中的数据Series,包含Bar-柱状图,Line-折线图,P...

2015/06/03 09:34

ECharts-Java 类库 2.2.0.1 版本发布

本项目是一个供Java开发使用的ECharts的开发包,主要目的是方便在Java中构造ECharts中可能用到的全部数据结构,如完整的结构Option。Option中的数据Series,包含Bar-柱状图,Line-折线图,P...

2015/03/28 09:34

ECharts-Java 类库 2.2.0 版本发布

本项目是一个供Java开发使用的ECharts的开发包,主要目的是方便在Java中构造ECharts中可能用到的全部数据结构,如完整的结构Option。Option中的数据Series,包含Bar-柱状图,Line-折线图,P...

2015/03/09 08:24

ECharts-Java 类库 2.1.8 版本发布

本项目是一个为了便于在Java中使用ECharts的类库,不是ECharts本身,也不是官方提供的Java类库。 双11的时候ECharts更新到了2.1.8版本,更新增加了大量内容。 为了便于使用对应版本的ECchart...

2014/12/02 10:43

ECharts - Java 类库 1.0.0 发布

这是一个针对 ECharts 2.0 版本的Java类库,实现了所有ECharts中的Json结构对应的Java对象,并且可以很方便的创建Option 本项目是一个供Java开发使用的ECharts的开发包,主要目的是方便在Jav...

2014/09/19 11:25

没有更多内容

加载失败,请刷新页面

没有更多内容

7
回答
echarts 导出图片,并将图片导出pdf格式

我在系统上使用echarts画了几个图形,显示在了某个jsp页面上,现在想将此jsp页面上的内容下载下来,保存到pdf文档,jsp页面上的数据还好说,拿到...

2017/07/30 17:24
2
回答
echarts地图指定定点定位问题

@Kener-林峰 我在Echarts开发时有这样一个需求,拿到一个经纬度,要在地图上定点显示,并且放大,找了 很久找不到解决办法,求解救

2014/11/03 08:58
2
回答
百度echarts 如何设置y轴的数据

例如新浪财经上股票的分时图,是以昨日收盘价划分y轴的,我现在也是这么做,求怎么划分这个y轴

2016/03/21 09:27
2
回答
EChartsjava封装库生成的页面空白

@Liuzh_533 你好,想跟你请教个问题:EChartsjava集成自己的项目,但是单元测试的时候没有报错,但是生成的页面是空白的, 没有任何的元素生...

2017/03/08 10:10
2
回答
echarts-java 可否直接调用该jar包api将生成本地报表图片。

@Liuzh_533 你好,想跟你请教个问题:echarts-java 可否直接调用该jar包api将生成本地报表图片。还有在您的博客中写道,例子使用的E...

2017/01/09 09:31
1
回答
echart热力图 我想把自己的一张导览图上做数据标注实现累死热力图的效果

能通过echart的热力图 把背景换了?前台告不明?请大神相助

2016/12/14 09:28
1
回答
Echarts如何自适应一个div的大小?

现在这样图都出到外面去了,试过了在set(option)后写window.onresize=myChart.resize; 但是没有效果

2016/12/05 16:25
2
回答
如何在ECharts雷达图的中间显示总值?
886MG 的回答 2016/12/02 19:39
最佳答案
option = { title: { text: '88', x: 'center', y: 'center', textStyle: { color: '#333', fontWeight: 'bolder', fontSize: 64, } }} option.title.text=128;
1
回答
echarts的气泡图(scatter)的横坐标是怎么取值的

@Kener-林峰 你好,请问echarts的气泡图(scatter)的横坐标是怎么取值的,我是通过散点图的性别分布上,发现横坐标的值是通过某种方法统计出...

2015/07/08 11:35

没有更多内容

加载失败,请刷新页面

ECharts.js + ECharts.java 的基本使用

在网上找了很多关于Echarts.js的使用文档,很少,正好遇到Echarts.java 两者结合起来真的很省事。

2015/05/09 16:57
935
1
【实例教程】Echarts 的 Java 封装类库

Echarts 的 Java 封装类库:[http://www.oschina.net/p/echarts-java][1] 没想到喜欢Echarts 的 Java 封装类库的人还挺多,在源码中的测试例子一般目的只是构造官网例子的结构,这里写个比较...

2014/09/22 12:04
26.1K
6
在JAVA web开发中实现ECHARTS和后台的交互

本文用于说明前端组件ECHARTS如何与系统后台进行交互,动态地从后台拉取数据并显示。

2015/04/09 22:23
458
3
116.echarts 动态 获取后台数据(定时刷新)

这个是是使用用maven +ssm 组成的 如果要运行 需要参考前面两个博客搭建 maven环境 代码 放到码云 上: 1. 效果 2. 代码 官方 demo: http://echarts.baidu.com/echarts2/doc/example.html 2...

05/27 23:24
928
0
第二期

SlimerJS —— 基于Firefox的网页自动化测试工具

2014/09/28 08:42
58
0
技术相关链接

阿里巴巴代码规范插件:https://blog.csdn.net/u010648555/article/details/78236303?locationNum=3&fps=1 RabbitMQ:http://www.rabbitmq.com/tutorials/tutorial-six-java.html。 https://...

04/11 10:20
8
0
2014年中国开源优秀项目获奖介绍

2014年开源中国开源世界已于6月27-28日于北京举行,会上发布了中国开源杰出人物和中国开源优秀项目,杰出人物资料太多木有记全,坐等媒体更新,现将开源优秀项目放上来,以飨各位

2014/06/30 14:01
98
0

没有更多内容

加载失败,请刷新页面

返回顶部
顶部