This action will force synchronization from abel533/ECharts, which will overwrite any changes that you have made since you forked the repository, and can not be recovered!!!
Synchronous operation will process in the background and will refresh the page when finishing processing. Please be patient.
本项目是一个供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修复只针对当前的大版本进行修复。
ECharts-Java使用Java快速开发ECharts图表
<dependency>
<groupId>com.github.abel533</groupId>
<artifactId>ECharts</artifactId>
<version>最新版本</version>
</dependency>
打开后,查找需要的版本,下载其中的 javadoc 文件,解压即可。
3.x版本相比2.x版本改动很大,除了部分图表不一样外,少数api也有改动,因此如果要从2.x升级3.x,一定要做好测试!
avoidLabelOverlap
参数Position
位置 center
Line
的areaStyle
属性LineStyle
属性Style
和Label
的属性,对应的normal
和emphasis
增加position,formatter,textStyle
三个属性Gauge
中AxisLine
类型使用错误的bug#65LineType
中的broken
拼写错误#58TreeData
中的value
改为Double
类型,仍然保留一个Integer
的构造方法TreeData
添加缺少的两个属性symbol
和symbolSize
#69AxisPointer
增加show
属性,该属性出现在scatter6的例子中AbstractData
中的List<Object> data
属性和相关调用都去掉泛型类型<Object>
EMap
,和Map
(地图)类完全相同,只是为了避免和java.util.Map
同时使用时不方便SeriesFactory
,提供了所有Series
子类的创建方法Legend
通用去掉<Object>
FsonOption
相关的类BarTest14
测试,彩虹柱状图Option
正式代码中使用,不需要任何依赖。
GsonOption
正式代码中可以使用,需要引入Gson
包,使用toString()
方法可以转换为JSON结构的数据(支持function
,详情看下面的function说明)。
EnhancedOption
测试专用,主要方便在浏览器中直接查看效果。
使用GsonOption
,FsonOption
的toString()
方法返回给前端时,前端需要使用eval('('+optionJsonStr+')')
转换为JSON结构
由于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
对应的ECharts例子地址: http://echarts.baidu.com/doc/example/line5.html
测试代码地址:LineTest5.java
@Test
public 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
@Test
public 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)"
}
}
}]
}]
};
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。