From 8ee3fed524f6562cda9399688f58a4872bb9629b Mon Sep 17 00:00:00 2001
From: pissang <bm2736892@gmail.com>
Date: Sun, 22 Aug 2021 14:38:38 +0800
Subject: [PATCH] fix(bar): optimize label distance when using round cap

---
 src/chart/bar/BarView.ts  |  8 +++--
 src/label/sectorLabel.ts  | 72 +++++++++++++++++++++++----------------
 test/bar-polar-label.html |  5 ++-
 3 files changed, 53 insertions(+), 32 deletions(-)

diff --git a/src/chart/bar/BarView.ts b/src/chart/bar/BarView.ts
index b948582bd7..faa4adb8dc 100644
--- a/src/chart/bar/BarView.ts
+++ b/src/chart/bar/BarView.ts
@@ -755,14 +755,18 @@ const elementCreator: {
         const ShapeClass = (!isRadial && roundCap) ? Sausage : Sector;
 
         const sector = new ShapeClass({
-            shape: defaults({clockwise: clockwise}, layout),
+            shape: defaults({
+                clockwise: clockwise
+            }, layout),
             z2: 1
         });
 
         sector.name = 'item';
 
         const positionMap = createPolarPositionMapping(isRadial);
-        sector.calculateTextPosition = createSectorCalculateTextPosition<PolarBarLabelPosition>(positionMap);
+        sector.calculateTextPosition = createSectorCalculateTextPosition(positionMap, {
+            isRoundCap: ShapeClass === Sausage
+        });
 
         // Animation
         if (animationModel) {
diff --git a/src/label/sectorLabel.ts b/src/label/sectorLabel.ts
index ba75e03b20..6ed74d2b3a 100644
--- a/src/label/sectorLabel.ts
+++ b/src/label/sectorLabel.ts
@@ -24,8 +24,18 @@ export type SectorLike = {
 };
 
 export function createSectorCalculateTextPosition<T extends (string | (number | string)[])>(
-    positionMapping: (seriesLabelPosition: T) => SectorTextPosition
+    positionMapping: (seriesLabelPosition: T) => SectorTextPosition,
+    opts?: {
+        /**
+         * If has round cap on two ends. If so, label should have an extra offset
+         */
+        isRoundCap?: boolean
+    }
 ): ElementCalculateTextPosition {
+
+    opts = opts || {};
+    const isRoundCap = opts.isRoundCap;
+
     return function (
         this: Sector,
         out: TextPositionCalculationResult,
@@ -57,82 +67,86 @@ export function createSectorCalculateTextPosition<T extends (string | (number |
         const startAngle = sector.startAngle;
         const endAngle = sector.endAngle;
         const middleAngle = (startAngle + endAngle) / 2;
+        const extraDist = isRoundCap ? Math.abs(r - r0) / 2 : 0;
+
+        const mathCos = Math.cos;
+        const mathSin = Math.sin;
 
         // base position: top-left
-        let x = cx + r * Math.cos(startAngle);
-        let y = cy + r * Math.sin(startAngle);
+        let x = cx + r * mathCos(startAngle);
+        let y = cy + r * mathSin(startAngle);
 
         let textAlign: TextAlign = 'left';
         let textVerticalAlign: TextVerticalAlign = 'top';
 
         switch (mappedSectorPosition) {
             case 'startArc':
-                x = cx + (r0 - distance) * Math.cos(middleAngle);
-                y = cy + (r0 - distance) * Math.sin(middleAngle);
+                x = cx + (r0 - distance) * mathCos(middleAngle);
+                y = cy + (r0 - distance) * mathSin(middleAngle);
                 textAlign = 'center';
                 textVerticalAlign = 'top';
                 break;
 
             case 'insideStartArc':
-                x = cx + (r0 + distance) * Math.cos(middleAngle);
-                y = cy + (r0 + distance) * Math.sin(middleAngle);
+                x = cx + (r0 + distance) * mathCos(middleAngle);
+                y = cy + (r0 + distance) * mathSin(middleAngle);
                 textAlign = 'center';
                 textVerticalAlign = 'bottom';
                 break;
 
             case 'startAngle':
-                x = cx + middleR * Math.cos(startAngle)
-                    + adjustAngleDistanceX(startAngle, distance, false);
-                y = cy + middleR * Math.sin(startAngle)
-                    + adjustAngleDistanceY(startAngle, distance, false);
+                x = cx + middleR * mathCos(startAngle)
+                    + adjustAngleDistanceX(startAngle, distance + extraDist, false);
+                y = cy + middleR * mathSin(startAngle)
+                    + adjustAngleDistanceY(startAngle, distance + extraDist, false);
                 textAlign = 'right';
                 textVerticalAlign = 'middle';
                 break;
 
             case 'insideStartAngle':
-                x = cx + middleR * Math.cos(startAngle)
-                    + adjustAngleDistanceX(startAngle, -distance, false);
-                y = cy + middleR * Math.sin(startAngle)
-                    + adjustAngleDistanceY(startAngle, -distance, false);
+                x = cx + middleR * mathCos(startAngle)
+                    + adjustAngleDistanceX(startAngle, -distance + extraDist, false);
+                y = cy + middleR * mathSin(startAngle)
+                    + adjustAngleDistanceY(startAngle, -distance + extraDist, false);
                 textAlign = 'left';
                 textVerticalAlign = 'middle';
                 break;
 
             case 'middle':
-                x = cx + middleR * Math.cos(middleAngle);
-                y = cy + middleR * Math.sin(middleAngle);
+                x = cx + middleR * mathCos(middleAngle);
+                y = cy + middleR * mathSin(middleAngle);
                 textAlign = 'center';
                 textVerticalAlign = 'middle';
                 break;
 
             case 'endArc':
-                x = cx + (r + distance) * Math.cos(middleAngle);
-                y = cy + (r + distance) * Math.sin(middleAngle);
+                x = cx + (r + distance) * mathCos(middleAngle);
+                y = cy + (r + distance) * mathSin(middleAngle);
                 textAlign = 'center';
                 textVerticalAlign = 'bottom';
                 break;
 
             case 'insideEndArc':
-                x = cx + (r - distance) * Math.cos(middleAngle);
-                y = cy + (r - distance) * Math.sin(middleAngle);
+                x = cx + (r - distance) * mathCos(middleAngle);
+                y = cy + (r - distance) * mathSin(middleAngle);
                 textAlign = 'center';
                 textVerticalAlign = 'top';
                 break;
 
             case 'endAngle':
-                x = cx + middleR * Math.cos(endAngle)
-                    + adjustAngleDistanceX(endAngle, distance, true);
-                y = cy + middleR * Math.sin(endAngle)
-                    + adjustAngleDistanceY(endAngle, distance, true);
+                x = cx + middleR * mathCos(endAngle)
+                    + adjustAngleDistanceX(endAngle, distance + extraDist, true);
+                y = cy + middleR * mathSin(endAngle)
+                    + adjustAngleDistanceY(endAngle, distance + extraDist, true);
                 textAlign = 'left';
                 textVerticalAlign = 'middle';
                 break;
 
             case 'insideEndAngle':
-                x = cx + middleR * Math.cos(endAngle)
-                    + adjustAngleDistanceX(endAngle, -distance, true);
-                y = cy + middleR * Math.sin(endAngle)
-                    + adjustAngleDistanceY(endAngle, -distance, true);
+                x = cx + middleR * mathCos(endAngle)
+                    + adjustAngleDistanceX(endAngle, -distance + extraDist, true);
+                y = cy + middleR * mathSin(endAngle)
+                    + adjustAngleDistanceY(endAngle, -distance + extraDist, true);
                 textAlign = 'right';
                 textVerticalAlign = 'middle';
                 break;
diff --git a/test/bar-polar-label.html b/test/bar-polar-label.html
index 85b4f9e80e..0f6a1c5bd6 100644
--- a/test/bar-polar-label.html
+++ b/test/bar-polar-label.html
@@ -27,7 +27,7 @@
     </head>
     <body>
         <style>
-            #main0, #main1 {
+            #main0, #main1, #main2 {
                 width: 100%;
                 height: 1200px;
                 margin: 20px 0;
@@ -36,6 +36,7 @@
         <h3>Polar bar series label positions</h3>
         <div id="main0"></div>
         <div id="main1"></div>
+        <div id="main2"></div>
         <script>
 
             require(['echarts'], function (echarts) {
@@ -93,6 +94,7 @@ <h3>Polar bar series label positions</h3>
                                 ],
                                 coordinateSystem: 'polar',
                                 polarIndex: id,
+                                roundCap: chartIndex === 2,
                                 label: {
                                     show: true,
                                     position: positions[id],
@@ -125,6 +127,7 @@ <h3>Polar bar series label positions</h3>
 
                 setChart(0);
                 setChart(1);
+                setChart(2);
             });
         </script>
     </body>