Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
x649585723
incubator-echarts
提交
529bbc3c
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,发现更多精彩内容 >>
提交
529bbc3c
编写于
9月 13, 2018
作者:
S
sushuang
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
fix: emphasis and mouseover.
上级
0186bd89
变更
6
显示空白变更内容
内联
并排
Showing
6 changed file
with
98 addition
and
21 deletion
+98
-21
src/chart/helper/Symbol.js
src/chart/helper/Symbol.js
+15
-4
src/util/graphic.js
src/util/graphic.js
+12
-5
test/hoverStyle.html
test/hoverStyle.html
+54
-0
test/lib/reset.css
test/lib/reset.css
+7
-0
test/lib/testHelper.js
test/lib/testHelper.js
+4
-1
test/treemap-disk.html
test/treemap-disk.html
+6
-11
未找到文件。
src/chart/helper/Symbol.js
浏览文件 @
529bbc3c
...
...
@@ -335,17 +335,28 @@ symbolProto._updateCommon = function (data, idx, symbolSize, seriesScope) {
symbolPath
.
__symbolOriginalScale
=
getScale
(
symbolSize
);
if
(
hoverAnimation
&&
seriesModel
.
isAnimationEnabled
())
{
symbolPath
.
on
(
'
mouseover
'
,
onEmphasis
)
.
on
(
'
mouseout
'
,
onNormal
)
// Note: consider `off`, should use static function here.
symbolPath
.
on
(
'
mouseover
'
,
onMouseOver
)
.
on
(
'
mouseout
'
,
onMouseOut
)
.
on
(
'
emphasis
'
,
onEmphasis
)
.
on
(
'
normal
'
,
onNormal
);
}
};
function
onMouseOver
()
{
// see comment in `graphic.isInEmphasis`
!
graphic
.
isInEmphasis
(
this
)
&&
onEmphasis
.
call
(
this
);
}
function
onMouseOut
()
{
// see comment in `graphic.isInEmphasis`
!
graphic
.
isInEmphasis
(
this
)
&&
onNormal
.
call
(
this
);
}
function
onEmphasis
()
{
// Do not support this hover animation util some scenario required.
// Animation can only be supported in hover layer when using `el.incremetal`.
if
(
this
.
incremental
||
this
.
useHoverLayer
||
graphic
.
isInEmphasis
(
this
)
)
{
if
(
this
.
incremental
||
this
.
useHoverLayer
)
{
return
;
}
var
scale
=
this
.
__symbolOriginalScale
;
...
...
@@ -359,7 +370,7 @@ function onEmphasis() {
}
function
onNormal
()
{
if
(
this
.
incremental
||
this
.
useHoverLayer
||
graphic
.
isInEmphasis
(
this
)
)
{
if
(
this
.
incremental
||
this
.
useHoverLayer
)
{
return
;
}
this
.
animateTo
({
...
...
src/util/graphic.js
浏览文件 @
529bbc3c
...
...
@@ -417,11 +417,18 @@ export function setElementHoverStyle(el, hoverStl) {
}
/**
* Emphasis (called by API) has higher priority than `mouseover`.
* When element has been called to be entered emphasis, mouse over
* should not trigger the highlight effect (for example, animation
* scale) again, and `mouseout` should not downplay the highlight
* effect. So the listener of `mouseover` and `mouseout` should
* check `isInEmphasis`.
*
* @param {module:zrender/Element} el
* @return {boolean}
*/
export
function
isInEmphasis
(
el
)
{
return
el
&&
el
.
__isEmphasis
;
return
el
&&
el
.
__isEmphasis
Entered
;
}
function
onElementMouseOver
(
e
)
{
...
...
@@ -430,7 +437,7 @@ function onElementMouseOver(e) {
}
// Only if element is not in emphasis status
!
this
.
__isEmphasis
&&
traverseCall
(
this
,
doSingleEnterHover
);
!
this
.
__isEmphasis
Entered
&&
traverseCall
(
this
,
doSingleEnterHover
);
}
function
onElementMouseOut
(
e
)
{
...
...
@@ -439,16 +446,16 @@ function onElementMouseOut(e) {
}
// Only if element is not in emphasis status
!
this
.
__isEmphasis
&&
traverseCall
(
this
,
doSingleLeaveHover
);
!
this
.
__isEmphasis
Entered
&&
traverseCall
(
this
,
doSingleLeaveHover
);
}
function
enterEmphasis
()
{
this
.
__isEmphasis
=
true
;
this
.
__isEmphasis
Entered
=
true
;
traverseCall
(
this
,
doSingleEnterHover
);
}
function
leaveEmphasis
()
{
this
.
__isEmphasis
=
false
;
this
.
__isEmphasis
Entered
=
false
;
traverseCall
(
this
,
doSingleLeaveHover
);
}
...
...
test/hoverStyle.html
浏览文件 @
529bbc3c
...
...
@@ -58,6 +58,7 @@ under the License.
<div
id=
"main2"
></div>
<div
id=
"main3"
></div>
<div
id=
"main4"
></div>
<div
id=
"main5"
></div>
<script>
...
...
@@ -438,5 +439,58 @@ under the License.
<script>
require
([
'
echarts
'
],
function
(
echarts
)
{
var
option
=
{
hoverLayerThreshold
:
hoverLayerThreshold
,
tooltip
:
{},
xAxis
:
{
},
yAxis
:
{
splitNumber
:
2
,
scale
:
true
},
series
:
[{
type
:
'
line
'
,
symbolSize
:
20
,
data
:
[[
21
,
22
],
[
44
,
11
]]
}]
};
var
chart
=
testHelper
.
create
(
echarts
,
'
main5
'
,
{
title
:
[
'
Test default symbol hover style (scale) (Only test **Not use hoverLayer**)
'
,
'
trigger hover by API: **should scaled**.
'
,
'
Test mouse hover and leave, should NOT return to normal.
'
,
'
Only click downplay to return normal
'
],
option
:
option
,
height
:
200
,
buttons
:
[{
text
:
'
highlight dataIndex 0
'
,
onclick
:
function
()
{
chart
.
dispatchAction
({
type
:
'
highlight
'
,
seriesIndex
:
0
,
dataIndex
:
0
});
}
},
{
text
:
'
downplay dataIndex 0
'
,
onclick
:
function
()
{
chart
.
dispatchAction
({
type
:
'
downplay
'
,
seriesIndex
:
0
,
dataIndex
:
0
});
}
}]
});
});
</script>
</body>
</html>
\ No newline at end of file
test/lib/reset.css
浏览文件 @
529bbc3c
...
...
@@ -45,6 +45,13 @@ body > .main {
zoom
:
1
;
text-align
:
left
;
}
.test-title
strong
{
color
:
yellow
;
font-weight
:
700
;
text-shadow
:
-1px
0
#000
,
0
1px
#000
,
1px
0
#000
,
0
-1px
#000
;
padding-left
:
2px
;
padding-right
:
2px
;
}
.test-buttons
button
{
margin
:
10px
5px
;
}
...
...
test/lib/testHelper.js
浏览文件 @
529bbc3c
...
...
@@ -41,6 +41,7 @@
/**
* @param {Object} opt
* @param {string|Array.<string>} [opt.title] If array, each item is on a single line.
* Can use '**abc**', means <strong>abc</strong>.
* @param {Option} opt.option
* @param {Object} [opt.info] info object to display.
* @param {string} [opt.infoKey='option']
...
...
@@ -99,7 +100,9 @@
optTitle
=
optTitle
.
join
(
'
\n
'
);
}
title
.
innerHTML
=
'
<div class="test-title-inner">
'
+
testHelper
.
encodeHTML
(
optTitle
).
replace
(
/
\n
/g
,
'
<br>
'
)
+
testHelper
.
encodeHTML
(
optTitle
)
.
replace
(
/
\*\*([^
*
]
+
?)\*\*
/g
,
'
<strong>$1</strong>
'
)
.
replace
(
/
\n
/g
,
'
<br>
'
)
+
'
</div>
'
;
}
...
...
test/treemap-disk.html
浏览文件 @
529bbc3c
...
...
@@ -116,6 +116,7 @@ under the License.
function
colorMappingChange
(
value
)
{
var
levelOption
=
getLevelOption
(
value
);
chart
.
setOption
({
series
:
[{
levels
:
levelOption
...
...
@@ -136,11 +137,9 @@ under the License.
{
color
:
[
'
#d14a61
'
],
// default color
itemStyle
:
{
normal
:
{
borderWidth
:
0
,
gapWidth
:
5
}
}
},
{
color
:
[
...
...
@@ -150,20 +149,16 @@ under the License.
],
colorMappingBy
:
colorMapping
,
itemStyle
:
{
normal
:
{
gapWidth
:
1
}
}
},
{
colorSaturation
:
[
0.35
,
0.5
],
itemStyle
:
{
normal
:
{
gapWidth
:
1
,
borderColorSaturation
:
0.6
}
}
}
];
}
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录