From 08f8ffc06a474015bd7f086fb5c32d96c853662f Mon Sep 17 00:00:00 2001
From: Ovilia <zwl.sjtu@gmail.com>
Date: Mon, 3 Sep 2018 18:53:36 +0800
Subject: [PATCH] fix(pie): remove clipPath for expansion animation #8994

---
 src/chart/pie/PieView.js |   4 ++
 test/pie-clipPath.html   | 101 +++++++++++++++++++++++++++++++++++++++
 2 files changed, 105 insertions(+)
 create mode 100644 test/pie-clipPath.html
diff --git a/src/chart/pie/PieView.js b/src/chart/pie/PieView.js
index 84697f598..199ec243e 100644
--- a/src/chart/pie/PieView.js
+++ b/src/chart/pie/PieView.js
@@ -365,6 +365,10 @@ var PieView = ChartView.extend({
                 shape.cx, shape.cy, r, shape.startAngle, shape.clockwise, removeClipPath, seriesModel
             ));
         }
+        else {
+            // clipPath is used in first-time animation, so remove it when otherwise. See: #8994
+            group.removeClipPath();
+        }
 
         this._data = data;
     },
diff --git a/test/pie-clipPath.html b/test/pie-clipPath.html
new file mode 100644
index 000000000..a8d1832ed
--- /dev/null
+++ b/test/pie-clipPath.html
@@ -0,0 +1,101 @@
+<!--
+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>
+        <script src="data/pie-texture.js"></script>
+        <script src="lib/dat.gui.min.js"></script>
+        <link rel="stylesheet" href="lib/reset.css" />
+        <script src="lib/testHelper.js"></script>
+    </head>
+    <body>
+        <style>
+        </style>
+
+        <div id="main" style="width:100%;height:100%;"></div>
+
+        <script>
+            var chart;
+            require([
+                'echarts'
+                // 'echarts/chart/pie',
+                // 'echarts/component/legend',
+                // 'echarts/component/grid',
+                // 'echarts/component/tooltip',
+                // 'echarts/component/toolbox'
+            ], function (echarts) {
+
+                chart = echarts.init(document.getElementById('main'), null, {
+                    renderer: 'svg'
+                });
+
+                window.onresize = chart.resize;
+
+                chart.setOption({
+                    animation: 'auto',
+                    animationDuration: () => 0,
+                    title : {
+                        text: '某站点用户访问来源',
+                        subtext: '纯属虚构',
+                        x:'center'
+                    },
+                    tooltip : {
+                        trigger: 'item',
+                        formatter: "{a} <br/>{b} : {c} ({d}%)"
+                    },
+                    legend: {
+                        orient: 'vertical',
+                        left: 'left',
+                        data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
+                    },
+                    series : [
+                        {
+                            name: '访问来源',
+                            type: 'pie',
+                            radius : '55%',
+                            center: ['50%', '60%'],
+                            data:[
+                                {value:335, name:'直接访问'},
+                                {value:310, name:'邮件营销'},
+                                {value:234, name:'联盟广告'},
+                                {value:135, name:'视频广告'},
+                                {value:1548, name:'搜索引擎'}
+                            ],
+                            itemStyle: {
+                                emphasis: {
+                                    shadowBlur: 10,
+                                    shadowOffsetX: 0,
+                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
+                                }
+                            }
+                        }
+                    ]
+                });
+            })
+
+        </script>
+
+
+
+
+    </body>
+</html>
\ No newline at end of file
-- 
GitLab

