refact(label): add minMargin for layouting. the original margin is renamed to edgeDistance

The new add config is minMargin instead of margin is for not breaking the previous code using margin.

src/chart/pie/PieSeries.ts

@@ -44,7 +44,7 @@ import List from '../../data/List';
 interface PieLabelOption extends Omit<LabelOption, 'rotate' | 'position'> {
     rotate?: number
     alignTo?: 'none' | 'labelLine' | 'edge'
-    margin?: string | number
+    edgeDistance?: string | number
     bleedMargin?: number
     distanceToLabelLine?: number
 
@@ -255,7 +255,7 @@ class PieSeriesModel extends SeriesModel<PieSeriesOption> {
             alignTo: 'none',
             // Closest distance between label and chart edge.
             // Works only position is 'outer' and alignTo is 'edge'.
-            margin: '25%',
+            edgeDistance: '25%',
             // Works only position is 'outer' and alignTo is not 'edge'.
             bleedMargin: 10,
             // Distance between text and label line.

src/chart/pie/labelLayout.ts

@@ -42,7 +42,7 @@ interface LabelLayout {
     textAlign: HorizontalAlign
     labelDistance: number,
     labelAlignTo: PieSeriesOption['label']['alignTo'],
-    labelMargin: number,
+    edgeDistance: number,
     bleedMargin: PieSeriesOption['label']['bleedMargin'],
     rect: BoundingRect
 }
@@ -178,10 +178,10 @@ function avoidOverlap(
             if (isAlignToEdge) {
                 if (label.x < cx) {
                     targetTextWidth = linePoints[2][0] - layout.labelDistance
-                            - viewLeft - layout.labelMargin;
+                            - viewLeft - layout.edgeDistance;
                 }
                 else {
-                    targetTextWidth = viewLeft + viewWidth - layout.labelMargin
+                    targetTextWidth = viewLeft + viewWidth - layout.edgeDistance
                             - linePoints[2][0] - layout.labelDistance;
                 }
             }
@@ -206,10 +206,10 @@ function avoidOverlap(
             const dist = linePoints[1][0] - linePoints[2][0];
             if (isAlignToEdge) {
                 if (label.x < cx) {
-                    linePoints[2][0] = viewLeft + layout.labelMargin + realTextWidth + layout.labelDistance;
+                    linePoints[2][0] = viewLeft + layout.edgeDistance + realTextWidth + layout.labelDistance;
                 }
                 else {
-                    linePoints[2][0] = viewLeft + viewWidth - layout.labelMargin
+                    linePoints[2][0] = viewLeft + viewWidth - layout.edgeDistance
                             - realTextWidth - layout.labelDistance;
                 }
             }
@@ -265,7 +265,7 @@ export default function (
         const labelPosition = labelModel.get('position') || itemModel.get(['emphasis', 'label', 'position']);
         const labelDistance = labelModel.get('distanceToLabelLine');
         const labelAlignTo = labelModel.get('alignTo');
-        const labelMargin = parsePercent(labelModel.get('margin'), viewWidth);
+        const edgeDistance = parsePercent(labelModel.get('edgeDistance'), viewWidth);
         const bleedMargin = labelModel.get('bleedMargin');
 
         const labelLineModel = itemModel.getModel('labelLine');
@@ -316,8 +316,8 @@ export default function (
                 if (labelAlignTo === 'edge') {
                     // Adjust textX because text align of edge is opposite
                     textX = dx < 0
-                        ? viewLeft + labelMargin
-                        : viewLeft + viewWidth - labelMargin;
+                        ? viewLeft + edgeDistance
+                        : viewLeft + viewWidth - edgeDistance;
                 }
                 else {
                     textX = x3 + (dx < 0 ? -labelDistance : labelDistance);
@@ -355,10 +355,11 @@ export default function (
             const textRect = label.getBoundingRect().clone();
             textRect.applyTransform(label.getComputedTransform());
             // Text has a default 1px stroke. Exclude this.
-            textRect.x -= 1;
-            textRect.y -= 1;
-            textRect.width += 2.1;
-            textRect.height += 2.1;
+            const margin = (label.style.margin || 0) + 2.1;
+            textRect.x -= margin / 2;
+            textRect.y -= margin / 2;
+            textRect.width += margin;
+            textRect.height += margin;
 
             labelLayoutList.push({
                 label,
@@ -371,7 +372,7 @@ export default function (
                 textAlign: textAlign,
                 labelDistance: labelDistance,
                 labelAlignTo: labelAlignTo,
-                labelMargin: labelMargin,
+                edgeDistance: edgeDistance,
                 bleedMargin: bleedMargin,
                 rect: textRect
             });

src/label/LabelManager.ts

@@ -45,7 +45,7 @@ import Transformable from 'zrender/src/core/Transformable';
 import { updateLabelLinePoints, setLabelLineStyle } from './labelGuideHelper';
 import SeriesModel from '../model/Series';
 import { makeInner } from '../util/model';
-import { retrieve2, each, keys, isFunction, filter, indexOf, map, guid } from 'zrender/src/core/util';
+import { retrieve2, each, keys, isFunction, filter, indexOf } from 'zrender/src/core/util';
 import { PathStyleProps } from 'zrender/src/graphic/Path';
 import Model from '../model/Model';
 import { prepareLayoutList, hideOverlap, shiftLayoutOnX, shiftLayoutOnY } from './labelLayoutHelper';

src/label/labelLayoutHelper.ts

@@ -57,14 +57,13 @@ export function prepareLayoutList(input: LabelLayoutListPrepareInput[]): LabelLa
             continue;
         }
 
-        const layoutOption = rawItem.computedLayoutOption;
         const label = rawItem.label;
         const transform = label.getComputedTransform();
         // NOTE: Get bounding rect after getComputedTransform, or label may not been updated by the host el.
         const localRect = label.getBoundingRect();
         const isAxisAligned = !transform || (transform[1] < 1e-5 && transform[2] < 1e-5);
 
-        const minMargin = layoutOption.minMargin || 0;
+        const minMargin = label.style.margin || 0;
         const globalRect = localRect.clone();
         globalRect.applyTransform(transform);
         globalRect.x -= minMargin / 2;

src/preprocessor/backwardCompat.ts

@@ -26,6 +26,7 @@ import { Dictionary } from 'zrender/src/core/types';
 import { ECUnitOption, SeriesOption } from '../util/types';
 import { __DEV__ } from '../config';
 import type { BarSeriesOption } from '../chart/bar/BarSeries';
+import { PieSeriesOption } from '../chart/pie/PieSeries';
 
 function get(opt: Dictionary<any>, path: string): any {
     const pathArr = path.split(',');
@@ -94,6 +95,18 @@ function compatBarItemStyle(option: Dictionary<any>) {
     }
 }
 
+function compatPieLabel(option: Dictionary<any>) {
+    if (!option) {
+        return;
+    }
+    if (option.alignTo === 'edge' && option.margin != null && option.edgeDistance == null) {
+        if (__DEV__) {
+            deprecateLog('label.margin has been changed to label.edgeDistance in pie.');
+        }
+        option.edgeDistance = option.margin;
+    }
+}
+
 export default function (option: ECUnitOption, isTheme?: boolean) {
     compatStyle(option, isTheme);
 
@@ -122,6 +135,13 @@ export default function (option: ECUnitOption, isTheme?: boolean) {
                 seriesOpt.clockwise = seriesOpt.clockWise;
                 deprecateLog('clockWise has been changed to clockwise.');
             }
+            compatPieLabel((seriesOpt as PieSeriesOption).label);
+            const data = seriesOpt.data;
+            if (data && !isTypedArray(data)) {
+                for (let i = 0; i < data.length; i++) {
+                    compatPieLabel(data[i]);
+                }
+            }
         }
         else if (seriesType === 'gauge') {
             const pointerColor = get(seriesOpt, 'pointer.color');
@@ -136,7 +156,7 @@ export default function (option: ECUnitOption, isTheme?: boolean) {
             const data = seriesOpt.data;
             if (data && !isTypedArray(data)) {
                 for (let i = 0; i < data.length; i++) {
-                    if (data[i]) {
+                    if (typeof data[i] === 'object') {
                         compatBarItemStyle(data[i]);
                         compatBarItemStyle(data[i] && data[i].emphasis);
                     }

src/util/graphic.ts

@@ -961,6 +961,10 @@ function setTextStyleCommon(
     if (overflow) {
         textStyle.overflow = overflow;
     }
+    const margin = textStyleModel.get('minMargin');
+    if (margin != null) {
+        textStyle.margin = margin;
+    }
 
     setTokenTextStyle(textStyle, textStyleModel, globalTextStyle, opt, isNotNormal, isAttached, true);
 }

src/util/types.ts

@@ -774,6 +774,12 @@ export interface LabelOption extends TextCommonOption {
     rotate?: number
     offset?: number[]
 
+    /**
+     * Min margin between labels. Used when label has layout.
+     */
+    // It's minMargin instead of margin is for not breaking the previous code using margin.
+    minMargin?: number
+
     overflow?: TextStyleProps['overflow']
     silent?: boolean
     precision?: number | 'auto'
@@ -851,12 +857,6 @@ export interface LabelLayoutOption {
      * @default 'none'
      */
     hideOverlap?: boolean
-
-    /**
-     * Minimal margin between two labels which will be considered as overlapped.
-     */
-    minMargin?: number
-
     /**
      * If label is draggable.
      */

test/label-layout.html

@@ -440,8 +440,7 @@ under the License.
                             draggable: true,
                             align: 'center',
                             moveOverlap: 'shift-x',
-                            hideOverlap: true,
-                            minMargin: 10
+                            hideOverlap: true
                         },
                         labelLine: {
                             show: true,
@@ -455,6 +454,7 @@ under the License.
                             formatter: function (param) {
                                 return param.data[3];
                             },
+                            minMargin: 10,
                             color: '#333',
                             textBorderColor: '#fff',
                             textBorderWidth: 1,
@@ -504,8 +504,7 @@ under the License.
                             x: 500,
                             draggable: true,
                             moveOverlap: 'shift-y',
-                            // hideOverlap: true,
-                            minMargin: 2
+                            // hideOverlap: true
                         },
                         labelLine: {
                             show: true,
@@ -521,7 +520,8 @@ under the License.
                             },
                             textBorderColor: '#fff',
                             textBorderWidth: 1,
-                            position: 'top'
+                            position: 'top',
+                            minMargin: 2
                         }
                     }]
                 };

test/pie-alignTo.html

@@ -73,7 +73,7 @@ under the License.
                         length2: 15
                     },
                     label: {
-                        margin: 20,
+                        edgeDistance: 20,
                         position: 'outer'
                     }
                 }]
@@ -89,7 +89,7 @@ under the License.
                         length2: 15
                     },
                     label: {
-                        margin: 20,
+                        edgeDistance: 20,
                         position: 'outer',
                         alignTo: 'labelLine'
                     }
@@ -106,7 +106,7 @@ under the License.
                         length2: 15
                     },
                     label: {
-                        margin: 20,
+                        edgeDistance: 20,
                         position: 'outer',
                         alignTo: 'edge'
                     }
@@ -141,7 +141,7 @@ under the License.
                         length2: 15
                     },
                     label: {
-                        margin: 20,
+                        edgeDistance: 20,
                         position: 'outer',
                         alignTo: 'labelLine'
                     },
@@ -176,7 +176,7 @@ under the License.
                         length2: 15
                     },
                     label: {
-                        margin: 20,
+                        edgeDistance: 20,
                         position: 'outer',
                         alignTo: 'labelLine'
                     },
@@ -211,7 +211,7 @@ under the License.
             });
             var config = {
                 length2: 15,
-                margin: 20,
+                edgeDistance: 20,
                 overflow: 'truncate'
             };
 
@@ -222,7 +222,7 @@ under the License.
                             length2: config.length2
                         },
                         label: {
-                            margin: config.margin,
+                            edgeDistance: config.edgeDistance,
                             overflow: config.overflow
                         }
                     }]
@@ -238,7 +238,7 @@ under the License.
                             length2: config.length2,
                         },
                         label: {
-                            margin: config.margin,
+                            edgeDistance: config.edgeDistance,
                             overflow: config.overflow
                         }
                     })
@@ -247,7 +247,7 @@ under the License.
             }
 
             gui.add(config, 'length2', 0, 300).onChange(update);
-            gui.add(config, 'margin', 0, 300).onChange(update);
+            gui.add(config, 'edgeDistance', 0, 300).onChange(update);
             gui.add(config, 'overflow', ['truncate', 'break', 'breakAll']).onChange(update);
         });
         </script>

test/pie-label-mobile.html

@@ -121,9 +121,9 @@ under the License.
                         label: {
                             alignTo: 'edge',
                             formatter: '{name|{b}}\n{time|{c} 小时}',
-                            margin: 10,
+                            minMargin: 5,
+                            edgeDistance: 10,
                             lineHeight: 15,
-                            // color: 'inherit',
                             rich: {
                                 time: {
                                     fontSize: 10,