Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
missman
incubator-echarts
提交
ecaf64e7
I
incubator-echarts
项目概览
missman
/
incubator-echarts
与 Fork 源项目一致
从无法访问的项目Fork
通知
2
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,发现更多精彩内容 >>
提交
ecaf64e7
编写于
9月 24, 2015
作者:
L
lang
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
Improve line animation
上级
23023d3c
变更
3
隐藏空白更改
内联
并排
Showing
3 changed file
with
96 addition
and
72 deletion
+96
-72
src/chart/line/LineView.js
src/chart/line/LineView.js
+56
-33
src/chart/line/lineAnimationDiff.js
src/chart/line/lineAnimationDiff.js
+36
-36
src/coord/cartesian/Cartesian2D.js
src/coord/cartesian/Cartesian2D.js
+4
-3
未找到文件。
src/chart/line/LineView.js
浏览文件 @
ecaf64e7
...
...
@@ -38,33 +38,37 @@ define(function(require) {
var
lineStyleNormalModel
=
seriesModel
.
getModel
(
'
itemStyle.normal.lineStyle
'
);
var
points
=
data
.
map
(
data
.
getItemLayout
,
true
);
var
p
ointsWithName
=
data
.
map
(
function
(
idx
)
{
var
p
lainDataList
=
data
.
map
([
'
x
'
,
'
y
'
],
function
(
x
,
y
,
idx
)
{
return
{
// TODO Use category names if possible
name
:
data
.
getRawIndex
(
idx
),
point
:
points
[
idx
]
x
:
x
,
y
:
y
,
point
:
points
[
idx
],
name
:
data
.
getName
(
idx
),
idx
:
idx
,
rawIdx
:
data
.
getRawIndex
(
idx
)
};
});
var
coordinateSystem
=
seriesModel
.
coordinateSystem
;
var
isCoordinateSystemPolar
=
coordinateSystem
.
type
===
'
polar
'
;
var
prevCoordSys
=
this
.
_coordSys
var
coordSys
=
seriesModel
.
coordinateSystem
;
var
isCoordSysPolar
=
coordSys
.
type
===
'
polar
'
;
// FIXME Update after animation
if
(
isCoordinateSystem
Polar
&&
points
.
length
>
2
&&
coordinateSystem
.
getAngleAxis
().
type
===
'
category
'
)
{
// Close polyline
points
.
push
(
Array
.
prototype
.
slice
.
call
(
points
[
0
]));
}
//
if (
// isCoordSys
Polar
//
&& points.length > 2
//
&& coordinateSystem.getAngleAxis().type === 'category'
//
) {
//
// Close polyline
//
points.push(Array.prototype.slice.call(points[0]));
//
}
// Draw symbols, enable animation on the first draw
var
dataSymbol
=
this
.
_dataSymbol
;
dataSymbol
.
z
=
seriesModel
.
get
(
'
z
'
)
+
1
;
// Initialization animation
if
(
!
this
.
_data
)
{
// Initialization animation
or coordinate system changed
if
(
!
this
.
_data
||
prevCoordSys
.
type
!==
coordSys
.
type
)
{
dataSymbol
.
updateData
(
data
,
false
);
var
polyline
=
new
api
.
Polyline
({
...
...
@@ -80,11 +84,11 @@ define(function(require) {
)
});
var
removeClipPath
=
zrUtil
.
bind
(
polyline
.
removeClipPath
,
polyline
);
//
var removeClipPath = zrUtil.bind(polyline.removeClipPath, polyline);
var
clipPath
=
isCoord
inateSystem
Polar
?
this
.
_createPolarClipShape
(
coord
inateSystem
,
api
,
removeClipPath
)
:
this
.
_createGridClipShape
(
coord
inateSystem
,
api
,
removeClipPath
);
var
clipPath
=
isCoord
Sys
Polar
?
this
.
_createPolarClipShape
(
coord
Sys
,
api
)
:
this
.
_createGridClipShape
(
coord
Sys
,
api
);
polyline
.
setClipPath
(
clipPath
);
...
...
@@ -96,8 +100,10 @@ define(function(require) {
dataSymbol
.
updateData
(
data
,
false
);
// In the case data zoom triggerred refreshing frequently
// Data may not change if line has a category axis. So it should animate nothing
if
(
!
isPointsSame
(
this
.
_pointsWithName
,
pointsWithName
))
{
this
.
_updateAnimation
(
data
,
pointsWithName
);
if
(
!
isPointsSame
(
this
.
_plainDataList
,
plainDataList
))
{
this
.
_updateAnimation
(
data
,
plainDataList
,
coordSys
);
}
// Add back
group
.
add
(
this
.
_polyline
);
...
...
@@ -105,12 +111,15 @@ define(function(require) {
this
.
_data
=
data
;
this
.
_pointsWithName
=
pointsWithName
;
this
.
_plainDataList
=
plainDataList
;
this
.
_coordSys
=
coordSys
;
},
_updateAnimation
:
function
(
data
,
p
ointsWithName
)
{
_updateAnimation
:
function
(
data
,
p
lainDataList
,
coordSys
)
{
var
polyline
=
this
.
_polyline
;
var
diff
=
lineAnimationDiff
(
this
.
_pointsWithName
,
pointsWithName
);
var
diff
=
lineAnimationDiff
(
this
.
_plainDataList
,
plainDataList
,
this
.
_coordSys
,
coordSys
);
polyline
.
shape
.
points
=
diff
.
current
;
polyline
.
animateTo
({
shape
:
{
...
...
@@ -118,25 +127,39 @@ define(function(require) {
}
},
300
,
'
cubicOut
'
);
var
updatedDataIndices
=
[];
var
updatedDataInfo
=
[];
var
addedDataIndices
=
[];
var
diffStatus
=
diff
.
status
;
var
data
=
this
.
_dataSymbol
.
getData
();
for
(
var
i
=
0
;
i
<
diffStatus
.
length
;
i
++
)
{
if
(
diffStatus
[
i
]
===
'
=
'
)
{
updatedDataIndices
.
push
(
i
);
var
cmd
=
diffStatus
[
i
].
cmd
;
if
(
cmd
===
'
=
'
)
{
updatedDataInfo
.
push
({
el
:
data
.
getItemGraphicEl
(
diffStatus
[
i
].
idx1
),
ptIdx
:
i
// Index of points
});
}
else
if
(
cmd
===
'
+
'
)
{
addedDataIndices
.
push
(
diffStatus
[
i
].
idx
);
}
}
if
(
polyline
.
animators
)
{
for
(
var
i
=
0
;
i
<
addedDataIndices
.
length
;
i
++
)
{
var
el
=
data
.
getItemGraphicEl
(
addedDataIndices
[
i
]);
var
oldScale
=
el
.
scale
;
el
.
scale
=
[
1
,
1
];
el
.
animateTo
({
scale
:
oldScale
},
300
,
300
,
'
cubicOut
'
);
}
polyline
.
animators
[
0
].
during
(
function
()
{
// Symbol elements may be more than updatedDataIndices if there is new added data
for
(
var
i
=
0
;
i
<
updatedDataIndices
.
length
;
i
++
)
{
var
el
=
data
.
getItemGraphicEl
(
i
);
for
(
var
i
=
0
;
i
<
updatedDataInfo
.
length
;
i
++
)
{
var
el
=
updatedDataInfo
[
i
].
el
;
vector
.
copy
(
el
.
position
,
// synchronizing with the point on line
polyline
.
shape
.
points
[
updatedDataIn
dices
[
i
]
]
polyline
.
shape
.
points
[
updatedDataIn
fo
[
i
].
ptIdx
]
);
el
.
dirty
();
}
...
...
src/chart/line/lineAnimationDiff.js
浏览文件 @
ecaf64e7
...
...
@@ -6,22 +6,21 @@ define(function (require) {
return
a
.
name
===
b
.
name
;
}
return
function
(
oldData
,
newData
)
{
return
function
(
oldData
,
newData
,
oldCoordSys
,
newCoordSys
)
{
var
oldPoints
=
[];
var
newPoints
=
[];
var
status
=
[];
var
sortedIndices
=
[];
var
rawIndices
=
[];
// FIXME One data ?
var
diff
=
arrayDiff
(
oldData
,
newData
,
nameCompare
);
var
prevDiffNotRemove
;
var
diffCount
=
diff
.
length
;
for
(
var
i
=
0
;
i
<
diffCount
;
i
++
)
{
for
(
var
i
=
0
;
i
<
diff
.
length
;
i
++
)
{
var
diffItem
=
diff
[
i
];
status
.
push
(
diffItem
.
cmd
);
status
.
push
(
diffItem
);
// FIXME, animation is not so perfect when dataZoom window moves fast
// Which is in case remvoing or add more than one data in the tail or head
...
...
@@ -29,44 +28,45 @@ define(function (require) {
case
'
=
'
:
oldPoints
.
push
(
oldData
[
diffItem
.
idx
].
point
);
newPoints
.
push
(
newData
[
diffItem
.
idx1
].
point
);
prevDiffNotRemove
=
diffItem
;
rawIndices
.
push
(
newData
[
diffItem
.
idx1
].
rawIdx
)
;
break
;
case
'
+
'
:
// Like growing from sibling data animation
// var siblingData = newData[diffItem.idx + 1] || newData[diffItem.idx - 1];
// Keep static
oldPoints
.
push
(
newData
[
diffItem
.
idx
].
point
);
newPoints
.
push
(
newData
[
diffItem
.
idx
].
point
);
prevDiffNotRemove
=
diffItem
;
var
newDataItem
=
newData
[
diffItem
.
idx
];
oldPoints
.
push
(
oldCoordSys
.
dataToPoint
([
newDataItem
.
x
,
newDataItem
.
y
]));
newPoints
.
push
(
newDataItem
.
point
);
rawIndices
.
push
(
newDataItem
.
rawIdx
);
break
;
case
'
-
'
:
// Like merging into sibling data animation
var
siblingDiffNotRemove
=
prevDiffNotRemove
;
if
(
!
siblingDiffNotRemove
)
{
// If first element is removing, Find next diff which is not removing
for
(
var
k
=
i
+
1
;
k
<
diffCount
;
k
++
)
{
if
(
diff
[
k
].
cmd
!==
'
-
'
)
{
siblingDiffNotRemove
=
diff
[
k
];
break
;
}
}
}
var
siblingDataNotRemove
=
newData
[
siblingDiffNotRemove
.
cmd
===
'
+
'
?
siblingDiffNotRemove
.
idx
:
siblingDiffNotRemove
.
idx1
];
oldPoints
.
push
(
oldData
[
diffItem
.
idx
].
point
);
// oldPoints.push(siblingDataNotRemove.point);
newPoints
.
push
(
siblingDataNotRemove
.
point
);
var
oldDataItem
=
oldData
[
diffItem
.
idx
];
oldPoints
.
push
(
oldDataItem
.
point
);
newPoints
.
push
(
newCoordSys
.
dataToPoint
([
oldDataItem
.
x
,
oldDataItem
.
y
]));
rawIndices
.
push
(
oldDataItem
.
rawIdx
);
}
// Original indices
sortedIndices
.
push
(
i
);
}
// Diff result may be crossed if all items are changed
// Sort by data index
sortedIndices
.
sort
(
function
(
a
,
b
)
{
return
rawIndices
[
a
]
-
rawIndices
[
b
];
});
var
sortedOldPoints
=
[];
var
sortedNewPoints
=
[];
var
sortedStatus
=
[];
for
(
var
i
=
0
;
i
<
sortedIndices
.
length
;
i
++
)
{
var
oldIndex
=
sortedIndices
[
i
];
sortedOldPoints
[
i
]
=
oldPoints
[
oldIndex
];
sortedNewPoints
[
i
]
=
newPoints
[
oldIndex
];
sortedStatus
[
i
]
=
status
[
oldIndex
];
}
return
{
current
:
o
ldPoints
,
next
:
n
ewPoints
,
status
:
status
current
:
sortedO
ldPoints
,
next
:
sortedN
ewPoints
,
status
:
s
ortedS
tatus
};
}
});
\ No newline at end of file
src/coord/cartesian/Cartesian2D.js
浏览文件 @
ecaf64e7
...
...
@@ -38,12 +38,13 @@ define(function(require) {
/**
* @param {Array.<number>} data
* @param {boolean} [clamp=false]
* @return {Array.<number>}
*/
dataToPoint
:
function
(
data
)
{
dataToPoint
:
function
(
data
,
clamp
)
{
return
[
this
.
getAxis
(
'
x
'
).
dataToCoord
(
data
[
0
]),
this
.
getAxis
(
'
y
'
).
dataToCoord
(
data
[
1
])
this
.
getAxis
(
'
x
'
).
dataToCoord
(
data
[
0
]
,
clamp
),
this
.
getAxis
(
'
y
'
).
dataToCoord
(
data
[
1
]
,
clamp
)
];
},
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录