You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by ov...@apache.org on 2021/08/25 03:02:20 UTC
[echarts] 01/01: fix(line): fix line chart animation #15581
This is an automated email from the ASF dual-hosted git repository.
ovilia pushed a commit to branch fix-line-animation
in repository https://gitbox.apache.org/repos/asf/echarts.git
commit cffa3806a4392259a62fdb915d5b91bc71695377
Author: Ovilia <zw...@gmail.com>
AuthorDate: Wed Aug 25 11:01:20 2021 +0800
fix(line): fix line chart animation #15581
---
src/chart/line/LineView.ts | 15 ++++++++++++---
test/line-animation.html | 38 ++++++++++++++++++++++++++++++++++++++
2 files changed, 50 insertions(+), 3 deletions(-)
diff --git a/src/chart/line/LineView.ts b/src/chart/line/LineView.ts
index 9cabed1..6103b32 100644
--- a/src/chart/line/LineView.ts
+++ b/src/chart/line/LineView.ts
@@ -691,9 +691,18 @@ class LineView extends ChartView {
}
// Update clipPath
- lineGroup.setClipPath(
- createLineClipPath(this, coordSys, false, seriesModel)
- );
+ const oldClipPath = lineGroup.getClipPath();
+ if (oldClipPath) {
+ const newClipPath = createLineClipPath(this, coordSys, false, seriesModel);
+ graphic.initProps(oldClipPath, {
+ shape: newClipPath.shape
+ }, seriesModel);
+ }
+ else {
+ lineGroup.setClipPath(
+ createLineClipPath(this, coordSys, true, seriesModel)
+ );
+ }
// Always update, or it is wrong in the case turning on legend
// because points are not changed
diff --git a/test/line-animation.html b/test/line-animation.html
index 011fd69..853e3b8 100644
--- a/test/line-animation.html
+++ b/test/line-animation.html
@@ -49,6 +49,8 @@ under the License.
}
</style>
+ <div class="chart" id="main3"></div>
+
<button onclick="change()">CHANGE</button>
<div class="chart" id="main2"></div>
@@ -400,6 +402,42 @@ under the License.
</script>
+ <script>
+
+ require([
+ 'echarts'
+ ], function (echarts) {
+ var chart = echarts.init(document.getElementById('main3'), null, {
+ renderer: 'svg'
+ });
+ option = {
+ xAxis: {
+ type: 'category',
+ boundaryGap: false,
+ data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+ },
+ yAxis: {
+ type: 'value'
+ },
+ series: [{
+ data: [820, 932, 901, 934, 1290, 1330, 1320],
+ type: 'line',
+ areaStyle: {}
+ }],
+ animationDuration: 5000,
+ animationDurationUpdate: 5000
+ };
+
+ chart.setOption(option);
+
+ setTimeout(function() {
+ chart.setOption(option);
+ }, 1000);
+
+ });
+
+ </script>
+
</body>
</html>
\ No newline at end of file
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org