Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
x649585723
incubator-echarts
提交
f57a88fb
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,体验更适合开发者的 AI 搜索 >>
提交
f57a88fb
编写于
10月 19, 2020
作者:
P
pissang
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat(gauge): add value animation in gauge
上级
c3587358
变更
3
隐藏空白更改
内联
并排
Showing
3 changed file
with
71 addition
and
17 deletion
+71
-17
src/chart/gauge/GaugeSeries.ts
src/chart/gauge/GaugeSeries.ts
+14
-2
src/chart/gauge/GaugeView.ts
src/chart/gauge/GaugeView.ts
+53
-15
src/util/model.ts
src/util/model.ts
+4
-0
未找到文件。
src/chart/gauge/GaugeSeries.ts
浏览文件 @
f57a88fb
...
@@ -77,6 +77,11 @@ interface TitleOption extends LabelOption {
...
@@ -77,6 +77,11 @@ interface TitleOption extends LabelOption {
*/
*/
offsetCenter
?:
(
number
|
string
)[]
offsetCenter
?:
(
number
|
string
)[]
formatter
?:
LabelFormatter
|
string
formatter
?:
LabelFormatter
|
string
/**
* If do value animtion.
*/
valueAnimation
?:
boolean
}
}
interface
DetailOption
extends
LabelOption
{
interface
DetailOption
extends
LabelOption
{
...
@@ -85,6 +90,11 @@ interface DetailOption extends LabelOption {
...
@@ -85,6 +90,11 @@ interface DetailOption extends LabelOption {
*/
*/
offsetCenter
?:
(
number
|
string
)[]
offsetCenter
?:
(
number
|
string
)[]
formatter
?:
LabelFormatter
|
string
formatter
?:
LabelFormatter
|
string
/**
* If do value animtion.
*/
valueAnimation
?:
boolean
}
}
export
interface
GaugeStateOption
{
export
interface
GaugeStateOption
{
...
@@ -273,7 +283,8 @@ class GaugeSeriesModel extends SeriesModel<GaugeSeriesOption> {
...
@@ -273,7 +283,8 @@ class GaugeSeriesModel extends SeriesModel<GaugeSeriesOption> {
offsetCenter
:
[
0
,
'
20%
'
],
offsetCenter
:
[
0
,
'
20%
'
],
// 其余属性默认使用全局文本样式,详见TEXTSTYLE
// 其余属性默认使用全局文本样式,详见TEXTSTYLE
color
:
'
#464646
'
,
color
:
'
#464646
'
,
fontSize
:
16
fontSize
:
16
,
valueAnimation
:
true
},
},
detail
:
{
detail
:
{
show
:
true
,
show
:
true
,
...
@@ -290,7 +301,8 @@ class GaugeSeriesModel extends SeriesModel<GaugeSeriesOption> {
...
@@ -290,7 +301,8 @@ class GaugeSeriesModel extends SeriesModel<GaugeSeriesOption> {
color
:
'
#464646
'
,
color
:
'
#464646
'
,
fontSize
:
30
,
fontSize
:
30
,
fontWeight
:
'
bold
'
,
fontWeight
:
'
bold
'
,
lineHeight
:
30
lineHeight
:
30
,
valueAnimation
:
true
}
}
};
};
}
}
...
...
src/chart/gauge/GaugeView.ts
浏览文件 @
f57a88fb
...
@@ -20,16 +20,17 @@
...
@@ -20,16 +20,17 @@
import
PointerPath
from
'
./PointerPath
'
;
import
PointerPath
from
'
./PointerPath
'
;
import
*
as
graphic
from
'
../../util/graphic
'
;
import
*
as
graphic
from
'
../../util/graphic
'
;
import
{
setStatesStylesFromModel
,
enableHoverEmphasis
}
from
'
../../util/states
'
;
import
{
setStatesStylesFromModel
,
enableHoverEmphasis
}
from
'
../../util/states
'
;
import
{
createTextStyle
}
from
'
../../label/labelStyle
'
;
import
{
createTextStyle
,
setLabelValueAnimation
,
animateLabelValue
}
from
'
../../label/labelStyle
'
;
import
ChartView
from
'
../../view/Chart
'
;
import
ChartView
from
'
../../view/Chart
'
;
import
{
parsePercent
,
round
,
linearMap
}
from
'
../../util/number
'
;
import
{
parsePercent
,
round
,
linearMap
}
from
'
../../util/number
'
;
import
GaugeSeriesModel
,
{
GaugeDataItemOption
}
from
'
./GaugeSeries
'
;
import
GaugeSeriesModel
,
{
GaugeDataItemOption
}
from
'
./GaugeSeries
'
;
import
GlobalModel
from
'
../../model/Global
'
;
import
GlobalModel
from
'
../../model/Global
'
;
import
ExtensionAPI
from
'
../../ExtensionAPI
'
;
import
ExtensionAPI
from
'
../../ExtensionAPI
'
;
import
{
ColorString
,
ECElement
}
from
'
../../util/types
'
;
import
{
ColorString
,
ECElement
,
ParsedValue
}
from
'
../../util/types
'
;
import
List
from
'
../../data/List
'
;
import
List
from
'
../../data/List
'
;
import
Sausage
from
'
../../util/shape/sausage
'
;
import
Sausage
from
'
../../util/shape/sausage
'
;
import
{
createSymbol
}
from
'
../../util/symbol
'
;
import
{
createSymbol
}
from
'
../../util/symbol
'
;
import
{
labeledStatement
}
from
'
@babel/types
'
;
interface
PosInfo
{
interface
PosInfo
{
cx
:
number
cx
:
number
...
@@ -74,7 +75,10 @@ class GaugeView extends ChartView {
...
@@ -74,7 +75,10 @@ class GaugeView extends ChartView {
type
=
GaugeView
.
type
;
type
=
GaugeView
.
type
;
private
_data
:
List
;
private
_data
:
List
;
private
_progressData
:
graphic
.
Path
[];
private
_progressEls
:
graphic
.
Path
[];
private
_titleEls
:
graphic
.
Text
[];
private
_detailEls
:
graphic
.
Text
[];
render
(
seriesModel
:
GaugeSeriesModel
,
ecModel
:
GlobalModel
,
api
:
ExtensionAPI
)
{
render
(
seriesModel
:
GaugeSeriesModel
,
ecModel
:
GlobalModel
,
api
:
ExtensionAPI
)
{
...
@@ -86,6 +90,8 @@ class GaugeView extends ChartView {
...
@@ -86,6 +90,8 @@ class GaugeView extends ChartView {
this
.
_renderMain
(
this
.
_renderMain
(
seriesModel
,
ecModel
,
api
,
colorList
,
posInfo
seriesModel
,
ecModel
,
api
,
colorList
,
posInfo
);
);
this
.
_data
=
seriesModel
.
getData
();
}
}
dispose
()
{}
dispose
()
{}
...
@@ -330,7 +336,7 @@ class GaugeView extends ChartView {
...
@@ -330,7 +336,7 @@ class GaugeView extends ChartView {
const
group
=
this
.
group
;
const
group
=
this
.
group
;
const
oldData
=
this
.
_data
;
const
oldData
=
this
.
_data
;
const
oldProgressData
=
this
.
_progress
Data
;
const
oldProgressData
=
this
.
_progress
Els
;
const
progressList
=
[]
as
graphic
.
Path
[];
const
progressList
=
[]
as
graphic
.
Path
[];
const
showPointer
=
seriesModel
.
get
([
'
pointer
'
,
'
show
'
]);
const
showPointer
=
seriesModel
.
get
([
'
pointer
'
,
'
show
'
]);
...
@@ -491,8 +497,7 @@ class GaugeView extends ChartView {
...
@@ -491,8 +497,7 @@ class GaugeView extends ChartView {
}
}
});
});
this
.
_data
=
data
;
this
.
_progressEls
=
progressList
;
this
.
_progressData
=
progressList
;
}
}
}
}
...
@@ -536,6 +541,25 @@ class GaugeView extends ChartView {
...
@@ -536,6 +541,25 @@ class GaugeView extends ChartView {
const
contentGroup
=
new
graphic
.
Group
();
const
contentGroup
=
new
graphic
.
Group
();
const
newTitleEls
:
graphic
.
Text
[]
=
[];
const
newDetailEls
:
graphic
.
Text
[]
=
[];
const
hasAnimation
=
seriesModel
.
isAnimationEnabled
();
data
.
diff
(
this
.
_data
)
.
add
((
idx
)
=>
{
newTitleEls
[
idx
]
=
new
graphic
.
Text
({
silent
:
true
});
newDetailEls
[
idx
]
=
new
graphic
.
Text
({
silent
:
true
});
})
.
update
((
idx
,
oldIdx
)
=>
{
newTitleEls
[
idx
]
=
this
.
_titleEls
[
oldIdx
];
newDetailEls
[
idx
]
=
this
.
_detailEls
[
oldIdx
];
})
.
execute
();
data
.
each
(
function
(
idx
)
{
data
.
each
(
function
(
idx
)
{
const
itemModel
=
data
.
getItemModel
<
GaugeDataItemOption
>
(
idx
);
const
itemModel
=
data
.
getItemModel
<
GaugeDataItemOption
>
(
idx
);
const
value
=
data
.
get
(
valueDim
,
idx
)
as
number
;
const
value
=
data
.
get
(
valueDim
,
idx
)
as
number
;
...
@@ -549,8 +573,8 @@ class GaugeView extends ChartView {
...
@@ -549,8 +573,8 @@ class GaugeView extends ChartView {
const
titleOffsetCenter
=
itemTitleModel
.
get
(
'
offsetCenter
'
);
const
titleOffsetCenter
=
itemTitleModel
.
get
(
'
offsetCenter
'
);
const
titleX
=
posInfo
.
cx
+
parsePercent
(
titleOffsetCenter
[
0
],
posInfo
.
r
);
const
titleX
=
posInfo
.
cx
+
parsePercent
(
titleOffsetCenter
[
0
],
posInfo
.
r
);
const
titleY
=
posInfo
.
cy
+
parsePercent
(
titleOffsetCenter
[
1
],
posInfo
.
r
);
const
titleY
=
posInfo
.
cy
+
parsePercent
(
titleOffsetCenter
[
1
],
posInfo
.
r
);
itemGroup
.
add
(
new
graphic
.
Text
({
const
labelEl
=
newTitleEls
[
idx
];
silent
:
true
,
labelEl
.
attr
({
style
:
createTextStyle
(
itemTitleModel
,
{
style
:
createTextStyle
(
itemTitleModel
,
{
x
:
titleX
,
x
:
titleX
,
y
:
titleY
,
y
:
titleY
,
...
@@ -558,7 +582,13 @@ class GaugeView extends ChartView {
...
@@ -558,7 +582,13 @@ class GaugeView extends ChartView {
align
:
'
center
'
,
align
:
'
center
'
,
verticalAlign
:
'
middle
'
verticalAlign
:
'
middle
'
},
{
inheritColor
:
autoColor
})
},
{
inheritColor
:
autoColor
})
}));
});
setLabelValueAnimation
(
labelEl
,
{
normal
:
itemTitleModel
},
seriesModel
.
getRawValue
(
idx
)
as
ParsedValue
,
()
=>
data
.
getName
(
idx
)
);
hasAnimation
&&
animateLabelValue
(
labelEl
,
idx
,
data
,
seriesModel
);
itemGroup
.
add
(
labelEl
);
}
}
const
itemDetailModel
=
itemModel
.
getModel
(
'
detail
'
);
const
itemDetailModel
=
itemModel
.
getModel
(
'
detail
'
);
...
@@ -571,26 +601,34 @@ class GaugeView extends ChartView {
...
@@ -571,26 +601,34 @@ class GaugeView extends ChartView {
const
detailColor
=
(
const
detailColor
=
(
seriesModel
.
get
([
'
progress
'
,
'
show
'
])
?
data
.
getItemVisual
(
idx
,
'
style
'
).
fill
:
autoColor
seriesModel
.
get
([
'
progress
'
,
'
show
'
])
?
data
.
getItemVisual
(
idx
,
'
style
'
).
fill
:
autoColor
)
as
string
;
)
as
string
;
itemGroup
.
add
(
new
graphic
.
Text
({
const
labelEl
=
newDetailEls
[
idx
];
silent
:
true
,
const
formatter
=
itemDetailModel
.
get
(
'
formatter
'
);
labelEl
.
attr
({
style
:
createTextStyle
(
itemDetailModel
,
{
style
:
createTextStyle
(
itemDetailModel
,
{
x
:
detailX
,
x
:
detailX
,
y
:
detailY
,
y
:
detailY
,
text
:
formatLabel
(
text
:
formatLabel
(
value
,
formatter
),
value
,
itemDetailModel
.
get
(
'
formatter
'
)
),
width
:
isNaN
(
width
)
?
null
:
width
,
width
:
isNaN
(
width
)
?
null
:
width
,
height
:
isNaN
(
height
)
?
null
:
height
,
height
:
isNaN
(
height
)
?
null
:
height
,
align
:
'
center
'
,
align
:
'
center
'
,
verticalAlign
:
'
middle
'
verticalAlign
:
'
middle
'
},
{
inheritColor
:
detailColor
})
},
{
inheritColor
:
detailColor
})
}));
});
setLabelValueAnimation
(
labelEl
,
{
normal
:
itemTitleModel
},
seriesModel
.
getRawValue
(
idx
)
as
ParsedValue
,
(
value
:
number
)
=>
formatLabel
(
value
,
formatter
)
);
hasAnimation
&&
animateLabelValue
(
labelEl
,
idx
,
data
,
seriesModel
);
itemGroup
.
add
(
labelEl
);
}
}
contentGroup
.
add
(
itemGroup
);
contentGroup
.
add
(
itemGroup
);
});
});
this
.
group
.
add
(
contentGroup
);
this
.
group
.
add
(
contentGroup
);
this
.
_titleEls
=
newTitleEls
;
this
.
_detailEls
=
newDetailEls
;
}
}
}
}
...
...
src/util/model.ts
浏览文件 @
f57a88fb
...
@@ -1011,6 +1011,10 @@ export function interpolateRawValues(
...
@@ -1011,6 +1011,10 @@ export function interpolateRawValues(
):
(
string
|
number
)[]
|
string
|
number
{
):
(
string
|
number
)[]
|
string
|
number
{
const
isAutoPrecision
=
precision
==
null
||
precision
===
'
auto
'
;
const
isAutoPrecision
=
precision
==
null
||
precision
===
'
auto
'
;
if
(
targetValue
==
null
)
{
return
targetValue
;
}
if
(
typeof
targetValue
===
'
number
'
)
{
if
(
typeof
targetValue
===
'
number
'
)
{
const
value
=
interpolateNumber
(
const
value
=
interpolateNumber
(
sourceValue
as
number
||
0
,
sourceValue
as
number
||
0
,
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录