From 61ef71c4bf13e5d71011561773f658f567205308 Mon Sep 17 00:00:00 2001
From: susiwen8 <susiwen8@gmail.com>
Date: Sat, 19 Feb 2022 00:05:43 +0800
Subject: [PATCH 1/2] fix(labelLine): update labelLine `ignore`

---
 src/chart/pie/PieView.ts | 11 ++++++--
 test/pie-label.html      | 59 ++++++++++++++++++++++++++++++++++++++++
 2 files changed, 68 insertions(+), 2 deletions(-)

diff --git a/src/chart/pie/PieView.ts b/src/chart/pie/PieView.ts
index 9118f9267b..f4deb1282b 100644
--- a/src/chart/pie/PieView.ts
+++ b/src/chart/pie/PieView.ts
@@ -58,6 +58,7 @@ class PiePiece extends graphic.Sector {
         const seriesModel = data.hostModel as PieSeriesModel;
         const itemModel = data.getItemModel<PieDataItemOption>(idx);
         const emphasisModel = itemModel.getModel('emphasis');
+        const selectModel = itemModel.getModel('select');
         const layout = data.getItemLayout(idx) as graphic.Sector['shape'];
         // cornerRadius & innerCornerRadius doesn't exist in the item layout. Use `0` if null value is specified.
         // see `setItemLayout` in `pieLayout.ts`.
@@ -154,14 +155,20 @@ class PiePiece extends graphic.Sector {
         const labelLine = sector.getTextGuideLine();
         const labelText = sector.getTextContent();
 
+        labelLine && extend(labelLine.ensureState('emphasis'), {
+            ignore: !emphasisModel.get(['labelLine', 'show'])
+        });
+        
         labelLine && extend(labelLine.ensureState('select'), {
             x: dx,
-            y: dy
+            y: dy,
+            ignore: !selectModel.get(['labelLine', 'show'])
         });
         // TODO: needs dx, dy in zrender?
         extend(labelText.ensureState('select'), {
             x: dx,
-            y: dy
+            y: dy,
+            ignore: !selectModel.get(['label', 'show'])
         });
 
         toggleHoverEmphasis(
diff --git a/test/pie-label.html b/test/pie-label.html
index 0d1c0c4dbb..85541efd72 100644
--- a/test/pie-label.html
+++ b/test/pie-label.html
@@ -50,6 +50,7 @@
         <div id="main7"></div>
         <div id="main8"></div>
         <div id="main9"></div>
+        <div id="main10"></div>
 
 
         <script>
@@ -806,5 +807,63 @@
 
             });
         </script>
+
+        <script>
+            require([
+                'echarts'/*, 'map/js/china' */
+            ], function (echarts) {
+                const option = {
+                    series: [
+                        {
+                            name: "Access From",
+                            type: "pie",
+                            radius: "50%",
+                            data: [
+                                { value: 1048, name: "Search Engine" },
+                                { value: 735, name: "Direct" },
+                                { value: 580, name: "Email" },
+                                { value: 484, name: "Union Ads" },
+                                { value: 300, name: "Video Ads" },
+                            ],
+                        },
+                    ],
+                };
+            
+                var chart = testHelper.create(echarts, 'main10', {
+                    title: [
+                        'Label line should hide when emphasis after update the emphasis.labelLine',
+                        'also label should be hidden when sector was selected',
+                        'Test case from issue #16539',
+                    ],
+                    height: 300,
+                    option: option,
+                    button: [
+                        {
+                            text: 'Click to update options',
+                            onClick: () => {
+                                chart.setOption({
+                                    series: [
+                                        {
+                                            selectedMode: true,
+                                            emphasis: {
+                                                labelLine: {
+                                                    show: false,
+                                                },
+                                            },
+                                            select: {
+                                                label: {
+                                                    show: false,
+                                                }
+                                            }
+                                        },
+                                    ],
+                                })
+                            }
+                        }
+                    ]
+                });
+
+            });
+        </script>
     </body>
 </html>

From 291bf29dfa3a63f5b9e517d30c8a3052cb3ab126 Mon Sep 17 00:00:00 2001
From: susiwen8 <susiwen8@gmail.com>
Date: Thu, 24 Mar 2022 22:30:51 +0800
Subject: [PATCH 2/2] fix(labelLine): use correct state name

---
 src/chart/pie/PieView.ts      | 11 ++---------
 src/label/labelGuideHelper.ts |  2 +-
 2 files changed, 3 insertions(+), 10 deletions(-)

diff --git a/src/chart/pie/PieView.ts b/src/chart/pie/PieView.ts
index f4deb1282b..9118f9267b 100644
--- a/src/chart/pie/PieView.ts
+++ b/src/chart/pie/PieView.ts
@@ -58,7 +58,6 @@ class PiePiece extends graphic.Sector {
         const seriesModel = data.hostModel as PieSeriesModel;
         const itemModel = data.getItemModel<PieDataItemOption>(idx);
         const emphasisModel = itemModel.getModel('emphasis');
-        const selectModel = itemModel.getModel('select');
         const layout = data.getItemLayout(idx) as graphic.Sector['shape'];
         // cornerRadius & innerCornerRadius doesn't exist in the item layout. Use `0` if null value is specified.
         // see `setItemLayout` in `pieLayout.ts`.
@@ -155,20 +154,14 @@ class PiePiece extends graphic.Sector {
         const labelLine = sector.getTextGuideLine();
         const labelText = sector.getTextContent();
 
-        labelLine && extend(labelLine.ensureState('emphasis'), {
-            ignore: !emphasisModel.get(['labelLine', 'show'])
-        });
-        
         labelLine && extend(labelLine.ensureState('select'), {
             x: dx,
-            y: dy,
-            ignore: !selectModel.get(['labelLine', 'show'])
+            y: dy
         });
         // TODO: needs dx, dy in zrender?
         extend(labelText.ensureState('select'), {
             x: dx,
-            y: dy,
-            ignore: !selectModel.get(['label', 'show'])
+            y: dy
         });
 
         toggleHoverEmphasis(
diff --git a/src/label/labelGuideHelper.ts b/src/label/labelGuideHelper.ts
index c9a4b5bdb2..13008a7642 100644
--- a/src/label/labelGuideHelper.ts
+++ b/src/label/labelGuideHelper.ts
@@ -618,7 +618,7 @@ export function setLabelLineStyle(
             if (isLabelIgnored  // Not show when label is not shown in this state.
                 || !retrieve2(stateShow, showNormal) // Use normal state by default if not set.
             ) {
-                const stateObj = isNormal ? labelLine : (labelLine && labelLine.states.normal);
+                const stateObj = isNormal ? labelLine : (labelLine && labelLine.states[stateName]);
                 if (stateObj) {
                     stateObj.ignore = true;
                 }