Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
半栈学徒
incubator-echarts
提交
99c701ab
I
incubator-echarts
项目概览
半栈学徒
/
incubator-echarts
与 Fork 源项目一致
从无法访问的项目Fork
通知
5
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,发现更多精彩内容 >>
提交
99c701ab
编写于
11月 29, 2017
作者:
O
Ovilia
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat(sunburst): enable highlight descendants and ancestors
上级
333d7c27
变更
4
隐藏空白更改
内联
并排
Showing
4 changed file
with
141 addition
and
32 deletion
+141
-32
src/chart/sunburst/SunburstPiece.js
src/chart/sunburst/SunburstPiece.js
+105
-31
src/chart/sunburst/SunburstView.js
src/chart/sunburst/SunburstView.js
+1
-0
src/data/Tree.js
src/data/Tree.js
+29
-0
test/sunburst.html
test/sunburst.html
+6
-1
未找到文件。
src/chart/sunburst/SunburstPiece.js
浏览文件 @
99c701ab
import
*
as
zrUtil
from
'
zrender/src/core/util
'
;
import
*
as
graphic
from
'
../../util/graphic
'
;
var
NodeHighlightPolicy
=
{
NONE
:
0
,
// not downplay others
DESCENDANT
:
1
,
ANCESTOR
:
2
,
SELF
:
3
};
/**
* Sunburstce of Sunburst including Sector, Label, LabelLine
* @constructor
...
...
@@ -19,6 +26,8 @@ function SunburstPiece(node, seriesModel, ecModel) {
this
.
add
(
polyline
);
this
.
add
(
text
);
this
.
node
=
node
;
this
.
updateData
(
node
,
true
,
seriesModel
,
ecModel
);
// Hover to change label and labelLine
...
...
@@ -44,7 +53,6 @@ SunburstPieceProto.updateData = function (
seriesModel
,
ecModel
)
{
var
sector
=
this
.
childAt
(
0
);
// var seriesModel = node.hostModel;
...
...
@@ -92,42 +100,63 @@ SunburstPieceProto.updateData = function (
var
cursorStyle
=
itemModel
.
getShallow
(
'
cursor
'
);
cursorStyle
&&
sector
.
attr
(
'
cursor
'
,
cursorStyle
);
function
onEmphasis
()
{
// Sector may has animation of updating data. Force to move to the last frame
// Or it may stopped on the wrong shape
// sector.stopAnimation(true);
// sector.animateTo({
// shape: {
// r: layout.r + seriesModel.get('hoverOffset')
// }
// }, 300, 'elasticOut');
}
function
onNormal
()
{
// sector.stopAnimation(true);
// var duration = 300;
// var delay = node.depth * duration;
// sector.animateTo({
// shape: {
// r: layout.r
// }
// }, duration, delay, 'elasticOut');
}
sector
.
off
(
'
mouseover
'
).
off
(
'
mouseout
'
).
off
(
'
emphasis
'
).
off
(
'
normal
'
);
if
(
itemModel
.
get
(
'
hoverAnimation
'
)
&&
seriesModel
.
isAnimationEnabled
())
{
sector
.
on
(
'
mouseover
'
,
onEmphasis
)
.
on
(
'
mouseout
'
,
onNormal
)
.
on
(
'
emphasis
'
,
onEmphasis
)
.
on
(
'
normal
'
,
onNormal
);
}
this
.
_initEvents
(
sector
,
node
,
seriesModel
);
// this._updateLabel(data, idx);
graphic
.
setHoverStyle
(
this
);
};
SunburstPieceProto
.
onEmphasis
=
function
()
{
var
policy
=
NodeHighlightPolicy
.
DESCENDANT
;
// TODO: change to real policy
var
that
=
this
;
this
.
node
.
hostTree
.
root
.
eachNode
(
function
(
n
)
{
if
(
n
.
piece
)
{
if
(
isNodeHighlighted
(
n
,
that
.
node
,
policy
))
{
n
.
piece
.
childAt
(
0
).
trigger
(
'
highlight
'
);
}
else
if
(
policy
!==
NodeHighlightPolicy
.
NONE
)
{
n
.
piece
.
childAt
(
0
).
trigger
(
'
downplay
'
);
}
}
});
};
SunburstPieceProto
.
onNormal
=
function
()
{
this
.
node
.
hostTree
.
root
.
eachNode
(
function
(
n
)
{
if
(
n
.
piece
)
{
var
itemStyleModel
=
n
.
getModel
(
'
itemStyle.normal
'
);
var
opacity
=
itemStyleModel
.
getItemStyle
().
opacity
||
1
;
var
sector
=
n
.
piece
.
childAt
(
0
);
sector
.
animateTo
({
style
:
{
opacity
:
opacity
}
});
}
});
};
SunburstPieceProto
.
onHighlight
=
function
()
{
var
sector
=
this
.
childAt
(
0
);
sector
.
animateTo
({
style
:
{
opacity
:
1
}
});
};
SunburstPieceProto
.
onDownplay
=
function
()
{
var
sector
=
this
.
childAt
(
0
);
sector
.
animateTo
({
style
:
{
opacity
:
0.5
}
});
};
SunburstPieceProto
.
_updateLabel
=
function
(
data
,
idx
)
{
// var labelLine = this.childAt(1);
...
...
@@ -205,6 +234,36 @@ SunburstPieceProto._updateLabel = function (data, idx) {
// });
};
SunburstPieceProto
.
_initEvents
=
function
(
sector
,
node
,
seriesModel
)
{
var
itemModel
=
node
.
getModel
();
sector
.
off
(
'
mouseover
'
).
off
(
'
mouseout
'
).
off
(
'
emphasis
'
).
off
(
'
normal
'
);
var
that
=
this
;
var
onEmphasis
=
function
()
{
that
.
onEmphasis
();
};
var
onNormal
=
function
()
{
that
.
onNormal
();
};
var
onDownplay
=
function
()
{
that
.
onDownplay
();
};
var
onHighlight
=
function
()
{
that
.
onHighlight
();
};
if
(
itemModel
.
get
(
'
hoverAnimation
'
)
&&
seriesModel
.
isAnimationEnabled
())
{
sector
.
on
(
'
mouseover
'
,
onEmphasis
)
.
on
(
'
mouseout
'
,
onNormal
)
.
on
(
'
emphasis
'
,
onEmphasis
)
.
on
(
'
normal
'
,
onNormal
)
.
on
(
'
downplay
'
,
onDownplay
)
.
on
(
'
highlight
'
,
onHighlight
);
}
};
zrUtil
.
inherits
(
SunburstPiece
,
graphic
.
Group
);
export
default
SunburstPiece
;
...
...
@@ -253,3 +312,18 @@ function getRootId(node) {
var
virtualRoot
=
node
.
getAncestors
()[
0
];
return
zrUtil
.
indexOf
(
virtualRoot
.
children
,
ancestor
);
}
function
isNodeHighlighted
(
node
,
activeNode
,
policy
)
{
if
(
policy
===
NodeHighlightPolicy
.
NONE
)
{
return
false
;
}
else
if
(
policy
===
NodeHighlightPolicy
.
SELF
)
{
return
node
===
activeNode
;
}
else
if
(
policy
===
NodeHighlightPolicy
.
ANCESTOR
)
{
return
node
===
activeNode
||
node
.
isAncestorOf
(
activeNode
);
}
else
{
return
node
===
activeNode
||
node
.
isDescendantOf
(
activeNode
);
}
}
src/chart/sunburst/SunburstView.js
浏览文件 @
99c701ab
...
...
@@ -51,6 +51,7 @@ var SunburstView = ChartView.extend({
treeRoot
.
eachNode
(
function
(
node
)
{
if
(
node
!==
treeRoot
)
{
var
piece
=
new
SunburstPiece
(
node
,
seriesModel
,
ecModel
);
node
.
piece
=
piece
;
group
.
add
(
piece
);
}
});
...
...
src/data/Tree.js
浏览文件 @
99c701ab
...
...
@@ -283,6 +283,35 @@ TreeNode.prototype = {
*/
getId
:
function
()
{
return
this
.
hostTree
.
data
.
getId
(
this
.
dataIndex
);
},
/**
* if this is an ancestor of another node
*
* @public
* @param {TreeNode} node another node
* @return {boolean} if is ancestor
*/
isAncestorOf
:
function
(
node
)
{
var
parent
=
node
.
parentNode
;
while
(
parent
)
{
if
(
parent
===
this
)
{
return
true
;
}
parent
=
parent
.
parentNode
;
}
return
false
;
},
/**
* if this is an descendant of another node
*
* @public
* @param {TreeNode} node another node
* @return {boolean} if is descendant
*/
isDescendantOf
:
function
(
node
)
{
return
node
!==
this
&&
node
.
isAncestorOf
(
this
);
}
};
...
...
test/sunburst.html
浏览文件 @
99c701ab
...
...
@@ -37,7 +37,12 @@
value
:
2
},
{
name
:
'
Cousin Mary
'
,
value
:
5
value
:
5
,
itemStyle
:
{
normal
:
{
opacity
:
0.2
}
}
},
{
name
:
'
Cousin Ben
'
,
value
:
4
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录