From 55de79f167fcde587e06850987b4be5452502761 Mon Sep 17 00:00:00 2001
From: Ovilia <zwl.sjtu@gmail.com>
Date: Fri, 6 Sep 2019 17:29:48 +0800
Subject: [PATCH] feat: support expansion animation for data update; fix #11029

---
 src/chart/pie/PieSeries.js |   5 +-
 src/chart/pie/PieView.js   |  78 +++++++++++------
 test/pie-animation.html    | 169 +++++++++++++++++++++++++++++++++++++
 3 files changed, 227 insertions(+), 25 deletions(-)
 create mode 100644 test/pie-animation.html

diff --git a/src/chart/pie/PieSeries.js b/src/chart/pie/PieSeries.js
index 63035d62d9..42a44e61f9 100644
--- a/src/chart/pie/PieSeries.js
+++ b/src/chart/pie/PieSeries.js
@@ -170,9 +170,12 @@ var PieSeries = echarts.extendSeriesModel({
             borderWidth: 1
         },
 
-        // Animation type canbe expansion, scale
+        // Animation type. Valid values: expansion, scale
         animationType: 'expansion',
 
+        // Animation type when update. Valid values: transition, expansion
+        animationTypeUpdate: 'transition',
+
         animationEasing: 'cubicOut'
     }
 });
