Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
x649585723
incubator-echarts
提交
79d850fa
I
incubator-echarts
项目概览
x649585723
/
incubator-echarts
与 Fork 源项目一致
从无法访问的项目Fork
通知
1
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
I
incubator-echarts
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
79d850fa
编写于
1月 04, 2016
作者:
L
lang
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
Improve funnel
上级
b96e6a3e
变更
2
隐藏空白更改
内联
并排
Showing
2 changed file
with
245 addition
and
216 deletion
+245
-216
src/chart/funnel/FunnelView.js
src/chart/funnel/FunnelView.js
+174
-157
src/chart/pie/PieView.js
src/chart/pie/PieView.js
+71
-59
未找到文件。
src/chart/funnel/FunnelView.js
浏览文件 @
79d850fa
...
...
@@ -3,33 +3,174 @@ define(function (require) {
var
graphic
=
require
(
'
../../util/graphic
'
);
var
zrUtil
=
require
(
'
zrender/core/util
'
);
function
createLabel
(
labelLayout
)
{
return
new
graphic
.
Text
({
style
:
{
x
:
labelLayout
.
x
,
y
:
labelLayout
.
y
,
textAlign
:
labelLayout
.
textAlign
,
textBaseline
:
labelLayout
.
textBaseline
},
z2
:
10
,
silent
:
true
});
/**
* Piece of pie including Sector, Label, LabelLine
* @constructor
* @extends {module:zrender/graphic/Group}
*/
function
FunnelPiece
(
data
,
idx
)
{
graphic
.
Group
.
call
(
this
);
var
polygon
=
new
graphic
.
Polygon
();
var
labelLine
=
new
graphic
.
Polyline
();
var
text
=
new
graphic
.
Text
();
this
.
add
(
polygon
);
this
.
add
(
labelLine
);
this
.
add
(
text
);
this
.
updateData
(
data
,
idx
,
true
);
// Hover to change label and labelLine
function
onEmphasis
()
{
labelLine
.
ignore
=
labelLine
.
hoverIgnore
;
text
.
ignore
=
text
.
hoverIgnore
;
}
function
onNormal
()
{
labelLine
.
ignore
=
labelLine
.
normalIgnore
;
text
.
ignore
=
text
.
normalIgnore
;
}
this
.
on
(
'
emphasis
'
,
onEmphasis
)
.
on
(
'
normal
'
,
onNormal
)
.
on
(
'
mouseover
'
,
onEmphasis
)
.
on
(
'
mouseout
'
,
onNormal
);
}
var
funnelPieceProto
=
FunnelPiece
.
prototype
;
function
getLabelStyle
(
data
,
idx
,
state
,
labelModel
)
{
var
textStyleModel
=
labelModel
.
getModel
(
'
textStyle
'
);
var
position
=
labelModel
.
get
(
'
position
'
);
var
isLabelInside
=
position
===
'
inside
'
||
position
===
'
inner
'
;
return
{
fill
:
textStyleModel
.
getTextColor
()
||
(
isLabelInside
?
'
#fff
'
:
data
.
getItemVisual
(
idx
,
'
color
'
)),
textFont
:
textStyleModel
.
getFont
(),
text
:
data
.
hostModel
.
getFormattedLabel
(
idx
,
state
)
||
data
.
getName
(
idx
)
};
}
function
fadeOut
(
el
,
group
,
enableAnimation
)
{
if
(
enableAnimation
)
{
el
.
animateTo
({
var
opacityAccessPath
=
[
'
itemStyle
'
,
'
normal
'
,
'
opacity
'
];
funnelPieceProto
.
updateData
=
function
(
data
,
idx
,
firstCreate
)
{
var
polygon
=
this
.
childAt
(
0
);
var
seriesModel
=
data
.
hostModel
;
var
itemModel
=
data
.
getItemModel
(
idx
);
var
layout
=
data
.
getItemLayout
(
idx
);
var
opacity
=
data
.
getItemModel
(
idx
).
get
(
opacityAccessPath
);
opacity
=
opacity
==
null
?
1
:
opacity
;
if
(
firstCreate
)
{
polygon
.
setShape
({
points
:
layout
.
points
});
polygon
.
setStyle
({
opacity
:
0
});
graphic
.
updateProps
(
polygon
,
{
style
:
{
opacity
:
0
opacity
:
opacity
}
},
300
,
function
()
{
group
.
remove
(
el
);
});
},
seriesModel
);
}
else
{
group
.
remove
(
el
);
graphic
.
initProps
(
polygon
,
{
shape
:
{
points
:
layout
.
points
}
},
seriesModel
);
}
}
// Update common style
var
itemStyleModel
=
itemModel
.
getModel
(
'
itemStyle
'
);
var
visualColor
=
data
.
getItemVisual
(
idx
,
'
color
'
);
polygon
.
setStyle
(
zrUtil
.
extend
(
{
fill
:
visualColor
},
itemStyleModel
.
getModel
(
'
normal
'
).
getItemStyle
()
)
);
graphic
.
setHoverStyle
(
polygon
,
itemStyleModel
.
getModel
(
'
emphasis
'
).
getItemStyle
()
);
polygon
.
setStyle
(
zrUtil
.
extend
(
{
fill
:
visualColor
},
itemStyleModel
.
getModel
(
'
normal
'
).
getItemStyle
()
)
);
polygon
.
hoverStyle
=
itemStyleModel
.
getModel
(
'
emphasis
'
).
getItemStyle
();
this
.
_updateLabel
(
data
,
idx
);
graphic
.
setHoverStyle
(
this
);
};
funnelPieceProto
.
_updateLabel
=
function
(
data
,
idx
)
{
var
labelLine
=
this
.
childAt
(
1
);
var
labelText
=
this
.
childAt
(
2
);
var
seriesModel
=
data
.
hostModel
;
var
itemModel
=
data
.
getItemModel
(
idx
);
var
layout
=
data
.
getItemLayout
(
idx
);
var
labelLayout
=
layout
.
label
;
var
visualColor
=
data
.
getItemVisual
(
idx
,
'
color
'
);
graphic
.
updateProps
(
labelLine
,
{
shape
:
{
points
:
labelLayout
.
linePoints
||
labelLayout
.
linePoints
}
},
seriesModel
);
graphic
.
updateProps
(
labelText
,
{
style
:
{
x
:
labelLayout
.
x
,
y
:
labelLayout
.
y
}
},
seriesModel
);
labelText
.
attr
({
style
:
{
textAlign
:
labelLayout
.
textAlign
,
textBaseline
:
labelLayout
.
textBaseline
,
textFont
:
labelLayout
.
font
},
rotation
:
labelLayout
.
rotation
,
origin
:
[
labelLayout
.
x
,
labelLayout
.
y
],
z2
:
10
});
var
labelModel
=
itemModel
.
getModel
(
'
label.normal
'
);
var
labelHoverModel
=
itemModel
.
getModel
(
'
label.emphasis
'
);
var
labelLineModel
=
itemModel
.
getModel
(
'
labelLine.normal
'
);
var
labelLineHoverModel
=
itemModel
.
getModel
(
'
labelLine.emphasis
'
);
labelText
.
setStyle
(
getLabelStyle
(
data
,
idx
,
'
normal
'
,
labelModel
));
labelText
.
ignore
=
labelText
.
normalIgnore
=
!
labelModel
.
get
(
'
show
'
);
labelText
.
hoverIgnore
=
!
labelHoverModel
.
get
(
'
show
'
);
labelLine
.
ignore
=
labelLine
.
normalIgnore
=
!
labelLineModel
.
get
(
'
show
'
);
labelLine
.
hoverIgnore
=
!
labelLineHoverModel
.
get
(
'
show
'
);
// Default use item visual color
labelLine
.
setStyle
({
stroke
:
visualColor
});
labelLine
.
setStyle
(
labelLineModel
.
getModel
(
'
lineStyle
'
).
getLineStyle
());
labelText
.
hoverStyle
=
getLabelStyle
(
data
,
idx
,
'
emphasis
'
,
labelHoverModel
);
labelLine
.
hoverStyle
=
labelLineHoverModel
.
getModel
(
'
lineStyle
'
).
getLineStyle
();
};
zrUtil
.
inherits
(
FunnelPiece
,
graphic
.
Group
);
var
Funnel
=
require
(
'
../../view/Chart
'
).
extend
({
...
...
@@ -41,158 +182,34 @@ define(function (require) {
var
group
=
this
.
group
;
var
enableAnimation
=
ecModel
.
get
(
'
animation
'
);
var
opacityAccessPath
=
[
'
itemStyle
'
,
'
normal
'
,
'
opacity
'
];
data
.
diff
(
oldData
)
.
add
(
function
(
idx
)
{
var
layout
=
data
.
getItemLayout
(
idx
);
var
labelLayout
=
layout
.
label
;
var
poly
=
new
graphic
.
Polygon
({
shape
:
{
points
:
layout
.
points
}
});
var
opacity
=
data
.
getItemModel
(
idx
).
get
(
opacityAccessPath
);
opacity
=
opacity
==
null
?
1
:
opacity
;
if
(
enableAnimation
)
{
poly
.
setStyle
({
opacity
:
0
});
poly
.
animateTo
({
style
:
{
opacity
:
opacity
}
},
300
,
'
cubicIn
'
);
}
else
{
poly
.
setStyle
({
opacity
:
opacity
});
}
var
labelText
=
createLabel
(
labelLayout
);
var
labelLine
=
new
graphic
.
Polyline
({
shape
:
{
points
:
labelLayout
.
linePoints
},
silent
:
true
});
poly
.
__labelLine
=
labelLine
;
poly
.
__labelText
=
labelText
;
group
.
add
(
poly
);
group
.
add
(
labelText
);
group
.
add
(
labelLine
);
data
.
setItemGraphicEl
(
idx
,
poly
);
var
funnelPiece
=
new
FunnelPiece
(
data
,
idx
);
data
.
setItemGraphicEl
(
idx
,
funnelPiece
);
group
.
add
(
funnelPiece
);
})
.
update
(
function
(
newIdx
,
oldIdx
)
{
var
poly
=
oldData
.
getItemGraphicEl
(
oldIdx
);
var
layout
=
data
.
getItemLayout
(
newIdx
);
var
labelLayout
=
layout
.
label
;
graphic
.
updateProps
(
poly
,
{
shape
:
{
points
:
layout
.
points
}
},
seriesModel
);
var
labelLine
=
poly
.
__labelLine
;
var
labelText
=
poly
.
__labelText
;
graphic
.
updateProps
(
labelLine
,
{
shape
:
{
points
:
labelLayout
.
linePoints
}
},
seriesModel
);
graphic
.
updateProps
(
labelText
,
{
style
:
{
x
:
labelLayout
.
x
,
y
:
labelLayout
.
y
}
},
seriesModel
);
// Set none animating style
labelText
.
setStyle
({
textAlign
:
labelLayout
.
textAlign
,
textBaseline
:
labelLayout
.
textBaseline
});
var
opacity
=
data
.
getItemModel
(
newIdx
).
get
(
opacityAccessPath
);
if
(
opacity
==
null
)
{
opacity
=
1
;
}
poly
.
setStyle
(
'
opacity
'
,
opacity
);
group
.
add
(
poly
);
group
.
add
(
labelLine
);
group
.
add
(
labelText
);
data
.
setItemGraphicEl
(
newIdx
,
poly
);
var
piePiece
=
oldData
.
getItemGraphicEl
(
oldIdx
);
piePiece
.
updateData
(
data
,
newIdx
);
group
.
add
(
piePiece
);
data
.
setItemGraphicEl
(
newIdx
,
piePiece
);
})
.
remove
(
function
(
idx
)
{
var
poly
=
oldData
.
getItemGraphicEl
(
idx
);
fadeOut
(
poly
,
group
,
enableAnimation
);
group
.
remove
(
poly
.
__labelLine
);
group
.
remove
(
poly
.
__labelText
);
var
piePiece
=
oldData
.
getItemGraphicEl
(
idx
);
group
.
remove
(
piePiece
);
})
.
execute
();
this
.
_data
=
data
;
this
.
_updateAll
(
data
,
seriesModel
);
},
remove
:
function
()
{
this
.
group
.
removeAll
();
this
.
_data
=
null
;
},
_updateAll
:
function
(
data
,
seriesModel
)
{
data
.
eachItemGraphicEl
(
function
(
poly
,
idx
)
{
var
itemModel
=
data
.
getItemModel
(
idx
);
var
itemStyleModel
=
itemModel
.
getModel
(
'
itemStyle
'
);
var
visualColor
=
data
.
getItemVisual
(
idx
,
'
color
'
);
poly
.
setStyle
(
zrUtil
.
extend
(
{
fill
:
data
.
getItemVisual
(
idx
,
'
color
'
)
},
itemStyleModel
.
getModel
(
'
normal
'
).
getItemStyle
([
'
opacity
'
])
)
);
graphic
.
setHoverStyle
(
poly
,
itemStyleModel
.
getModel
(
'
emphasis
'
).
getItemStyle
()
);
// Set label style
var
labelText
=
poly
.
__labelText
;
var
labelLine
=
poly
.
__labelLine
;
var
labelModel
=
itemModel
.
getModel
(
'
label.normal
'
);
var
textStyleModel
=
labelModel
.
getModel
(
'
textStyle
'
);
var
labelPosition
=
labelModel
.
get
(
'
position
'
);
var
isLabelInside
=
labelPosition
===
'
inside
'
||
labelPosition
===
'
inner
'
||
labelPosition
===
'
center
'
;
labelText
.
setStyle
({
// Default use item visual color
fill
:
textStyleModel
.
getTextColor
()
||
isLabelInside
?
'
#fff
'
:
visualColor
,
text
:
seriesModel
.
getFormattedLabel
(
idx
,
'
normal
'
)
||
data
.
getName
(
idx
),
textFont
:
textStyleModel
.
getFont
()
});
// Default use item visual color
labelLine
.
attr
(
'
ignore
'
,
!
itemModel
.
get
(
'
labelLine.normal.show
'
));
labelLine
.
setStyle
({
stroke
:
visualColor
});
labelLine
.
setStyle
(
itemModel
.
getModel
(
'
labelLine.lineStyle
'
).
getLineStyle
()
);
});
}
});
...
...
src/chart/pie/PieView.js
浏览文件 @
79d850fa
...
...
@@ -110,8 +110,6 @@ define(function (require) {
piePieceProto
.
updateData
=
function
(
data
,
idx
,
firstCreate
)
{
var
sector
=
this
.
childAt
(
0
);
var
labelLine
=
this
.
childAt
(
1
);
var
labelText
=
this
.
childAt
(
2
);
var
seriesModel
=
data
.
hostModel
;
var
itemModel
=
data
.
getItemModel
(
idx
);
...
...
@@ -133,32 +131,6 @@ define(function (require) {
},
seriesModel
);
}
var
labelLayout
=
layout
.
label
;
graphic
.
updateProps
(
labelLine
,
{
shape
:
{
points
:
labelLayout
.
linePoints
||
[
[
labelLayout
.
x
,
labelLayout
.
y
],
[
labelLayout
.
x
,
labelLayout
.
y
],
[
labelLayout
.
x
,
labelLayout
.
y
]
]
}
},
seriesModel
);
graphic
.
updateProps
(
labelText
,
{
style
:
{
x
:
labelLayout
.
x
,
y
:
labelLayout
.
y
}
},
seriesModel
);
labelText
.
attr
({
style
:
{
textAlign
:
labelLayout
.
textAlign
,
textBaseline
:
labelLayout
.
textBaseline
,
textFont
:
labelLayout
.
font
},
rotation
:
labelLayout
.
rotation
,
origin
:
[
labelLayout
.
x
,
labelLayout
.
y
],
z2
:
10
});
// Update common style
var
itemStyleModel
=
itemModel
.
getModel
(
'
itemStyle
'
);
var
visualColor
=
data
.
getItemVisual
(
idx
,
'
color
'
);
...
...
@@ -176,25 +148,6 @@ define(function (require) {
itemStyleModel
.
getModel
(
'
emphasis
'
).
getItemStyle
()
);
var
labelModel
=
itemModel
.
getModel
(
'
label.normal
'
);
var
labelHoverModel
=
itemModel
.
getModel
(
'
label.emphasis
'
);
var
labelLineModel
=
itemModel
.
getModel
(
'
labelLine.normal
'
);
var
labelLineHoverModel
=
itemModel
.
getModel
(
'
labelLine.emphasis
'
);
labelText
.
setStyle
(
getLabelStyle
(
data
,
idx
,
'
normal
'
,
labelModel
));
labelText
.
ignore
=
labelText
.
normalIgnore
=
!
labelModel
.
get
(
'
show
'
);
labelText
.
hoverIgnore
=
!
labelHoverModel
.
get
(
'
show
'
);
labelLine
.
ignore
=
labelLine
.
normalIgnore
=
!
labelLineModel
.
get
(
'
show
'
);
labelLine
.
hoverIgnore
=
!
labelLineHoverModel
.
get
(
'
show
'
);
// Default use item visual color
labelLine
.
setStyle
({
stroke
:
visualColor
});
labelLine
.
setStyle
(
labelLineModel
.
getModel
(
'
lineStyle
'
).
getLineStyle
());
sector
.
setStyle
(
zrUtil
.
extend
(
{
...
...
@@ -204,18 +157,6 @@ define(function (require) {
)
);
sector
.
hoverStyle
=
itemStyleModel
.
getModel
(
'
emphasis
'
).
getItemStyle
();
labelText
.
hoverStyle
=
getLabelStyle
(
data
,
idx
,
'
emphasis
'
,
labelHoverModel
);
labelLine
.
hoverStyle
=
labelLineHoverModel
.
getModel
(
'
lineStyle
'
).
getLineStyle
();
var
smooth
=
labelLineModel
.
get
(
'
smooth
'
);
if
(
smooth
&&
smooth
===
true
)
{
smooth
=
0.4
;
}
labelLine
.
setShape
({
smooth
:
smooth
});
graphic
.
setHoverStyle
(
this
);
// Toggle selected
toggleItemSelected
(
...
...
@@ -252,6 +193,77 @@ define(function (require) {
.
on
(
'
emphasis
'
,
onEmphasis
)
.
on
(
'
normal
'
,
onNormal
);
}
this
.
_updateLabel
(
data
,
idx
);
graphic
.
setHoverStyle
(
this
);
};
piePieceProto
.
_updateLabel
=
function
(
data
,
idx
)
{
var
labelLine
=
this
.
childAt
(
1
);
var
labelText
=
this
.
childAt
(
2
);
var
seriesModel
=
data
.
hostModel
;
var
itemModel
=
data
.
getItemModel
(
idx
);
var
layout
=
data
.
getItemLayout
(
idx
);
var
labelLayout
=
layout
.
label
;
var
visualColor
=
data
.
getItemVisual
(
idx
,
'
color
'
);
graphic
.
updateProps
(
labelLine
,
{
shape
:
{
points
:
labelLayout
.
linePoints
||
[
[
labelLayout
.
x
,
labelLayout
.
y
],
[
labelLayout
.
x
,
labelLayout
.
y
],
[
labelLayout
.
x
,
labelLayout
.
y
]
]
}
},
seriesModel
);
graphic
.
updateProps
(
labelText
,
{
style
:
{
x
:
labelLayout
.
x
,
y
:
labelLayout
.
y
}
},
seriesModel
);
labelText
.
attr
({
style
:
{
textAlign
:
labelLayout
.
textAlign
,
textBaseline
:
labelLayout
.
textBaseline
,
textFont
:
labelLayout
.
font
},
rotation
:
labelLayout
.
rotation
,
origin
:
[
labelLayout
.
x
,
labelLayout
.
y
],
z2
:
10
});
var
labelModel
=
itemModel
.
getModel
(
'
label.normal
'
);
var
labelHoverModel
=
itemModel
.
getModel
(
'
label.emphasis
'
);
var
labelLineModel
=
itemModel
.
getModel
(
'
labelLine.normal
'
);
var
labelLineHoverModel
=
itemModel
.
getModel
(
'
labelLine.emphasis
'
);
labelText
.
setStyle
(
getLabelStyle
(
data
,
idx
,
'
normal
'
,
labelModel
));
labelText
.
ignore
=
labelText
.
normalIgnore
=
!
labelModel
.
get
(
'
show
'
);
labelText
.
hoverIgnore
=
!
labelHoverModel
.
get
(
'
show
'
);
labelLine
.
ignore
=
labelLine
.
normalIgnore
=
!
labelLineModel
.
get
(
'
show
'
);
labelLine
.
hoverIgnore
=
!
labelLineHoverModel
.
get
(
'
show
'
);
// Default use item visual color
labelLine
.
setStyle
({
stroke
:
visualColor
});
labelLine
.
setStyle
(
labelLineModel
.
getModel
(
'
lineStyle
'
).
getLineStyle
());
labelText
.
hoverStyle
=
getLabelStyle
(
data
,
idx
,
'
emphasis
'
,
labelHoverModel
);
labelLine
.
hoverStyle
=
labelLineHoverModel
.
getModel
(
'
lineStyle
'
).
getLineStyle
();
var
smooth
=
labelLineModel
.
get
(
'
smooth
'
);
if
(
smooth
&&
smooth
===
true
)
{
smooth
=
0.4
;
}
labelLine
.
setShape
({
smooth
:
smooth
});
};
zrUtil
.
inherits
(
PiePiece
,
graphic
.
Group
);
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录