Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
半栈学徒
incubator-echarts
提交
74aefcee
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,发现更多精彩内容 >>
提交
74aefcee
编写于
7月 23, 2020
作者:
P
pissang
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat(timeline): improve icon and label color.
上级
33a8ec7a
变更
4
隐藏空白更改
内联
并排
Showing
4 changed file
with
42 addition
and
17 deletion
+42
-17
src/component/timeline/SliderTimelineModel.ts
src/component/timeline/SliderTimelineModel.ts
+17
-8
src/component/timeline/SliderTimelineView.ts
src/component/timeline/SliderTimelineView.ts
+14
-9
src/component/timeline/TimelineModel.ts
src/component/timeline/TimelineModel.ts
+6
-0
test/boxplot.html
test/boxplot.html
+5
-0
未找到文件。
src/component/timeline/SliderTimelineModel.ts
浏览文件 @
74aefcee
...
...
@@ -54,7 +54,7 @@ class SliderTimelineModel extends TimelineModel {
lineStyle
:
{
show
:
true
,
width
:
2
,
color
:
'
#
A4BED7
'
color
:
'
#
DAE1F5
'
},
label
:
{
// 文本标签
position
:
'
auto
'
,
// auto left right top bottom
...
...
@@ -66,10 +66,10 @@ class SliderTimelineModel extends TimelineModel {
rotate
:
0
,
// formatter: null,
// 其余属性默认使用全局文本样式,详见TEXTSTYLE
color
:
'
#A4B
E
D7
'
color
:
'
#A4B
1
D7
'
},
itemStyle
:
{
color
:
'
#A4B
E
D7
'
,
color
:
'
#A4B
1
D7
'
,
borderWidth
:
1
},
...
...
@@ -94,16 +94,22 @@ class SliderTimelineModel extends TimelineModel {
showPlayBtn
:
true
,
showPrevBtn
:
true
,
showNextBtn
:
true
,
itemSize
:
22
,
itemSize
:
24
,
itemGap
:
12
,
position
:
'
left
'
,
// 'left' 'right' 'top' 'bottom'
playIcon
:
'
path://M31.6,53C17.5,53,6,41.5,6,27.4S17.5,1.8,31.6,1.8C45.7,1.8,57.2,13.3,57.2,27.4S45.7,53,31.6,53z M31.6,3.3 C18.4,3.3,7.5,14.1,7.5,27.4c0,13.3,10.8,24.1,24.1,24.1C44.9,51.5,55.7,40.7,55.7,27.4C55.7,14.1,44.9,3.3,31.6,3.3z M24.9,21.3 c0-2.2,1.6-3.1,3.5-2l10.5,6.1c1.899,1.1,1.899,2.9,0,4l-10.5,6.1c-1.9,1.1-3.5,0.2-3.5-2V21.3z
'
,
// jshint ignore:line
stopIcon
:
'
path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z
'
,
// jshint ignore:line
nextIcon
:
'
path://M18.6,50.8l22.5-22.5c0.2-0.2,0.3-0.4,0.3-0.7c0-0.3-0.1-0.5-0.3-0.7L18.7,4.4c-0.1-0.1-0.2-0.3-0.2-0.5 c0-0.4,0.3-0.8,0.8-0.8c0.2,0,0.5,0.1,0.6,0.3l23.5,23.5l0,0c0.2,0.2,0.3,0.4,0.3,0.7c0,0.3-0.1,0.5-0.3,0.7l-0.1,0.1L19.7,52 c-0.1,0.1-0.3,0.2-0.5,0.2c-0.4,0-0.8-0.3-0.8-0.8C18.4,51.2,18.5,51,18.6,50.8z
'
,
// jshint ignore:line
prevIcon
:
'
path://M43,52.8L20.4,30.3c-0.2-0.2-0.3-0.4-0.3-0.7c0-0.3,0.1-0.5,0.3-0.7L42.9,6.4c0.1-0.1,0.2-0.3,0.2-0.5 c0-0.4-0.3-0.8-0.8-0.8c-0.2,0-0.5,0.1-0.6,0.3L18.3,28.8l0,0c-0.2,0.2-0.3,0.4-0.3,0.7c0,0.3,0.1,0.5,0.3,0.7l0.1,0.1L41.9,54 c0.1,0.1,0.3,0.2,0.5,0.2c0.4,0,0.8-0.3,0.8-0.8C43.2,53.2,43.1,53,43,52.8z
'
,
// jshint ignore:line
nextIcon
:
'
M2,18.5A1.52,1.52,0,0,1,.92,18a1.49,1.49,0,0,1,0-2.12L7.81,9.36,1,3.11A1.5,1.5,0,1,1,3,.89l8,7.34a1.48,1.48,0,0,1,.49,1.09,1.51,1.51,0,0,1-.46,1.1L3,18.08A1.5,1.5,0,0,1,2,18.5Z
'
,
// jshint ignore:line
prevIcon
:
'
M10,.5A1.52,1.52,0,0,1,11.08,1a1.49,1.49,0,0,1,0,2.12L4.19,9.64,11,15.89a1.5,1.5,0,1,1-2,2.22L1,10.77A1.48,1.48,0,0,1,.5,9.68,1.51,1.51,0,0,1,1,8.58L9,.92A1.5,1.5,0,0,1,10,.5Z
'
,
// jshint ignore:line
prevBtnSize
:
18
,
nextBtnSize
:
18
,
color
:
'
#A4B
E
D7
'
,
borderColor
:
'
#A4B
E
D7
'
,
color
:
'
#A4B
1
D7
'
,
borderColor
:
'
#A4B
1
D7
'
,
borderWidth
:
1
},
emphasis
:
{
...
...
@@ -130,6 +136,9 @@ class SliderTimelineModel extends TimelineModel {
},
itemStyle
:
{
color
:
'
#316BF3
'
},
label
:
{
color
:
'
#6f778d
'
}
},
...
...
src/component/timeline/SliderTimelineView.ts
浏览文件 @
74aefcee
...
...
@@ -30,7 +30,7 @@ import * as numberUtil from '../../util/number';
import
{
encodeHTML
}
from
'
../../util/format
'
;
import
GlobalModel
from
'
../../model/Global
'
;
import
ExtensionAPI
from
'
../../ExtensionAPI
'
;
import
{
merge
,
each
,
extend
,
clone
,
isString
,
bind
,
defaults
}
from
'
zrender/src/core/util
'
;
import
{
merge
,
each
,
extend
,
clone
,
isString
,
bind
,
defaults
,
retrieve2
}
from
'
zrender/src/core/util
'
;
import
SliderTimelineModel
from
'
./SliderTimelineModel
'
;
import
ComponentView
from
'
../../view/Component
'
;
import
{
LayoutOrient
,
ZRTextAlign
,
ZRTextVerticalAlign
,
ZRElementEvent
}
from
'
../../util/types
'
;
...
...
@@ -43,7 +43,7 @@ import OrdinalScale from '../../scale/Ordinal';
import
TimeScale
from
'
../../scale/Time
'
;
import
IntervalScale
from
'
../../scale/Interval
'
;
import
{
VectorArray
}
from
'
zrender/src/core/vector
'
;
import
ZRText
from
'
zrender/src/graphic/T
ext
'
;
import
{
parsePercent
}
from
'
zrender/src/contain/t
ext
'
;
const
PI
=
Math
.
PI
;
...
...
@@ -51,6 +51,7 @@ type TimelineSymbol = ReturnType<typeof createSymbol>;
type
RenderMethodName
=
'
_renderAxisLine
'
|
'
_renderAxisTick
'
|
'
_renderControl
'
|
'
_renderCurrentPointer
'
;
type
ControlName
=
'
play
'
|
'
stop
'
|
'
next
'
|
'
prev
'
;
type
ControlIconName
=
'
playIcon
'
|
'
stopIcon
'
|
'
nextIcon
'
|
'
prevIcon
'
;
interface
LayoutInfo
{
...
...
@@ -506,36 +507,40 @@ class SliderTimelineView extends TimelineView {
const
itemStyle
=
timelineModel
.
getModel
(
'
controlStyle
'
).
getItemStyle
();
const
hoverStyle
=
timelineModel
.
getModel
([
'
emphasis
'
,
'
controlStyle
'
]).
getItemStyle
();
const
rect
=
[
0
,
-
controlSize
/
2
,
controlSize
,
controlSize
];
const
playState
=
timelineModel
.
getPlayState
();
const
inverse
=
timelineModel
.
get
(
'
inverse
'
,
true
);
makeBtn
(
layoutInfo
.
nextBtnPosition
,
'
next
Icon
'
,
'
next
'
,
bind
(
this
.
_changeTimeline
,
this
,
inverse
?
'
-
'
:
'
+
'
)
);
makeBtn
(
layoutInfo
.
prevBtnPosition
,
'
prev
Icon
'
,
'
prev
'
,
bind
(
this
.
_changeTimeline
,
this
,
inverse
?
'
+
'
:
'
-
'
)
);
makeBtn
(
layoutInfo
.
playPosition
,
(
playState
?
'
stop
Icon
'
:
'
playIcon
'
),
(
playState
?
'
stop
'
:
'
play
'
),
bind
(
this
.
_handlePlayClick
,
this
,
!
playState
),
true
);
function
makeBtn
(
position
:
number
[],
icon
Path
:
ControlIcon
Name
,
icon
Name
:
Control
Name
,
onclick
:
()
=>
void
,
willRotate
?:
boolean
)
{
if
(
!
position
)
{
return
;
}
const
iconSize
=
parsePercent
(
retrieve2
(
timelineModel
.
get
([
'
controlStyle
'
,
iconName
+
'
BtnSize
'
as
any
]),
controlSize
),
controlSize
);
const
rect
=
[
0
,
-
iconSize
/
2
,
iconSize
,
iconSize
];
const
opt
=
{
position
:
position
,
origin
:
[
controlSize
/
2
,
0
],
...
...
@@ -544,7 +549,7 @@ class SliderTimelineView extends TimelineView {
style
:
itemStyle
,
onclick
:
onclick
};
const
btn
=
makeControlIcon
(
timelineModel
,
icon
Path
,
rect
,
opt
);
const
btn
=
makeControlIcon
(
timelineModel
,
icon
Name
+
'
Icon
'
as
ControlIconName
,
rect
,
opt
);
btn
.
ensureState
(
'
emphasis
'
).
style
=
hoverStyle
;
group
.
add
(
btn
);
enableHoverEmphasis
(
btn
);
...
...
@@ -704,7 +709,7 @@ class SliderTimelineView extends TimelineView {
tickSymbols
&&
tickSymbols
[
i
]
&&
tickSymbols
[
i
].
toggleState
(
'
progress
'
,
i
<
currentIndex
);
tickLabels
&&
tickLabels
[
i
]
&&
tickLabels
[
i
].
toggleState
(
'
progress
'
,
i
<
currentIndex
);
&&
tickLabels
[
i
].
toggleState
(
'
progress
'
,
i
<
=
currentIndex
);
}
}
}
...
...
src/component/timeline/TimelineModel.ts
浏览文件 @
74aefcee
...
...
@@ -52,6 +52,12 @@ export interface TimelineControlStyle extends ItemStyleOption {
stopIcon
?:
string
prevIcon
?:
string
nextIcon
?:
string
// Can be a percent value relative to itemSize
playBtnSize
:
number
|
string
stopBtnSize
:
number
|
string
nextBtnSize
:
number
|
string
prevBtnSize
:
number
|
string
}
export
interface
TimelineCheckpointStyle
extends
ItemStyleOption
,
...
...
test/boxplot.html
浏览文件 @
74aefcee
...
...
@@ -215,6 +215,11 @@ under the License.
]
}
},
{
name
:
'
outlier
'
,
type
:
'
scatter
'
,
data
:
data
.
outliers
}
]
});
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录