diff --git a/src/chart/pie/PieView.js b/src/chart/pie/PieView.js
index 1c06b7a8e3..b766c3d398 100644
--- a/src/chart/pie/PieView.js
+++ b/src/chart/pie/PieView.js
@@ -112,6 +112,8 @@ piePieceProto.updateData = function (data, idx, firstCreate) {
     var sectorShape = zrUtil.extend({}, layout);
     sectorShape.label = null;
 
+    var animationTypeUpdate = seriesModel.getShallow('animationTypeUpdate');
+
     if (firstCreate) {
         sector.setShape(sectorShape);
 
@@ -136,9 +138,15 @@ piePieceProto.updateData = function (data, idx, firstCreate) {
 
     }
     else {
-        graphic.updateProps(sector, {
-            shape: sectorShape
-        }, seriesModel, idx);
+        if (animationTypeUpdate === 'expansion') {
+            // Sectors are set to be target shape and an overlaying clipPath is used for animation
+            sector.setShape(sectorShape);
+        } else {
+            // Transition animation from the old shape
+            graphic.updateProps(sector, {
+                shape: sectorShape
+            }, seriesModel, idx);
+        }
     }
 
     // Update common style
@@ -167,7 +175,9 @@ piePieceProto.updateData = function (data, idx, firstCreate) {
         seriesModel.get('animation')
     );
 
-    this._updateLabel(data, idx);
+    // Label and text animation should be applied only for transition type animation when update
+    var withAnimation = !firstCreate && animationTypeUpdate === 'transition';
+    this._updateLabel(data, idx, withAnimation);
 
     this.highDownOnUpdate = (itemModel.get('hoverAnimation') && seriesModel.isAnimationEnabled())
         ? function (fromState, toState) {
@@ -201,7 +211,7 @@ piePieceProto.updateData = function (data, idx, firstCreate) {
     graphic.setHoverStyle(this);
 };
 
-piePieceProto._updateLabel = function (data, idx) {
+piePieceProto._updateLabel = function (data, idx, withAnimation) {
 
     var labelLine = this.childAt(1);
     var labelText = this.childAt(2);
@@ -218,20 +228,33 @@ piePieceProto._updateLabel = function (data, idx) {
         return;
     }
 
-    graphic.updateProps(labelLine, {
-        shape: {
-            points: labelLayout.linePoints || [
-                [labelLayout.x, labelLayout.y], [labelLayout.x, labelLayout.y], [labelLayout.x, labelLayout.y]
-            ]
-        }
-    }, seriesModel, idx);
+    var targetLineShape = {
+        points: labelLayout.linePoints || [
+            [labelLayout.x, labelLayout.y], [labelLayout.x, labelLayout.y], [labelLayout.x, labelLayout.y]
+        ]
+    };
+    var targetTextStyle = {
+        x: labelLayout.x,
+        y: labelLayout.y
+    };
+    if (withAnimation) {
+        graphic.updateProps(labelLine, {
+            shape: targetLineShape
+        }, seriesModel, idx);
+
+        graphic.updateProps(labelText, {
+            style: targetTextStyle
+        }, seriesModel, idx);
+    }
+    else {
+        labelLine.attr({
+            shape: targetLineShape
+        });
+        labelText.attr({
+            style: targetTextStyle
+        });
+    }
 
-    graphic.updateProps(labelText, {
-        style: {
-            x: labelLayout.x,
-            y: labelLayout.y
-        }
-    }, seriesModel, idx);
     labelText.attr({
         rotation: labelLayout.rotation,
         origin: [labelLayout.x, labelLayout.y],
@@ -309,6 +332,7 @@ var PieView = ChartView.extend({
         var hasAnimation = ecModel.get('animation');
         var isFirstRender = !oldData;
         var animationType = seriesModel.get('animationType');
+        var animationTypeUpdate = seriesModel.get('animationTypeUpdate');
 
         var onSectorClick = zrUtil.curry(
             updateDataSelected, this.uid, seriesModel, hasAnimation, api
@@ -334,6 +358,12 @@ var PieView = ChartView.extend({
             .update(function (newIdx, oldIdx) {
                 var piePiece = oldData.getItemGraphicEl(oldIdx);
 
+                if (!isFirstRender && animationTypeUpdate !== 'transition') {
+                    piePiece.eachChild(function (child) {
+                        child.stopAnimation(true);
+                    });
+                }
+
                 piePiece.updateData(data, newIdx);
 
                 piePiece.off('click');
@@ -348,9 +378,8 @@ var PieView = ChartView.extend({
             .execute();
 
         if (
-            hasAnimation && isFirstRender && data.count() > 0
-            // Default expansion animation
-            && animationType !== 'scale'
+            hasAnimation && data.count() > 0
+            && (isFirstRender ? animationType !== 'scale' : animationTypeUpdate !== 'transition')
         ) {
             var shape = data.getItemLayout(0);
             for (var s = 1; isNaN(shape.startAngle) && s < data.count(); ++s) {
@@ -361,7 +390,7 @@ var PieView = ChartView.extend({
 
             var removeClipPath = zrUtil.bind(group.removeClipPath, group);
             group.setClipPath(this._createClipPath(
-                shape.cx, shape.cy, r, shape.startAngle, shape.clockwise, removeClipPath, seriesModel
+                shape.cx, shape.cy, r, shape.startAngle, shape.clockwise, removeClipPath, seriesModel, isFirstRender
             ));
         }
         else {
@@ -375,7 +404,7 @@ var PieView = ChartView.extend({
     dispose: function () {},
 
     _createClipPath: function (
-        cx, cy, r, startAngle, clockwise, cb, seriesModel
+        cx, cy, r, startAngle, clockwise, cb, seriesModel, isFirstRender
     ) {
         var clipPath = new graphic.Sector({
             shape: {
@@ -389,7 +418,8 @@ var PieView = ChartView.extend({
             }
         });
 
-        graphic.initProps(clipPath, {
+        var initOrUpdate = isFirstRender ? graphic.initProps : graphic.updateProps;
+        initOrUpdate(clipPath, {
             shape: {
                 endAngle: startAngle + (clockwise ? 1 : -1) * Math.PI * 2
             }
diff --git a/test/pie-animation.html b/test/pie-animation.html
new file mode 100644
index 0000000000..679b50bbb8
--- /dev/null
+++ b/test/pie-animation.html
@@ -0,0 +1,169 @@
+<!--
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+   http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+-->
+
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <script src="lib/esl.js"></script>
+    <script src="lib/config.js"></script>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+</head>
+
+<body>
+    <style>
+        html,
+        body,
+        #main1,
+        #main2 {
+            width: 100%;
+            height: 250px;
+            margin: 0;
+        }
+
+        .test-title {
+            background: #146402;
+            padding: 10px;
+            color: #fff;
+        }
+
+        button {
+            padding: 10px 20px;
+            margin: 10px;
+        }
+    </style>
+
+    <div class="test-title">Animation: Transition from previous state to new state, in 10 seconds after clicking Go</div>
+    <button id="btn1">Go</button>
+    <div id="main1"></div>
+
+    <div class="test-title">Animation: Transition all over again, in 10 seconds after clicking Go</div>
+    <button id="btn2">Go</button>
+    <div id="main2"></div>
+
+    <script>
+
+        require([
+            'echarts'
+        ], function (echarts) {
+
+
+            var chart = echarts.init(
+                document.getElementById('main1'),
+                null,
+                {
+                    renderer: 'svg'
+                }
+            );
+            var data = [
+                {"name": "a1", "value": 92386},
+                {"name": "b1", "value": 90611},
+                {"name": "c1", "value": 12596},
+                {"name": "d1", "value": 9438},
+                {"name": "e1", "value": 10049}
+            ];
+            var data2 = [
+                {"name": "a1", "value": 120},
+                {"name": "b1", "value": 200},
+                {"name": "c1", "value": 300},
+                {"name": "x1", "value": 20},
+                {"name": "y1", "value": 30}
+            ];
+
+            var option = {
+                series: [{
+                    type: 'pie',
+                    animationDuration: 1000,
+                    animationDurationUpdate: 10000,
+                    startAngle: 0,
+                    endAngle: 360,
+                    radius: ['50%', '80%'],
+                    center: ['40%', '50%'],
+                    data: data
+                }]
+            };
+            chart.setOption(option);
+
+            document.getElementById('btn1').addEventListener('click', function () {
+                option.series[0].data = data2;
+                chart.setOption(option, true);
+            });
+        });
+
+    </script>
+
+
+
+
+
+    <script>
+
+        require([
+            'echarts'
+        ], function (echarts) {
+
+
+            var chart = echarts.init(
+                document.getElementById('main2'),
+                null,
+                {
+                    renderer: 'svg'
+                }
+            );
+            var data = [
+                {"name": "a1", "value": 92386},
+                {"name": "b1", "value": 90611},
+                {"name": "c1", "value": 12596},
+                {"name": "d1", "value": 9438},
+                {"name": "e1", "value": 10049}
+            ];
+            var data2 = [
+                {"name": "a1", "value": 120},
+                {"name": "b1", "value": 200},
+                {"name": "c1", "value": 300},
+                {"name": "x1", "value": 20},
+                {"name": "y1", "value": 30}
+            ];
+
+            var option = {
+                series: [{
+                    type: 'pie',
+                    animationType: 'expansion',
+                    animationDuration: 1000,
+                    animationDurationUpdate: 10000,
+                    animationTypeUpdate: 'expansion',
+                    startAngle: 0,
+                    endAngle: 360,
+                    radius: ['50%', '80%'],
+                    center: ['40%', '50%'],
+                    data: data
+                }]
+            };
+            chart.setOption(option);
+
+            document.getElementById('btn2').addEventListener('click', function () {
+                option.series[0].data = data2;
+                chart.setOption(option, true);
+            });
+        });
+
+    </script>
+</body>
+
+</html>
\ No newline at end of file