这是一个针对ECharts2.0版本的Java类库，实现了所有ECharts中的Jso结构对应的Java对象，并且可以很方便的创建Optio
本项目是一个供Java开发使用的ECharts的开发包，主要目的是方便在Java中构造ECharts中可能用到的全部数据结构，如完整的结构Optio。Optio中的数据Series，包含Bar-柱状图，Lie-折线图，Pie-饼图，Chord-和弦图等，支持ECharts中的所有图表。支持所有的Style类，如AreaStyle,ChordStyle,ItemStyle,LieStyle,LikStyle等等。支持多种Data数据类型，一个通用的Data数据，以及PieData,MapData,ScatterData,KData等针对性的数据结构。
你可以使用本项目直接构造一个Optio对象，转换为JSON后直接用js设置myChart.setOptio(optio)，或者你也可以在前段构造基本的Optio对象，然后使用本项目来构造其中需要的任意某部分的数据，如使用Series支持的图表类型创建Series数据。
关于本项目的最新状态和更新日志请看gitosc:https://git.oschia.et/free/EChartsgithub:https://github.com/abel533/ECharts
项目支持图表类型
Lie-折线（面积）图
Bar-柱状（条形）图
Scatter-散点（气泡）图
K-K线图
Pie-饼（圆环）图
Radar-雷达（面积）图
Chord-和弦图
Force-力导向布局图
Map-地图
Gauge-仪表盘
Fuel-漏斗图
Islad-孤岛图（官方未提供，这里只有数据Islad对象）
EvetRiver-事件河流图
Ve-韦恩图
Tree-树图
Treemap-矩形树图
WordCloud-词云
Heatmap-热力图
ECharts组件Axis-坐标轴
Grid-网格
Title-标题
Tooltip-提示
Leged-图例
DataZoom-数据区域缩放
DataRage-值域漫游
Toolbox-工具箱
Timelie-时间线
Optio说明Optio正式代码中使用，不需要任何依赖。
GsoOptio正式代码中可以使用，需要引入Gso包，使用toStrig()方法可以转换为JSON结构的数据（支持fuctio，详情看下面的fuctio说明）。
EhacedOptio测试专用，主要方便在浏览器中直接查看效果。
fuctio说明由于JSON标准中不包含fuctio类型，因而大多数的JSON库都不直接支持这种类型，处理这种类型最简单的方式就是转换为JSON字符串时，对字符串进行处理。
虽然像jacksojso和fastjso通过注解或者自定义的实现序列化接口可以实现，毕竟和JSON库的结合太密切了，而且使用起来也很麻烦，不如直接处理字符串，或者在js中处理。
本项目中提供了GSON实现的GsoOptio，就是重写了toStrig()方法，改为输出JSON结构的字符串，并且支持以下两种fuctio形式:
{ formatter:fuctio(value){ retur value.substrig(0,8); }}//和{ formatter:(fuctio(){ retur 'Temperature : <br/>{b}km : {c}°C'; })()}当然这种形式在Java中书写的时候有着严格的要求：
optio.tooltip().trigger(Trigger.axis).formatter("fuctio(value){retur value.substrig(0,8);}");optio.tooltip().trigger(Trigger.axis).formatter("(fuctio(){retur 'Temperature : <br/>{b}km : {c}°C';})()");先看第一种，这里的"fuctio中，双引号和fuctio必须连着，中间不能存在空格，否则不会识别。然后是结尾的}"，这里也必须连着不能有空格，在首尾这两段代码之间不能出现}"，否则会判断出错。如果在{}中的代码有字符串，请使用单引号'，双引号出现在单引号内时使用\"即可。除此之外没有别的限制。
再看第二种，这里的"(fuctio中，双引号、括号和fuctio必须连着，中间不能存在空格，否则不会识别。然后是结尾的})()"，这里也必须连着不能有空格，在首尾这两段代码之间不能出现})()"，否则会判断出错。如果在{}中的代码有字符串，请使用单引号'，双引号出现在单引号内时使用\"即可。除此之外没有别的限制。
上述对fuctio的处理很简单，不限制在formatter使用，所有值都能这么写，你可以参考写出自己的Optio
挑两个例子大概的看看这个Java类库如何使用第一个例子，简单的折线图对应的ECharts例子地址： https://echarts.baidu.com/doc/example/lie5.html
测试代码地址：LieTest5.java
@Testpublic void test() { //地址:https://echarts.baidu.com/doc/example/lie5.html EhacedOptio optio = ew EhacedOptio(); optio.leged("高度(km)与气温(°C)变化关系"); optio.toolbox().show(true).feature(Tool.mark, Tool.dataView, ew MagicType(Magic.lie, Magic.bar), Tool.restore, Tool.saveAsImage); optio.calculable(true); optio.tooltip().trigger(Trigger.axis).formatter("Temperature : <br/>{b}km : {c}°C"); ValueAxis valueAxis = ew ValueAxis(); valueAxis.axisLabel().formatter("{value} °C"); optio.xAxis(valueAxis); CategoryAxis categoryAxis = ew CategoryAxis(); categoryAxis.axisLie().oZero(false); categoryAxis.axisLabel().formatter("{value} km"); categoryAxis.boudaryGap(false); categoryAxis.data(0, 10, 20, 30, 40, 50, 60, 70, 80); optio.yAxis(categoryAxis); Lie lie = ew Lie(); lie.smooth(true).ame("高度(km)与气温(°C)变化关系").data(15, -50, -56.5, -46.5, -22.1, -2.5, -27.7, -55.7, -76.5).itemStyle().ormal().lieStyle().shadowColor("rgba(0,0,0,0.4)"); optio.series(lie); optio.exportToHtml("lie5.html"); optio.view();}代码生成的jso结果：
{ "calculable": true, "toolbox": { "show": true, "feature": { "restore": { "show": true, "title": "还原" }, "magicType": { "show": true, "title": { "lie": "折线图切换", "stack": "堆积", "bar": "柱形图切换", "tiled": "平铺" }, "type": ["lie", "bar"] }, "dataView": { "show": true, "title": "数据视图", "readOly": false, "lag": ["Data View", "close", "refresh"] }, "mark": { "show": true, "title": { "mark": "辅助线开关", "markClear": "清空辅助线", "markUdo": "删除辅助线" }, "lieStyle": { "color": "#1e90ff", "type": "dashed", "width": 2 } }, "saveAsImage": { "show": true, "title": "保存为图片", "type": "pg", "lag": ["点击保存"] } } }, "tooltip": { "trigger": "axis", "formatter": "Temperature : \u003cbr/\u003e{b}km : {c}°C" }, "leged": { "data": ["高度(km)与气温(°C)变化关系"] }, "xAxis": [{ "type": "value", "axisLabel": { "formatter": "{value} °C" } }], "yAxis": [{ "type": "category", "boudaryGap": false, "axisLie": { "oZero": false }, "axisLabel": { "formatter": "{value} km" }, "data": [ 0, 10, 20, 30, 40, 50, 60, 70, 80 ] }], "series": [{ "smooth": true, "ame": "高度(km)与气温(°C)变化关系", "type": "lie", "itemStyle": { "ormal": { "lieStyle": { "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 ] }]}第二个例子，使用(fuctio(){})()执行JS代码对应的ECharts例子地址： https://echarts.baidu.com/doc/example/pie6.html
测试代码地址：PieTest6.java
@Testpublic void test() { //地址：https://echarts.baidu.com/doc/example/pie6.html ItemStyle dataStyle = ew ItemStyle(); dataStyle.ormal().label(ew Label().show(false)).labelLie().show(false); ItemStyle placeHolderStyle = ew ItemStyle(); placeHolderStyle.ormal().color("rgba(0,0,0,0)").label(ew Label().show(false)).labelLie().show(false); placeHolderStyle.emphasis().color("rgba(0,0,0,0)"); EhacedOptio optio = ew EhacedOptio(); optio.title().text("你幸福吗？") .subtext("From ExcelHome") .sublik("https://e.weibo.com/1341556070/AhQXtjbqh") .x(X.ceter) .y(Y.ceter) .itemGap(20) .textStyle().color("rgba(30,144,255,0.8)") .fotFamily("微软雅黑") .fotSize(35) .fotWeight("bolder"); optio.tooltip().show(true).formatter("{a} <br/>{b} : {c} ({d}%)"); optio.leged().oriet(Oriet.vertical) .x("(fuctio(){retur documet.getElemetById('mai').offsetWidth / 2;})()") .y(56) .itemGap(12) .data("68%的人表示过的不错", "29%的人表示生活压力很大", "3%的人表示“我姓曾”"); optio.toolbox().show(true).feature(Tool.mark, Tool.dataView, Tool.restore, Tool.saveAsImage); Pie p1 = ew Pie("1"); p1.clockWise(false).radius(125, 150).itemStyle(dataStyle) .data(ew Data("68%的人表示过的不错", 68), ew Data("ivisible", 32).itemStyle(placeHolderStyle)); Pie p2 = ew Pie("2"); p2.clockWise(false).radius(100, 125).itemStyle(dataStyle) .data(ew Data("29%的人表示生活压力很大", 29), ew Data("ivisible", 71).itemStyle(placeHolderStyle)); Pie p3 = ew Pie("3"); p3.clockWise(false).radius(75, 100).itemStyle(dataStyle) .data(ew Data("3%的人表示“我姓曾”", 3), ew Data("ivisible", 97).itemStyle(placeHolderStyle)); optio.series(p1, p2, p3); optio.exportToHtml("pie6.html"); optio.view();}这段代码注意
.x("(fuctio(){retur documet.getElemetById('mai').offsetWidth / 2;})()")这个地方，这里巧妙的利用(fuctio(){})()执行JS代码，实现了官方例子中的功能，生成的JSON结果如下：
{ "title": { "text": "你幸福吗？", "subtext": "From ExcelHome", "sublik": "https://e.weibo.com/1341556070/AhQXtjbqh", "textStyle": { "color": "rgba(30,144,255,0.8)", "fotSize": 35, "fotFamily": "微软雅黑", "fotWeight": "bolder" }, "x": "ceter", "y": "ceter", "itemGap": 20 }, "toolbox": { "feature": { "restore": { "show": true, "title": "还原" }, "dataView": { "show": true, "title": "数据视图", "readOly": false, "lag": ["Data View", "close", "refresh"] }, "mark": { "show": true, "title": { "mark": "辅助线开关", "markClear": "清空辅助线", "markUdo": "删除辅助线" }, "lieStyle": { "color": "#1e90ff", "type": "dashed", "width": 2 } }, "saveAsImage": { "show": true, "title": "保存为图片", "type": "pg", "lag": ["点击保存"] } }, "show": true }, "tooltip": { "show": true, "formatter": "{a} <br/>{b} : {c} ({d}%)" }, "leged": { "oriet": "vertical", "data": ["68%的人表示过的不错", "29%的人表示生活压力很大", "3%的人表示“我姓曾”"], "x": (fuctio() { retur documet.getElemetById('mai').offsetWidth / 2; })(), "y": 56, "itemGap": 12 }, "series": [{ "radius": [125, 150], "clockWise": false, "ame": "1", "type": "pie", "itemStyle": { "ormal": { "label": { "show": false }, "labelLie": { "show": false } } }, "data": [{ "ame": "68%的人表示过的不错", "value": 68 }, { "ame": "ivisible", "value": 32, "itemStyle": { "ormal": { "label": { "show": false }, "labelLie": { "show": false }, "color": "rgba(0,0,0,0)" }, "emphasis": { "color": "rgba(0,0,0,0)" } } }] }, { "radius": [100, 125], "clockWise": false, "ame": "2", "type": "pie", "itemStyle": { "ormal": { "label": { "show": false }, "labelLie": { "show": false } } }, "data": [{ "ame": "29%的人表示生活压力很大", "value": 29 }, { "ame": "ivisible", "value": 71, "itemStyle": { "ormal": { "label": { "show": false }, "labelLie": { "show": false }, "color": "rgba(0,0,0,0)" }, "emphasis": { "color": "rgba(0,0,0,0)" } } }] }, { "radius": [75, 100], "clockWise": false, "ame": "3", "type": "pie", "itemStyle": { "ormal": { "label": { "show": false }, "labelLie": { "show": false } } }, "data": [{ "ame": "3%的人表示“我姓曾”", "value": 3 }, { "ame": "ivisible", "value": 97, "itemStyle": { "ormal": { "label": { "show": false }, "labelLie": { "show": false }, "color": "rgba(0,0,0,0)" }, "emphasis": { "color": "rgba(0,0,0,0)" } } }] }]};
评论