Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
致宏Rex
echarts
提交
e0a70e6a
E
echarts
项目概览
致宏Rex
/
echarts
与 Fork 源项目一致
从无法访问的项目Fork
通知
1
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
E
echarts
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
e0a70e6a
编写于
1月 18, 2019
作者:
S
sushuang
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
fix(graph): fix hover style disabled by focusNodeAdjacency
上级
8152f8bf
变更
3
隐藏空白更改
内联
并排
Showing
3 changed file
with
152 addition
and
111 deletion
+152
-111
src/chart/graph/GraphView.js
src/chart/graph/GraphView.js
+10
-9
test/graph-simple.html
test/graph-simple.html
+139
-101
test/tmp-base.html
test/tmp-base.html
+3
-1
未找到文件。
src/chart/graph/GraphView.js
浏览文件 @
e0a70e6a
...
...
@@ -27,6 +27,8 @@ import {onIrrelevantElement} from '../../component/helper/cursorHelper';
import
*
as
graphic
from
'
../../util/graphic
'
;
import
adjustEdge
from
'
./adjustEdge
'
;
var
FOCUS_ADJACENCY
=
'
__focusNodeAdjacency
'
;
var
UNFOCUS_ADJACENCY
=
'
__unfocusNodeAdjacency
'
;
var
nodeOpacityPath
=
[
'
itemStyle
'
,
'
opacity
'
];
var
lineOpacityPath
=
[
'
lineStyle
'
,
'
opacity
'
];
...
...
@@ -151,24 +153,23 @@ export default echarts.extendChartView({
}
el
.
setDraggable
(
draggable
&&
forceLayout
);
el
.
off
(
'
mouseover
'
,
el
.
__focusNodeAdjacency
);
el
.
off
(
'
mouseout
'
,
el
.
__unfocusNodeAdjacency
);
el
[
FOCUS_ADJACENCY
]
&&
el
.
off
(
'
mouseover
'
,
el
[
FOCUS_ADJACENCY
]
);
el
[
UNFOCUS_ADJACENCY
]
&&
el
.
off
(
'
mouseout
'
,
el
[
UNFOCUS_ADJACENCY
]
);
if
(
itemModel
.
get
(
'
focusNodeAdjacency
'
))
{
el
.
on
(
'
mouseover
'
,
el
.
__focusNodeAdjacency
=
function
()
{
el
.
on
(
'
mouseover
'
,
el
[
FOCUS_ADJACENCY
]
=
function
()
{
api
.
dispatchAction
({
type
:
'
focusNodeAdjacency
'
,
seriesId
:
seriesModel
.
id
,
dataIndex
:
el
.
dataIndex
});
});
el
.
on
(
'
mouseout
'
,
el
.
__unfocusNodeAdjacency
=
function
()
{
el
.
on
(
'
mouseout
'
,
el
[
UNFOCUS_ADJACENCY
]
=
function
()
{
api
.
dispatchAction
({
type
:
'
unfocusNodeAdjacency
'
,
seriesId
:
seriesModel
.
id
});
});
}
},
this
);
...
...
@@ -176,18 +177,18 @@ export default echarts.extendChartView({
data
.
graph
.
eachEdge
(
function
(
edge
)
{
var
el
=
edge
.
getGraphicEl
();
el
.
off
(
'
mouseover
'
,
el
.
__focusNodeAdjacency
);
el
.
off
(
'
mouseout
'
,
el
.
__unfocusNodeAdjacency
);
el
[
FOCUS_ADJACENCY
]
&&
el
.
off
(
'
mouseover
'
,
el
[
FOCUS_ADJACENCY
]
);
el
[
UNFOCUS_ADJACENCY
]
&&
el
.
off
(
'
mouseout
'
,
el
[
UNFOCUS_ADJACENCY
]
);
if
(
edge
.
getModel
().
get
(
'
focusNodeAdjacency
'
))
{
el
.
on
(
'
mouseover
'
,
el
.
__focusNodeAdjacency
=
function
()
{
el
.
on
(
'
mouseover
'
,
el
[
FOCUS_ADJACENCY
]
=
function
()
{
api
.
dispatchAction
({
type
:
'
focusNodeAdjacency
'
,
seriesId
:
seriesModel
.
id
,
edgeDataIndex
:
edge
.
dataIndex
});
});
el
.
on
(
'
mouseout
'
,
el
.
__unfocusNodeAdjacency
=
function
()
{
el
.
on
(
'
mouseout
'
,
el
[
UNFOCUS_ADJACENCY
]
=
function
()
{
api
.
dispatchAction
({
type
:
'
unfocusNodeAdjacency
'
,
seriesId
:
seriesModel
.
id
...
...
test/graph-simple.html
浏览文件 @
e0a70e6a
...
...
@@ -24,132 +24,170 @@ under the License.
<script
src=
"lib/esl.js"
></script>
<script
src=
"lib/config.js"
></script>
<script
src=
"lib/jquery.min.js"
></script>
<script
src=
"lib/testHelper.js"
></script>
<link
rel=
"stylesheet"
href=
"lib/reset.css"
/>
</head>
<body>
<style>
html
,
body
,
#main
{
width
:
100%
;
height
:
100%
;
margin
:
0
;
}
</style>
hover node3, edge label should be displayed.
节点1 should display value in tooltip.
<div
id=
"main"
></div>
<div
id=
"main0"
></div>
<div
id=
"main1"
></div>
<script>
require
([
'
echarts
'
,
// 'echarts/chart/graph',
// 'echarts/component/title',
// 'echarts/component/legend',
// 'echarts/component/tooltip',
// 'zrender/vml/vml',
'
theme/vintage
'
],
function
(
echarts
)
{
var
chart
=
echarts
.
init
(
document
.
getElementById
(
'
main
'
),
'
vintage
'
);
var
option
=
{
tooltip
:
{},
animationDurationUpdate
:
1500
,
animationEasingUpdate
:
'
quinticInOut
'
,
series
:
[
{
type
:
'
graph
'
,
symbolSize
:
20
,
roam
:
true
,
label
:
{
normal
:
{
show
:
true
}
},
edgeSymbol
:
[
'
circle
'
,
'
arrow
'
],
edgeSymbolSize
:
[
4
,
10
],
edgeLabel
:
{
normal
:
{
textStyle
:
{
fontSize
:
20
}
}
},
focusNodeAdjacency
:
true
,
data
:
[{
name
:
'
节点1
'
,
x
:
300
,
y
:
300
,
value
:
2321
},
{
name
:
'
节点2
'
,
x
:
800
,
y
:
300
},
{
name
:
'
节点3
'
,
x
:
550
,
y
:
100
},
{
name
:
'
节点4
'
,
x
:
550
,
y
:
500
}],
// links: [],
links
:
[{
source
:
0
,
target
:
1
,
symbolSize
:
[
5
,
20
],
function
getOption
(
focusNodeAdjacency
)
{
return
{
tooltip
:
{},
animationDurationUpdate
:
1500
,
animationEasingUpdate
:
'
quinticInOut
'
,
series
:
[
{
type
:
'
graph
'
,
symbolSize
:
20
,
roam
:
true
,
label
:
{
normal
:
{
show
:
true
// position: 'end'
}
},
lineStyle
:
{
edgeSymbol
:
[
'
circle
'
,
'
arrow
'
],
edgeSymbolSize
:
[
4
,
10
],
edgeLabel
:
{
normal
:
{
textStyle
:
{
color
:
'
green
'
,
fontSize
:
30
}
},
emphasis
:
{
textStyle
:
{
color
:
'
#987654
'
}
}
},
lineStyle
:
{
width
:
10
},
focusNodeAdjacency
:
focusNodeAdjacency
,
data
:
[{
name
:
'
节点1
'
,
x
:
300
,
y
:
300
,
value
:
'
set_style_on_item
'
},
{
name
:
'
节点2
'
,
x
:
800
,
y
:
300
},
{
name
:
'
节点3
'
,
x
:
550
,
y
:
100
},
{
name
:
'
节点4
'
,
x
:
550
,
y
:
500
}],
// links: [],
links
:
[{
source
:
0
,
target
:
1
,
symbolSize
:
[
5
,
20
],
label
:
{
normal
:
{
show
:
true
// position: 'end'
}
},
lineStyle
:
{
width
:
5
,
opacity
:
1
,
curveness
:
0.2
},
emphasis
:
{
lineStyle
:
{
color
:
'
blue
'
,
width
:
20
,
opacity
:
0.1
},
label
:
{
fontSize
:
40
,
color
:
'
red
'
}
}
}
},
{
source
:
'
节点2
'
,
target
:
'
节点1
'
,
label
:
{
normal
:
{
show
:
true
},
{
source
:
'
节点2
'
,
target
:
'
节点1
'
,
label
:
{
normal
:
{
show
:
true
}
},
lineStyle
:
{
normal
:
{
curveness
:
0.2
}
}
},
},
{
source
:
'
节点1
'
,
target
:
'
节点3
'
,
emphasis
:
{
label
:
{
show
:
true
}
}
},
{
source
:
'
节点2
'
,
target
:
'
节点3
'
},
{
source
:
'
节点2
'
,
target
:
'
节点4
'
},
{
source
:
'
节点1
'
,
target
:
'
节点4
'
}],
lineStyle
:
{
normal
:
{
curveness
:
0.2
}
}
},
{
source
:
'
节点1
'
,
target
:
'
节点3
'
,
emphasis
:
{
label
:
{
show
:
true
normal
:
{
curveness
:
0
}
}
},
{
source
:
'
节点2
'
,
target
:
'
节点3
'
},
{
source
:
'
节点2
'
,
target
:
'
节点4
'
},
{
source
:
'
节点1
'
,
target
:
'
节点4
'
}],
lineStyle
:
{
normal
:
{
curveness
:
0
}
}
}
]
};
]
};
}
var
chart0
=
testHelper
.
create
(
echarts
,
'
main0
'
,
{
title
:
[
'
[focusNodeAdjacency: **true**]
'
,
'
hover node3, edge label should be displayed.
'
,
'
节点1 should display value in tooltip.
'
,
'
series.lineStyle: 5
'
,
'
hover set_style_on_item, lineStyle: {opacity 0.1, color: "blue", width: 20}, label: {color: "red", fontSize: 40}.
'
,
'
focusNodeAdjacency triggered and returned, opacity change MUST NOT be kept
'
],
option
:
getOption
(
true
),
height
:
500
});
chart
.
setOption
(
option
);
var
chart1
=
testHelper
.
create
(
echarts
,
'
main1
'
,
{
title
:
[
'
[focusNodeAdjacency: **false**]
'
,
'
hover node3, edge label should be displayed.
'
,
'
节点1 should display value in tooltip.
'
,
'
hover set_style_on_item, lineStyle: {opacity 0.1, color: "blue", width: 20}, label: {color: "red", fontSize: 40}.
'
,
'
focusNodeAdjacency triggered and returned, opacity change MUST NOT be kept
'
],
option
:
getOption
(
false
),
height
:
500
});
});
</script>
</body>
</html>
\ No newline at end of file
test/tmp-base.html
浏览文件 @
e0a70e6a
...
...
@@ -28,6 +28,7 @@ under the License.
<script
src=
"lib/jquery.min.js"
></script>
<script
src=
"lib/facePrint.js"
></script>
<script
src=
"lib/testHelper.js"
></script>
<!-- <script src="ut/lib/canteen.js"></script> -->
<link
rel=
"stylesheet"
href=
"lib/reset.css"
/>
</head>
<body>
...
...
@@ -54,7 +55,8 @@ under the License.
// });
var
chart
=
testHelper
.
create
(
echarts
,
'
main0
'
,
{
option
:
option
option
:
option
,
// recordCanvas: true
});
});
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录