Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion en/option/component/geo-common.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
64 changes: 56 additions & 8 deletions en/option/partial/label.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)

Expand Down Expand Up @@ -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.
Expand Down
2 changes: 1 addition & 1 deletion en/option/series/bar.md
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down
4 changes: 2 additions & 2 deletions en/option/series/effectScatter.md
Original file line number Diff line number Diff line change
Expand Up @@ -104,7 +104,7 @@ The brush type for ripples. options: `'stroke'` and `'fill'`.
prefix = "##",
defaultPosition = "'inside'",
formatter = true,
minMargin = true
labelMargin = true
) }}

## labelLine(Object)
Expand Down Expand Up @@ -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)
Expand Down
13 changes: 5 additions & 8 deletions en/option/series/funnel.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down Expand Up @@ -221,7 +221,7 @@ The label configuration of a single data item.
prefix = "###",
position = true,
formatter = false,
minMargin = true
labelMargin = true
) }}

### labelLine(Object)
Expand Down Expand Up @@ -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)
Expand Down
4 changes: 2 additions & 2 deletions en/option/series/graph.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down Expand Up @@ -434,7 +434,7 @@ The label style of this node.

{{ use: partial-label(
prefix = "###",
minMargin = true
labelMargin = true
) }}

### emphasis(Object)
Expand Down
4 changes: 2 additions & 2 deletions en/option/series/heatmap.md
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ Work for [coordinateSystem](~series-heatmap.coordinateSystem): 'cartesian2d'.
{{ use: partial-label(
prefix = "##",
defaultPosition = "inside",
minMargin = true
labelMargin = true
) }}

## labelLayout(Object|Function)
Expand Down Expand Up @@ -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)
Expand Down
6 changes: 3 additions & 3 deletions en/option/series/line.md
Original file line number Diff line number Diff line change
Expand Up @@ -131,7 +131,7 @@ See the example using different `step` options:
prefix = "##",
defaultPosition = "'top'",
formatter = true,
minMargin = true
labelMargin = true
) }}

## endLabel(Object)
Expand All @@ -146,7 +146,7 @@ Label on the end of line.
prefix = "##",
formatter = true,
noPosition = true,
minMargin = true
labelMargin = true
) }}

### valueAnimation(boolean)
Expand Down Expand Up @@ -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)
Expand Down
13 changes: 5 additions & 8 deletions en/option/series/lines.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down Expand Up @@ -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)
Expand Down Expand Up @@ -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)

Expand Down
4 changes: 2 additions & 2 deletions en/option/series/map.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down Expand Up @@ -142,7 +142,7 @@ Color of the area.
formatter = true,
noAlign = true,
noVerticalAlign = true,
minMargin = true
labelMargin = true
) }}

### labelLine(Object)
Expand Down
4 changes: 2 additions & 2 deletions en/option/series/pictorialBar.md
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@ See the example below:
prefix = "##",
defaultPosition = "'inside'",
formatter = true,
minMargin = true
labelMargin = true
) }}

## labelLine(Object)
Expand Down Expand Up @@ -222,7 +222,7 @@ The style setting of the text label in a single bar.
{{ use: partial-label(
prefix = "###",
defaultPosition = "inside",
minMargin = true
labelMargin = true
) }}

### labelLine(Object)
Expand Down
13 changes: 5 additions & 8 deletions en/option/series/pie.md
Original file line number Diff line number Diff line change
Expand Up @@ -166,7 +166,7 @@ Style of circle placeholder.
prefix = "##",
position = true,
formatter = true,
minMargin = true
labelMargin = true
) }}

### alignTo(string) = 'none'
Expand Down Expand Up @@ -373,7 +373,7 @@ The label configuration of a single sector.
prefix = "###",
position = true,
formatter = false,
minMargin = true
labelMargin = true
) }}

### labelLine(Object)
Expand Down Expand Up @@ -503,15 +503,12 @@ The position of label.
In the center of pie chart. See [pie-doughnut example](${galleryEditorPath}pie-doughnut)
{{ /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-pie.labelLayout).
{{ /if }}

{{ if: ${formatter} }}
#${prefix} formatter(string|Function)
Expand Down
4 changes: 2 additions & 2 deletions en/option/series/radar.md
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ Index of [radar](~radar) component that radar chart uses.
prefix = "##",
defaultPosition = "'top'",
formatter = true,
minMargin = true
labelMargin = true
) }}

## labelLayout(Object|Function)
Expand Down Expand Up @@ -182,7 +182,7 @@ Style setting of the text on single inflection point.
{{ use: partial-label(
prefix = "###",
defaultPosition = "top",
minMargin = true
labelMargin = true
) }}

### itemStyle(Object)
Expand Down
4 changes: 2 additions & 2 deletions en/option/series/sankey.md
Original file line number Diff line number Diff line change
Expand Up @@ -185,7 +185,7 @@ Specify which layer is set, value starts from 0.
defaultShowLabel = true,
defaultPosition = "'right'",
formatter1d = true,
minMargin = true
labelMargin = true
) }}

## labelLayout(Object|Function)
Expand Down Expand Up @@ -324,7 +324,7 @@ The lable style of this node.

{{ use: partial-label(
prefix = "###",
minMargin = true
labelMargin = true
) }}

### emphasis(Object)
Expand Down
4 changes: 2 additions & 2 deletions en/option/series/scatter.md
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ It could be used with [rectangular coordinate](~grid) and [polar coordinate](~po
prefix = "##",
defaultPosition = "'inside'",
formatter = true,
minMargin = true
labelMargin = true
) }}

## labelLine(Object)
Expand Down Expand Up @@ -190,7 +190,7 @@ the value of data item.
{{ use: partial-label(
prefix = "###",
defaultPosition = "inside",
minMargin = true
labelMargin = true
) }}

### labelLine(Object)
Expand Down
4 changes: 2 additions & 2 deletions en/option/series/sunburst.md
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ If angle of data piece is smaller than this value (in degrees), then text is not
defaultShowLabel = "true",
noRotate = true,
noAlign = true,
minMargin = ${minMargin}
labelMargin = ${labelMargin}
) }}


Expand All @@ -60,7 +60,7 @@ To specify the style of the label of the sector.

{{ use: partial-sunburst-label-helper(
prefix = ${prefix} + '#',
minMargin = ${state} === 'normal'
labelMargin = ${state} === 'normal'
) }}

#${prefix} labelLine(Object)
Expand Down
Loading