From cffa3806a4392259a62fdb915d5b91bc71695377 Mon Sep 17 00:00:00 2001
From: Ovilia <zwl.sjtu@gmail.com>
Date: Wed, 25 Aug 2021 11:01:20 +0800
Subject: [PATCH] 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 9cabed1302..6103b32802 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 011fd69d83..853e3b8154 100644
--- a/test/line-animation.html
+++ b/test/line-animation.html
@@ -49,6 +49,8 @@
             }
         </style>
 
+        <div class="chart" id="main3"></div>
+
         <button onclick="change()">CHANGE</button>
         <div class="chart" id="main2"></div>
 
@@ -400,6 +402,42 @@ <h2>Label Animation with animationDelay callback</h2>
         </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