feat(labelMargin): uniform minMargin and textMargin.

Author: 100pah

en/option/component/geo-common.md

@@ -241,7 +241,7 @@ Selected mode decides whether multiple selecting is supported. By default, `fals
 {{ use: partial-label(
     prefix = "#" + ${prefix},
     formatter = true,
-    minMargin = ${labelMinMargin}
+    labelMargin = ${labelMargin}
 ) }}
 
 #${prefix} itemStyle(Object)

en/option/partial/label.md

@@ -51,16 +51,11 @@ See: [label rotation](${galleryEditorPath}bar-label-rotation).
 
 Whether to move text slightly. For example: `[30, 40]` means move `30` horizontally and move `40` vertically.
 
-{{ if: ${minMargin} }}
-#${prefix} minMargin(number)
-
-{{ use: partial-version(
-    version = "5.0.0"
+{{ use: partial-label-margin(
+    prefix = ${prefix},
+    labelMargin = ${labelMargin}
 ) }}
 
-Minimal margin between labels. Used when label has [layout](~series.labelLayout).
-{{ /if }}
-
 {{ if: ${formatter} }}
 #${prefix} formatter(string|Function)
 
@@ -93,6 +88,59 @@ Minimal margin between labels. Used when label has [layout](~series.labelLayout)
 
 
 
+
+{{ target: partial-label-margin }}
+{{ if: ${labelMargin} }}
+#${prefix} textMargin(number|Array)
+
+{{ use: partial-version(
+    version = "6.0.0"
+) }}
+
+The space around the label to escape from overlapping. The unit is px.
+
+Notice: `textMargin` is applied on the label's local bounding rect, that is, if there is a `rotate` specified on the label, apply `textMargin` on the non-rotated label first, and then apply the rotation.
+
+> The name is `textMargin` because historically the name `margin` has been used for a different purpose.
+
+
+Examples:
+```ts
+// Set margin to be 5, means [5, 5, 5, 5]
+textMargin: 5
+// Set the top and bottom margin to be 5, and left and right margin to be 10
+textMargin: [5, 10]
+// Set each of the four margin separately
+textMargin: [
+    5,  // up
+    10, // right
+    5,  // down
+    10, // left
+]
+```
+
+#${prefix} minMargin(number)
+
+{{ use: partial-version(
+    version = "5.0.0"
+) }}
+
+Minimal margin between labels. Used when label has [layout](~series.labelLayout).
+
+`minMargin` conveys a similar meaning to `textMargin`, but with a different nuance. If unsure, just use `textMargin`; it basically covers `minMargin` and can provide a more compact layout for rotated labels in some scenarios.
+
+> TL;DR: The difference:
+> + The minimal gap (if applicable) between two labels is `label1.minMargin/2 + label2.minMargin/2`, or `label1.textMargin[number] + label2.textMargin[number]`.
+> + If `rotate` is specified on a label,
+>     + `minMargin`: first rotate the label, forming a new rect by the min/max of x/y from the four corner points (that is a expanded bounding rect), and finally `minMargin` is applied on the new rect.
+>     + `textMargin`: first applied on the label's local bounding rect, and then rotate.
+> + Data type: `minMargin` should be only `number`, `textMargin` can be `number | number[]` (follow CSS margin).
+{{ /if }}
+
+
+
+
+
 {{ target: partial-label-position }}
 
 Label position.

en/option/series/bar.md

@@ -332,7 +332,7 @@ Label style configurations of single data.
     defaultPosition = "'inside'",
     noPosition = true,
     formatter = ${topLevel},
-    minMargin = ${state} === 'normal'
+    labelMargin = ${state} === 'normal'
 ) }}
 
 ##${prefix} position(string|Array) = 'inside'

en/option/series/effectScatter.md

@@ -104,7 +104,7 @@ The brush type for ripples. options: `'stroke'` and `'fill'`.
     prefix = "##",
     defaultPosition = "'inside'",
     formatter = true,
-    minMargin = true
+    labelMargin = true
 ) }}
 
 ## labelLine(Object)
@@ -220,7 +220,7 @@ Configurations of select state. Available when [selectedMode](~series-effectScat
 {{ use: partial-label(
     prefix = "###",
     defaultPosition = "inside",
-    minMargin = true
+    labelMargin = true
 ) }}
 
 ### labelLine(Object)

en/option/series/funnel.md

@@ -88,7 +88,7 @@ Horizontal align. Defaults to align center. Can be 'left', 'right', 'center'.
     prefix = "##",
     position = true,
     formatter = true,
-    minMargin = true
+    labelMargin = true
 ) }}
 
 ## labelLine(Object)
@@ -221,7 +221,7 @@ The label configuration of a single data item.
     prefix = "###",
     position = true,
     formatter = false,
-    minMargin = true
+    labelMargin = true
 ) }}
 
 ### labelLine(Object)
@@ -344,15 +344,12 @@ Label position.
 [labelLine](~series-funnel.labelLine) can be used to guide to the corresponding trapezoid when label is not inside.
 {{ /if }}
 
-{{ if: ${minMargin} }}
-#${prefix} minMargin(number)
 
-{{ use: partial-version(
-    version = "5.0.0"
+{{ use: partial-label-margin(
+    prefix = ${prefix},
+    labelMargin = ${labelMargin}
 ) }}
 
-Minimal margin between labels. Used when label has [layout](~series-funnel.labelLayout).
-{{ /if }}
 
 {{ if: ${formatter} }}
 #${prefix} formatter(string|Function)

en/option/series/graph.md

@@ -210,7 +210,7 @@ The style of edge line. [lineStyle.color](~series-graph.lineStyle.color) can be
     prefix = "##",
     defaultPosition = "'inside'",
     formatter = true,
-    minMargin = true
+    labelMargin = true
 ) }}
 
 ## edgeLabel(Object)
@@ -434,7 +434,7 @@ The label style of this node.
 
 {{ use: partial-label(
     prefix = "###",
-    minMargin = true
+    labelMargin = true
 ) }}
 
 ### emphasis(Object)

en/option/series/heatmap.md

@@ -58,7 +58,7 @@ Work for [coordinateSystem](~series-heatmap.coordinateSystem): 'cartesian2d'.
 {{ use: partial-label(
     prefix = "##",
     defaultPosition = "inside",
-    minMargin = true
+    labelMargin = true
 ) }}
 
 ## labelLayout(Object|Function)
@@ -166,7 +166,7 @@ It is valid with [coordinateSystem](~series-heatmap.coordinateSystem) of 'cartes
 {{ use: partial-label(
     prefix = "###",
     defaultPosition = "inside",
-    minMargin = true
+    labelMargin = true
 ) }}
 
 ### itemStyle(Object)

en/option/series/line.md

@@ -131,7 +131,7 @@ See the example using different `step` options:
     prefix = "##",
     defaultPosition = "'top'",
     formatter = true,
-    minMargin = true
+    labelMargin = true
 ) }}
 
 ## endLabel(Object)
@@ -146,7 +146,7 @@ Label on the end of line.
     prefix = "##",
     formatter = true,
     noPosition = true,
-    minMargin = true
+    labelMargin = true
 ) }}
 
 ### valueAnimation(boolean)
@@ -371,7 +371,7 @@ The style of the text of single data point.
 {{ use: partial-label(
     prefix = "###",
     defaultPosition = "top",
-    minMargin = true
+    labelMargin = true
 ) }}
 
 ### labelLine(Object)

en/option/series/lines.md

@@ -133,7 +133,7 @@ Label settings. Does not work when [polyline](~series-lines.polyline) is `true`.
 
 {{ use: lines-label(
     prefix = "##",
-    minMargin = true
+    labelMargin = true
 ) }}
 
 ## labelLayout(Object|Function)
@@ -232,7 +232,7 @@ Label of a single line. Available when [polyline](~series-lines.polyline) is not
 
 {{ use: lines-label(
     prefix = "###",
-    minMargin = true
+    labelMargin = true
 ) }}
 
 ### emphasis(Object)
@@ -317,15 +317,12 @@ the position of label, options:
 + `'middle'`
 + `'end'`
 
-{{ if: ${minMargin} }}
-#${prefix} minMargin(number)
 
-{{ use: partial-version(
-    version = "5.0.0"
+{{ use: partial-label-margin(
+    prefix = ${prefix},
+    labelMargin = ${labelMargin}
 ) }}
 
-Minimal margin between labels. Used when label has [layout](~series-lines.labelLayout).
-{{ /if }}
 
 #${prefix} formatter(string|Function)
 

en/option/series/map.md

@@ -22,7 +22,7 @@ Series of same [map type](~series-map.map) will show in one map. At this point,
 {{ use: geo-common(
     prefix = '#',
     inMap = true,
-    labelMinMargin = true
+    labelMargin = true
 ) }}
 
 ## center(Array)
@@ -142,7 +142,7 @@ Color of the area.
     formatter = true,
     noAlign = true,
     noVerticalAlign = true,
-    minMargin = true
+    labelMargin = true
 ) }}
 
 ### labelLine(Object)