You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: en/option/component/axis-common.md
+112-1Lines changed: 112 additions & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -25,6 +25,7 @@ Parameters of the event include:
25
25
}
26
26
```
27
27
28
+
{{ if: ${hasJitter|default(false)} }}
28
29
#${prefix} jitter(number) = 0
29
30
30
31
{{ use: partial-version(version = "6.0.0") }}
@@ -46,6 +47,114 @@ Whether allow overlaping with [jitter](~${componentType}.jitter). If `false`, it
46
47
{{ use: partial-version(version = "6.0.0") }}
47
48
48
49
When setting [jitter](~${componentType}.jitter) and [jitterOverlap](~${componentType}.jitterOverlap) is `false`, the minimum distance between two scatters.
50
+
{{ /if }}
51
+
52
+
53
+
54
+
{{ if: ${hasBreakAxis|default(false)} }}
55
+
#${prefix} breaks(Array)
56
+
57
+
Break axis data, where each sub-element represents a segment of truncated space.
> Break axis is a technique that truncates portions of the coordinate axis to compress the display space of non-critical data segments in charts. Its core purposes are:
62
+
>
63
+
> +**Highlight differences**: When there are extreme differences between data values (such as one value being much larger than others), it prevents large value bars from overwhelmingly occupying space, making small value differences difficult to distinguish.
64
+
> +**Save space**: Reduces blank areas caused by extreme values, making charts more compact.
65
+
>
66
+
> Please note that break axis should only be used when necessary to avoid misleading users. When using break axis, the truncated parts and corresponding values should usually be clearly indicated.
67
+
>
68
+
> Break axis cannot be used in category axes ([type](~${componentType}.type): `'category'`).
69
+
70
+
##${prefix} start(string|number|Date)
71
+
72
+
The start value for truncation.
73
+
74
+
+ For coordinate axes with [type](~${componentType}.type) as `'value'` or `'log'`, use `number` type values
75
+
+ For coordinate axes with [type](~${componentType}.type) as `'time'`:
76
+
+`string` type time values (e.g., `'2024-04-09 13:00:00'`)
77
+
+`number` type timestamps (e.g., `(new Date('2024-04-09 13:00:00')).getTime()`)
78
+
+`Date` type time objects (e.g., `new Date('2024-04-09 13:00:00')`).
79
+
80
+
##${prefix} end(string|number|Date)
81
+
82
+
The end value for truncation.
83
+
84
+
+ For coordinate axes with [type](~${componentType}.type) as `'value'` or `'log'`, use `number` type values
85
+
+ For coordinate axes with [type](~${componentType}.type) as `'time'`:
86
+
+`string` type time values (e.g., `'2024-04-09 13:00:00'`)
87
+
+`number` type timestamps (e.g., `(new Date('2024-04-09 13:00:00')).getTime()`)
88
+
+`Date` type time objects (e.g., `new Date('2024-04-09 13:00:00')`).
89
+
90
+
##${prefix} gap(number|string)
91
+
92
+
The display size of the break axis truncated area.
93
+
94
+
+`number`: Same unit as `start` and `end`, not representing pixel size
95
+
+`string`:
96
+
+ Supports percentage forms like `'35%'`, representing relative proportion to the coordinate axis data area size
97
+
+ Supports strings like `'123'`, equivalent to `number` type `123`, note that it does not represent pixel size
98
+
99
+
##${prefix} isExpanded(boolean) = false
100
+
101
+
Whether this truncated area is expanded, default is `false`.
102
+
103
+
#${prefix} breakArea
104
+
105
+
Style of the break axis truncated area.
106
+
107
+
##${prefix} show(boolean) = true
108
+
109
+
Whether to show the truncated area.
110
+
111
+
##${prefix} itemStyle
112
+
113
+
Style of the truncated area.
114
+
115
+
{{ use: partial-item-style(
116
+
prefix = '###',
117
+
defaultColor = "#fff",
118
+
defaultBorderColor = "'#b7b9be'",
119
+
defaultBorderWidth = 1,
120
+
defaultType = "[3, 3]",
121
+
defaultOpacity = 0.6
122
+
) }}
123
+
124
+
##${prefix} zigzagAmplitude(number) = 4
125
+
126
+
The amplitude (in the direction perpendicular to the coordinate axis) of the truncated zigzag. The size of the truncated zigzag in the direction perpendicular to the coordinate axis is always the same across different zigzags.
127
+
128
+
##${prefix} zigzagMinSpan(number) = 4
129
+
130
+
The minimum size of the truncated zigzag in the coordinate axis direction.
131
+
132
+
> The size of the truncated zigzag in the coordinate axis direction is a random number between `zigzagMinSpan` and `zigzagMaxSpan`. Randomness is used to simulate the effect of torn paper.
133
+
134
+
##${prefix} zigzagMaxSpan(number) = 20
135
+
136
+
The maximum size of the truncated zigzag in the coordinate axis direction.
137
+
138
+
> The size of the truncated zigzag in the coordinate axis direction is a random number between `zigzagMinSpan` and `zigzagMaxSpan`. Randomness is used to simulate the effect of torn paper.
139
+
140
+
##${prefix} zigzagZ(number) = 100
141
+
142
+
The `z` value of the truncated zigzag. Controls the front-to-back order of graphics. Graphics with smaller `z` values will be covered by graphics with larger `z` values.
143
+
144
+
##${prefix} expandOnClick(boolean) = true
145
+
146
+
Whether to expand the truncated area when clicking on the break axis truncated area.
147
+
148
+
#${prefix} breakLabelLayout(Object)
149
+
150
+
Break axis label layout.
151
+
152
+
##${prefix} moveOverlap(string|boolean) = 'auto'
153
+
154
+
When break axis labels overlap, whether to move labels to avoid overlap.
155
+
156
+
`'auto'` or `true` means moving labels to avoid overlap when overlapping occurs; `false` means not moving.
157
+
{{ /if }}
49
158
50
159
#${prefix} axisLine(Object)
51
160
@@ -803,7 +912,9 @@ To specify the start value of the axis.
0 commit comments