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 <zwl.s...@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-unsubscr...@echarts.apache.org For additional commands, e-mail: commits-h...@echarts.apache.org