Fix/label layout margin

src/chart/pie/PieView.ts

@@ -25,7 +25,7 @@ import { setStatesStylesFromModel, toggleHoverEmphasis } from '../../util/states
 import ChartView from '../../view/Chart';
 import GlobalModel from '../../model/Global';
 import ExtensionAPI from '../../core/ExtensionAPI';
-import { Payload, ColorString, CircleLayoutOptionMixin, SeriesOption } from '../../util/types';
+import { Payload, ColorString } from '../../util/types';
 import SeriesData from '../../data/SeriesData';
 import PieSeriesModel, {PieDataItemOption} from './PieSeries';
 import labelLayout from './labelLayout';
@@ -197,7 +197,7 @@ class PiePiece extends graphic.Sector {
         sector.setTextConfig({
             // reset position, rotation
             position: null,
-            rotation: null
+            rotation: null,
         });
 
         // Make sure update style on labelText after setLabelStyle.

src/chart/pie/labelLayout.ts

@@ -27,7 +27,9 @@ import ZRText from 'zrender/src/graphic/Text';
 import BoundingRect, {RectLike} from 'zrender/src/core/BoundingRect';
 import { each, isNumber } from 'zrender/src/core/util';
 import { limitTurnAngle, limitSurfaceAngle } from '../../label/labelGuideHelper';
-import { shiftLayoutOnY } from '../../label/labelLayoutHelper';
+import {
+    computeLabelGeometry, LabelGeometry, shiftLayoutOnXY
+} from '../../label/labelLayoutHelper';
 
 const RADIAN = Math.PI / 180;
 
@@ -139,7 +141,7 @@ function adjustSingleSide(
         }
     }
 
-    if (shiftLayoutOnY(list, viewTop, viewTop + viewHeight)) {
+    if (shiftLayoutOnXY(list, 1, viewTop, viewTop + viewHeight)) {
         recalculateX(list);
     }
 }
@@ -212,7 +214,7 @@ function avoidOverlap(
             }
             layout.targetTextWidth = targetTextWidth;
 
-            constrainTextWidth(layout, targetTextWidth);
+            constrainTextWidth(layout, targetTextWidth, false);
         }
     }
 
@@ -267,7 +269,7 @@ function avoidOverlap(
 function constrainTextWidth(
     layout: LabelLayout,
     availableWidth: number,
-    forceRecalculate: boolean = false
+    forceRecalculate: boolean
 ) {
     if (layout.labelStyleWidth != null) {
         // User-defined style.width has the highest priority.
@@ -285,7 +287,7 @@ function constrainTextWidth(
     // textRect.width already contains paddingH if bgColor is set
     const oldOuterWidth = textRect.width + (bgColor ? 0 : paddingH);
     if (availableWidth < oldOuterWidth || forceRecalculate) {
-        const oldHeight = textRect.height;
+
         if (overflow && overflow.match('break')) {
             // Temporarily set background to be null to calculate
             // the bounding box without background.
@@ -325,14 +327,20 @@ function constrainTextWidth(
             label.setStyle('width', newWidth);
         }
 
-        const newRect = label.getBoundingRect();
-        textRect.width = newRect.width;
-        const margin = ((label.style.margin as number) || 0) + 2.1;
-        textRect.height = newRect.height + margin;
-        textRect.y -= (textRect.height - oldHeight) / 2;
+        computeLabelGlobalRect(textRect, label);
     }
 }
 
+function computeLabelGlobalRect(out: BoundingRect, label: ZRText): void {
+    _tmpLabelGeometry.rect = out;
+    computeLabelGeometry(_tmpLabelGeometry, label, _computeLabelGeometryOpt);
+}
+const _computeLabelGeometryOpt = {
+    minMarginForce: [null, 0, null, 0],
+    marginDefault: [1, 0, 1, 0], // Arbitrary value
+};
+const _tmpLabelGeometry: Partial<LabelGeometry> = {};
+
 function isPositionCenter(sectorShape: LabelLayout) {
     // Not change x for center label
     return sectorShape.position === 'center';
@@ -502,12 +510,9 @@ export default function pieLabelLayout(
 
         // Not sectorShape the inside label
         if (!isLabelInside) {
-            const textRect = label.getBoundingRect().clone();
-            textRect.applyTransform(label.getComputedTransform());
-            // Text has a default 1px stroke. Exclude this.
-            const margin = ((label.style.margin as number) || 0) + 2.1;
-            textRect.y -= margin / 2;
-            textRect.height += margin;
+
+            const textRect = new BoundingRect(0, 0, 0, 0);
+            computeLabelGlobalRect(textRect, label);
 
             labelLayoutList.push({
                 label,