Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
半栈学徒
incubator-echarts
提交
9c4a9e68
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,发现更多精彩内容 >>
提交
9c4a9e68
编写于
7月 19, 2020
作者:
P
pissang
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
fix(state): more robust default emphasis color calculation.
上级
014ac4b6
变更
6
隐藏空白更改
内联
并排
Showing
6 changed file
with
96 addition
and
33 deletion
+96
-33
src/echarts.ts
src/echarts.ts
+3
-3
src/util/states.ts
src/util/states.ts
+31
-17
src/util/types.ts
src/util/types.ts
+0
-6
test/dataSelect.html
test/dataSelect.html
+25
-1
test/hoverFocus.html
test/hoverFocus.html
+36
-4
test/pie-alignTo.html
test/pie-alignTo.html
+1
-2
未找到文件。
src/echarts.ts
浏览文件 @
9c4a9e68
...
...
@@ -55,7 +55,8 @@ import {
DOWNPLAY_ACTION_TYPE
,
SELECT_ACTION_TYPE
,
UNSELECT_ACTION_TYPE
,
TOGGLE_SELECT_ACTION_TYPE
TOGGLE_SELECT_ACTION_TYPE
,
savePathStates
}
from
'
./util/states
'
;
import
*
as
modelUtil
from
'
./util/model
'
;
import
{
throttle
}
from
'
./util/throttle
'
;
...
...
@@ -2128,8 +2129,7 @@ class ECharts extends Eventful {
}
if
(
el
instanceof
graphic
.
Path
)
{
(
el
as
ECElement
).
hasFillInNormal
=
el
.
hasFill
();
(
el
as
ECElement
).
hasStrokeInNormal
=
el
.
hasStroke
();
savePathStates
(
el
);
}
// Only updated on changed element. In case element is incremental and don't wan't to rerender.
...
...
src/util/states.ts
浏览文件 @
9c4a9e68
...
...
@@ -5,7 +5,7 @@ import { PatternObject } from 'zrender/src/graphic/Pattern';
import
{
GradientObject
}
from
'
zrender/src/graphic/Gradient
'
;
import
Element
,
{
ElementEvent
}
from
'
zrender/src/Element
'
;
import
Model
from
'
../model/Model
'
;
import
{
DisplayState
,
ECElement
,
ColorString
,
BlurScope
,
InnerFocus
,
Payload
}
from
'
./types
'
;
import
{
DisplayState
,
ECElement
,
ColorString
,
BlurScope
,
InnerFocus
,
Payload
,
ZRColor
}
from
'
./types
'
;
import
{
extend
,
indexOf
,
isArrayLike
,
isObject
,
keys
,
isArray
,
each
}
from
'
zrender/src/core/util
'
;
import
{
getECData
}
from
'
./graphic
'
;
import
*
as
colorTool
from
'
zrender/src/tool/color
'
;
...
...
@@ -13,7 +13,7 @@ import { EChartsType } from '../echarts';
import
List
from
'
../data/List
'
;
import
SeriesModel
from
'
../model/Series
'
;
import
{
CoordinateSystemMaster
,
CoordinateSystem
}
from
'
../coord/CoordinateSystem
'
;
import
{
queryDataIndex
}
from
'
./model
'
;
import
{
queryDataIndex
,
makeInner
}
from
'
./model
'
;
import
Path
,
{
PathStyleProps
}
from
'
zrender/src/graphic/Path
'
;
import
GlobalModel
from
'
../model/Global
'
;
...
...
@@ -22,6 +22,13 @@ let _highlightNextDigit = 1;
const
_highlightKeyMap
:
Dictionary
<
number
>
=
{};
const
getSavedStates
=
makeInner
<
{
normalFill
:
ZRColor
normalStroke
:
ZRColor
selectFill
?:
ZRColor
selectStroke
?:
ZRColor
},
Path
>
();
export
const
HOVER_STATE_NORMAL
:
0
=
0
;
export
const
HOVER_STATE_BLUR
:
1
=
1
;
export
const
HOVER_STATE_EMPHASIS
:
2
=
2
;
...
...
@@ -181,37 +188,34 @@ function getFromStateStyle(
function
createEmphasisDefaultState
(
el
:
Displayable
,
stateName
:
'
emphasis
'
,
targetStates
?:
string
[],
state
:
Displayable
[
'
states
'
][
number
]
)
{
const
has
Emphasis
=
indexOf
(
el
.
currentStates
,
stateName
)
>=
0
;
const
has
Select
=
targetStates
&&
indexOf
(
targetStates
,
'
select
'
)
>=
0
;
let
cloned
=
false
;
if
(
el
instanceof
Path
)
{
const
hasFillInNormal
=
(
el
as
ECElement
).
hasFillInNormal
;
const
hasStrokeInNormal
=
(
el
as
ECElement
).
hasStrokeInNormal
;
if
(
hasFillInNormal
||
hasStrokeInNormal
)
{
const
fromState
:
PathStyleProps
=
!
hasEmphasis
?
getFromStateStyle
(
el
,
[
'
fill
'
,
'
stroke
'
],
stateName
)
:
null
;
const
store
=
getSavedStates
(
el
);
const
fromFill
=
hasSelect
?
(
store
.
selectFill
||
store
.
normalFill
)
:
store
.
normalFill
;
const
fromStroke
=
hasSelect
?
(
store
.
selectStroke
||
store
.
normalStroke
)
:
store
.
normalStroke
;
if
(
hasFillOrStroke
(
fromFill
)
||
hasFillOrStroke
(
fromStroke
))
{
state
=
state
||
{};
// Apply default color lift
let
emphasisStyle
=
state
.
style
||
{};
if
(
!
hasFillOrStroke
(
emphasisStyle
.
fill
)
&&
hasFill
InNormal
)
{
if
(
!
hasFillOrStroke
(
emphasisStyle
.
fill
)
&&
hasFill
OrStroke
(
fromFill
)
)
{
cloned
=
true
;
// Not modify the original value.
state
=
extend
({},
state
);
emphasisStyle
=
extend
({},
emphasisStyle
);
// Already being applied 'emphasis'. DON'T lift color multiple times.
emphasisStyle
.
fill
=
hasEmphasis
?
el
.
style
.
fill
:
liftColor
(
fromState
.
fill
as
ColorString
);
emphasisStyle
.
fill
=
liftColor
(
fromFill
as
ColorString
);
}
// Not highlight stroke if fill has been highlighted.
else
if
(
!
hasFillOrStroke
(
emphasisStyle
.
stroke
)
&&
has
StrokeInNormal
)
{
else
if
(
!
hasFillOrStroke
(
emphasisStyle
.
stroke
)
&&
has
FillOrStroke
(
fromStroke
)
)
{
if
(
!
cloned
)
{
state
=
extend
({},
state
);
emphasisStyle
=
extend
({},
emphasisStyle
);
}
emphasisStyle
.
stroke
=
hasEmphasis
?
el
.
style
.
stroke
:
liftColor
(
fromState
.
stroke
as
ColorString
);
emphasisStyle
.
stroke
=
liftColor
(
fromStroke
as
ColorString
);
}
state
.
style
=
emphasisStyle
;
}
...
...
@@ -275,11 +279,11 @@ function createBlurDefaultState(
return
state
;
}
function
elementStateProxy
(
this
:
Displayable
,
stateName
:
string
):
DisplayableState
{
function
elementStateProxy
(
this
:
Displayable
,
stateName
:
string
,
targetStates
?:
string
[]
):
DisplayableState
{
const
state
=
this
.
states
[
stateName
];
if
(
this
.
style
)
{
if
(
stateName
===
'
emphasis
'
)
{
return
createEmphasisDefaultState
(
this
,
stateName
,
state
);
return
createEmphasisDefaultState
(
this
,
stateName
,
targetStates
,
state
);
}
else
if
(
stateName
===
'
blur
'
)
{
return
createBlurDefaultState
(
this
,
stateName
,
state
);
...
...
@@ -669,4 +673,14 @@ export function isHighDownPayload(payload: Payload) {
const
payloadType
=
payload
.
type
;
return
payloadType
===
HIGHLIGHT_ACTION_TYPE
||
payloadType
===
DOWNPLAY_ACTION_TYPE
;
}
export
function
savePathStates
(
el
:
Path
)
{
const
store
=
getSavedStates
(
el
);
store
.
normalFill
=
el
.
style
.
fill
;
store
.
normalStroke
=
el
.
style
.
stroke
;
const
selectState
=
el
.
states
.
select
||
{};
store
.
selectFill
=
(
selectState
.
style
&&
selectState
.
style
.
fill
)
||
null
;
store
.
selectStroke
=
(
selectState
.
style
&&
selectState
.
style
.
stroke
)
||
null
;
}
\ No newline at end of file
src/util/types.ts
浏览文件 @
9c4a9e68
...
...
@@ -115,12 +115,6 @@ export interface ECElement extends Element {
z2EmphasisLift
?:
number
;
z2SelectLift
?:
number
;
// If has fill and stroke in normal state.
// It's used when calculating highlighted color in stateProxy.
hasFillInNormal
?:
boolean
;
hasStrokeInNormal
?:
boolean
;
/**
* Force disable animation on any condition
*/
...
...
test/dataSelect.html
浏览文件 @
9c4a9e68
...
...
@@ -29,6 +29,7 @@ under the License.
<script
src=
"lib/facePrint.js"
></script>
<script
src=
"lib/testHelper.js"
></script>
<script
src=
"data/basicChartsOptions.js"
></script>
<script
src=
"lib/dat.gui.min.js"
></script>
<!-- <script src="ut/lib/canteen.js"></script> -->
<link
rel=
"stylesheet"
href=
"lib/reset.css"
/>
</head>
...
...
@@ -126,10 +127,33 @@ under the License.
charts
.
push
(
chart
);
});
function
update
()
{
const
selectOpts
=
{
selectRed
:
false
}
function
update
()
{
allChartsOptions
.
forEach
(
function
(
chartOption
,
idx
)
{
chartOption
.
series
.
forEach
(
function
(
series
)
{
series
.
select
=
{
itemStyle
:
{
borderWidth
:
3
,
color
:
selectOpts
.
selectRed
?
'
#f00
'
:
null
},
lineStyle
:
{
color
:
selectOpts
.
selectRed
?
'
#f00
'
:
null
},
areaStyle
:
{
color
:
selectOpts
.
selectRed
?
'
#f00
'
:
null
}
}
});
charts
[
idx
].
setOption
(
chartOption
);
});
}
var
gui
=
new
dat
.
GUI
();
gui
.
add
(
selectOpts
,
'
selectRed
'
).
onChange
(
update
);
window
.
addEventListener
(
'
resize
'
,
function
()
{
charts
.
forEach
(
function
(
chart
)
{
chart
.
resize
();
...
...
test/hoverFocus.html
浏览文件 @
9c4a9e68
...
...
@@ -29,6 +29,7 @@ under the License.
<script
src=
"lib/facePrint.js"
></script>
<script
src=
"lib/testHelper.js"
></script>
<script
src=
"data/basicChartsOptions.js"
></script>
<script
src=
"lib/dat.gui.min.js"
></script>
<!-- <script src="ut/lib/canteen.js"></script> -->
<link
rel=
"stylesheet"
href=
"lib/reset.css"
/>
</head>
...
...
@@ -53,6 +54,9 @@ under the License.
box-shadow
:
0
0
10px
rgba
(
0
,
0
,
0
,
0.2
);
background
:
#fff
;
}
.dg.ac
{
text-align
:
left
;
}
</style>
...
...
@@ -79,9 +83,6 @@ under the License.
chartOption
.
series
.
forEach
(
function
(
series
)
{
series
.
emphasis
=
series
.
emphasis
||
{};
series
.
emphasis
.
focus
=
seriesFocusType
[
series
.
type
]
||
'
series
'
;
series
.
emphasis
.
lineStyle
=
{
// opacity: 0.02
}
if
(
series
.
renderItem
)
{
const
oldRenderItem
=
series
.
renderItem
;
...
...
@@ -120,10 +121,41 @@ under the License.
charts
.
push
(
chart
);
});
function
update
()
{
const
blurOpts
=
{
opacity
:
0.1
,
grayColor
:
false
}
function
update
()
{
allChartsOptions
.
forEach
(
function
(
chartOption
,
idx
)
{
chartOption
.
series
.
forEach
(
function
(
series
)
{
series
.
blur
=
{
itemStyle
:
{
color
:
blurOpts
.
grayColor
?
'
#aaa
'
:
null
,
opacity
:
blurOpts
.
opacity
},
lineStyle
:
{
color
:
blurOpts
.
grayColor
?
'
#aaa
'
:
null
,
opacity
:
blurOpts
.
opacity
},
areaStyle
:
{
color
:
blurOpts
.
grayColor
?
'
#aaa
'
:
null
,
opacity
:
blurOpts
.
opacity
},
label
:
{
color
:
blurOpts
.
grayColor
?
'
#aaa
'
:
null
,
opacity
:
blurOpts
.
opacity
}
}
});
charts
[
idx
].
setOption
(
chartOption
);
});
}
var
gui
=
new
dat
.
GUI
();
gui
.
add
(
blurOpts
,
'
opacity
'
,
0
,
1
).
onFinishChange
(
update
);
gui
.
add
(
blurOpts
,
'
grayColor
'
).
onChange
(
update
);
window
.
addEventListener
(
'
resize
'
,
function
()
{
charts
.
forEach
(
function
(
chart
)
{
chart
.
resize
();
...
...
test/pie-alignTo.html
浏览文件 @
9c4a9e68
...
...
@@ -207,8 +207,7 @@ under the License.
option
:
option2
});
var
gui
=
new
dat
.
GUI
({
});
var
gui
=
new
dat
.
GUI
();
var
config
=
{
length2
:
15
,
edgeDistance
:
20
,
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录