旧版本 echarts ignore中的ignore和flag属性在新版本中被舍弃了么

点击联系发帖人 时间：2016-10-28 03:01

echarts ignore

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
您的访问请求被拒绝 403 Forbidden - ITeye技术社区
您的访问请求被拒绝
亲爱的会员，您的IP地址所在网段被ITeye拒绝服务，这可能是以下两种情况导致：
一、您所在的网段内有网络爬虫大量抓取ITeye网页，为保证其他人流畅的访问ITeye，该网段被ITeye拒绝
二、您通过某个代理服务器访问ITeye网站，该代理服务器被网络爬虫利用，大量抓取ITeye网页
请您点击按钮解除封锁&系统将自动刷新
给 Ta 留言
感谢您的开源项目！
选择付款方式
Fork 将在后台执行，是否继续？
这是一个针对ECharts3.x(2.x)版本的Java类库，实现了所有ECharts中的Json结构对应的Java对象，并且可以很方便的创建Option
master2.0.4
最后提交于
Loading...
ECharts - Java类库本项目短域名为 
当前版本3.0.0

本项目是一个供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&3.0.0&/version&
&/dependency&
下载地址


 下载后解压即可
项目支持图表类型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.2 - 

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

3.0.0.1 - 

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

3.0.0 - 

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 - 

修复Gauge中AxisLine类型使用错误的bug

解决LineType中的broken拼写错误

TreeData中的value改为Double类型，仍然保留一个Integer的构造方法
TreeData添加缺少的两个属性symbol和symbolSize

AxisPointer增加show属性，该属性出现在scatter6的例子中
AbstractData中的List&Object& data属性和相关调用都去掉泛型类型&Object&
新增EMap，和Map（地图）类完全相同，只是为了避免和java.util.Map同时使用时不方便
新增简单工厂SeriesFactory，提供了所有Series子类的创建方法
Legend通用去掉&Object&
由于fastjson存在多种bug，从这个版本移除FsonOption相关的类
增加了一个BarTest14测试，彩虹柱状图

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

或微信二维码

感谢各位的支持~~

宇哲 - ￥10 - 

ECharts网址

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例子地址：


测试代码地址：
@Test
public void test() {

//地址:/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例子地址：


测试代码地址：
@Test
public void test() {

//地址：/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("//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": "//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)"

}]

}]
};

项目点评 (24 条)
感谢分享

radar(雷达图) 啥时候能用= = 

为什么我编译不通过呢，我用的JDK1.6
jar包也加了

LineData data1 = new LineData();
data1.type(MarkType.max).name("最大值");

LineData data2 = new LineData();
data2.type(MarkType.min).name("最小值");


LineData data3 = new LineData ();
data3.type(MarkType.average).name("平均值");


Line line1 = new Line();


line1.name("最高气温")

.type(SeriesType.line)

.data("11","11","16","13","12","13","10")

.markPoint(markPoint)

.markLine(markLine);


最大值和最小值可以显示
平均值不显示
series:[{

name:"test",

type :"graph",

data :[{

"category" :0,

x: -266.82776,

y: 299.6904,

"name" :"001",

"value" :100,

"symbolSize" :15

}],

layout :"none"



求助：graph
x和y怎么设置？？？页面展示空白

你这个问题解决了么？我现在也遇到了这个问题。。。

我也碰到同样的问题，添加toolbox有一定几率卡死。。

1.MarkLine 缺少label对象属性
2.MarkLine data属性值缺少[

name: '两个坐标之间的标线',

coord: [10, 20]

},

coord: [20, 30]

]自定义两坐标点来添加标线的数组对象

同一个页面，不同图形，都添加toolbox时，会卡死，如何解决呢？

你可以在登录后,对此项目发表评论}

淘宝游戏网

旧版本 echarts ignore中的ignore和flag属性在新版本中被舍弃了么

我要回帖

更多关于 echarts ignore 的文章

更多推荐