This is an automated email from the ASF dual-hosted git repository.
100pah pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/echarts-doc.git
The following commit(s) were added to refs/heads/master by this push:
new 24cf98b1 (1) Add containShape doc. (2) Supplement stack doc.
24cf98b1 is described below
commit 24cf98b1c3e6375b6d02dce61803a427028b1318
Author: 100pah <[email protected]>
AuthorDate: Sun May 17 21:45:39 2026 +0800
(1) Add containShape doc. (2) Supplement stack doc.
---
en/option/component/axis-common.md | 17 +++++++++++
en/option/partial/stack.md | 58 +++++++++++++++++++++++++++++++++++++-
zh/option/component/axis-common.md | 18 ++++++++++++
zh/option/partial/stack.md | 58 +++++++++++++++++++++++++++++++++++++-
4 files changed, 149 insertions(+), 2 deletions(-)
diff --git a/en/option/component/axis-common.md
b/en/option/component/axis-common.md
index 85c6cc00..0f7f73ad 100644
--- a/en/option/component/axis-common.md
+++ b/en/option/component/axis-common.md
@@ -890,6 +890,23 @@ For non-category axis, including time, numerical value,
and log axes, `boundaryG
boundaryGap: ['20%', '20%']
```
+#${prefix} containShape(boolean) = true
+
+<ExampleUIControlBoolean default="true"/>
+
+{{ use: partial-version(version = '6.1.0') }}
+
+Whether series shapes should be prevented from overflowing the coordinate
system by adding extra margin at the axes edges.
+
+Currently, `containShape` is available only on [bar](~series-bar),
[pictorialBar](~series-pictorialBar), [candlestick](~series-candlestick) and
[boxplot](~series-boxplot), where shape overflow is typically unexpected.
+
+Note: if a `dataZoom` is applied on a numerical axis (`axis.type: 'value' |
'time' | 'log'`), the extra margin is only added to the edges of a full window
(i.e., `dataZoom` end `0%` and end `100%`). For a `dataZoom` is applied on a
category axis (`axis.type: 'category'`), the extra margin is always added
regardless of `dataZoom` range.
+
+See also [series.clip](~series-bar.clip), which can clip shapes if they
overflow the coordinate system.
+
+See also [boundaryGap](~${componentType}.boundaryGap). The functionality of
the two options overlaps for historicall reasons. Series shapes may overflow a
category axis (`axis.type: 'category'`) only if `boundaryGap: false,
containShape: false`.
+
+
#${prefix} min(number|string|Function) = null
<ExampleUIControlNumber />
diff --git a/en/option/partial/stack.md b/en/option/partial/stack.md
index ee602ce8..1e36a9e0 100644
--- a/en/option/partial/stack.md
+++ b/en/option/partial/stack.md
@@ -5,7 +5,63 @@
Name of the stack group. Series with the same `stack` name on the **same
category axis** will be stacked on top of each other. See
[stackStrategy](~series-${componentNameInLink}.stackStrategy) for customizing
how values are stacked.
-**Notice:** Stacking **only supports the stacked axis being of type**
`'value'` or `'log'`. Axes of type `'time'` and `'category'` are **not
supported** as the stacked axis.
+Two axes in the [Cartesian](~grid) or [polar](~polar) coordinate system
determine the layout of series glyphs. In terms of `stack`, we can name the two
axes as follows:
++ **Stacked Axis**: Series values on this axis are stacked. Only `axis.type:
'value' | 'log'` are supported to stack.
++ **Base Axis**: Series values on this axis are **not** stacked, but this axis
affects the stack grouping strategy:
+ + If "Base Axis" is `axis.type: 'category'`: Series data items are grouped
by the values on this axis. For example,
+ ```js
+ option = {
+ xAxis: {type: 'category'},
+ yAxis: {type: 'value'},
+ series: [{
+ stack: 'ss',
+ data: [['a', 10], ['b', 20], ['c', 30]]
+ }, {
+ stack: 'ss',
+ data: [['b', 900], ['c', 800], ['a', 700]]
+ }, {
+ stack: 'ss',
+ data: [['a', 3000], ['c', 4000]]
+ }]
+ };
+ // "Base Axis" is xAxis, and series are grouped by values
+ // on xAxis (i.e., data[i][0]).
+ // It generates a stacked result like:
+ stackedResult = [{
+ data: [['a', 10], ['b', 20], ['c', 30]]
+ }, {
+ data: [['a', 10 + 700], ['b', 20 + 900], ['c', 30 + 800]]
+ }, {
+ data: [['a', 10 + 700 + 3000], ['b', 20 + 900 + 0], ['c', 30 + 800
+ 4000]]
+ }]
+ ```
+ + If "Base Axis" is `axis.type: 'value' | 'time' | 'log'`: Currently we
only support to group series data items by data index for performance
considerations. **Users should ensure data indices between different series
correspond correctly**. For example,
+ ```js
+ option = {
+ xAxis: {type: 'value'},
+ yAxis: {type: 'value'},
+ series: [{
+ stack: 'ss',
+ data: [[0.01, 10], [0.05, 20], [0.13, 30]]
+ }, {
+ stack: 'ss',
+ data: [[0.01, 700], [0.05, 900], [0.13, 800]]
+ }, {
+ stack: 'ss',
+ data: [[0.01, 3000], null, [0.13, 4000]]
+ }]
+ };
+ // "Base Axis" is xAxis, and series are grouped by data index
+ // regardless of values on xAxis (i.e., data[i][0]).
+ // It generates a stacked result like:
+ stackedResult = [{
+ data: [[0.01, 10], [0.05, 20], [0.13, 30]]
+ }, {
+ data: [[0.01, 10 + 700], [0.05, 20 + 900], [0.13, 30 + 800]]
+ }, {
+ data: [[0.01, 10 + 700 + 3000], [0.05, 20 + 900 + 0], [0.13, 30 +
800 + 4000]]
+ }]
+ ```
{{ if: ${componentNameInLink} === 'line' }}
You can view the effect of the example below by switching stacks in the
[toolbox](~toolbox) in the top-right corner.
diff --git a/zh/option/component/axis-common.md
b/zh/option/component/axis-common.md
index e60d3cdc..a94da0ff 100644
--- a/zh/option/component/axis-common.md
+++ b/zh/option/component/axis-common.md
@@ -885,6 +885,24 @@ splitLine: {
boundaryGap: ['20%', '20%']
```
+
+#${prefix} containShape(boolean) = true
+
+<ExampleUIControlBoolean default="true"/>
+
+{{ use: partial-version(version = '6.1.0') }}
+
+是否在坐标轴两端增加额外的空间以阻止系列的图形超出坐标系范围。
+
+目前 `containShape` 只支持于
[柱状图（bar）](~series-bar)、[象形柱状图（pictorialBar）](~series-pictorialBar)、[K线图（candlestick）](~series-candlestick)
和 [盒须图（boxplot）](~series-boxplot)，这些图形往往不应超出边界往往。
+
+注：如果 `dataZoom` 被用于数值类的坐标轴（即 `axis.type: 'value' | 'time' | 'log'`），只在
`dataZoom` 完整窗口两端（即 `dataZoom` 断点 `0%` 和端点 `100%`）增加额外空间。如果 `dataZoom`
被用于类目坐标轴（`axis.type: 'category'`），不论什么 `dataZoom` 当前是什么范围总是增加额外的空间。
+
+也参见 [series.clip](~series-bar.clip)，它可剪裁超出坐标系边界的图形。
+
+也参见 [boundaryGap](~${componentType}.boundaryGap)。这两个配置项的功能因为历史原因有所重叠。只有在
`boundaryGap: false, containShape: false` 时，类目坐标轴（`axis.type:
'category'`）中的图形才可能超出坐标轴范围。
+
+
#${prefix} min(number|string|Function) = null
<ExampleUIControlNumber />
diff --git a/zh/option/partial/stack.md b/zh/option/partial/stack.md
index b3ad218b..249e9c50 100644
--- a/zh/option/partial/stack.md
+++ b/zh/option/partial/stack.md
@@ -5,7 +5,63 @@
堆叠的组名。在**同一个类目轴（category axis）**上，配置了相同 `stack` 组名的系列会互相堆叠。关于数值的堆叠方式，可参见
[stackStrategy](~series-${componentNameInLink}.stackStrategy)。
-**注意：**堆叠功能只支持被堆叠轴为 `'value'` 或 `'log'` 类型，不支持被堆叠轴为 `'time'` 或 `'category'` 类型。
+[笛卡尔坐标系](~grid) 或 [极坐标系](~polar) 中，两个坐标轴决定了系列的每个图形的位置。讨论 `stack` 时我们可以这样命名它们：
++ **Stacked Axis**：这个坐标轴上的系列值会被堆叠。这里只有 `axis.type: 'value' | 'log'` 的坐标轴能支持堆叠。
++ **Base Axis**：这个坐标轴上的系列值**不**会被堆叠。但是这个坐标轴影响堆叠的分组策略：
+ + 如果 Base Axis 是 `axis.type: 'category'`: 系列的数据项会根据此坐标轴上的值进行分组。例如，
+ ```js
+ option = {
+ xAxis: {type: 'category'},
+ yAxis: {type: 'value'},
+ series: [{
+ stack: 'ss',
+ data: [['a', 10], ['b', 20], ['c', 30]]
+ }, {
+ stack: 'ss',
+ data: [['b', 900], ['c', 800], ['a', 700]]
+ }, {
+ stack: 'ss',
+ data: [['a', 3000], ['c', 4000]]
+ }]
+ };
+ // "Base Axis" 是 xAxis。系列的诸数据项根据 xAxis 上的值
+ // （即 data[i][0]）进行分组。
+ // 堆叠结果为：
+ stackedResult = [{
+ data: [['a', 10], ['b', 20], ['c', 30]]
+ }, {
+ data: [['a', 10 + 700], ['b', 20 + 900], ['c', 30 + 800]]
+ }, {
+ data: [['a', 10 + 700 + 3000], ['b', 20 + 900 + 0], ['c', 30 + 800
+ 4000]]
+ }]
+ ```
+ + 如果 Base Axis 是 `axis.type: 'value' | 'time' | 'log'`: 当前只支持根据 data index
对数据项进行分组（出于性能考虑）。**使用者须保证不同系列的 data index 正确对应**。例如，
+ ```js
+ option = {
+ xAxis: {type: 'value'},
+ yAxis: {type: 'value'},
+ series: [{
+ stack: 'ss',
+ data: [[0.01, 10], [0.05, 20], [0.13, 30]]
+ }, {
+ stack: 'ss',
+ data: [[0.01, 700], [0.05, 900], [0.13, 800]]
+ }, {
+ stack: 'ss',
+ data: [[0.01, 3000], null, [0.13, 4000]]
+ }]
+ };
+ // "Base Axis" 是 xAxis 。系列的诸数据项根据 data index 进行分组。
+ // 堆叠结果为：
+ stackedResult = [{
+ data: [[0.01, 10], [0.05, 20], [0.13, 30]]
+ }, {
+ data: [[0.01, 10 + 700], [0.05, 20 + 900], [0.13, 30 + 800]]
+ }, {
+ data: [[0.01, 10 + 700 + 3000], [0.05, 20 + 900 + 0], [0.13, 30 +
800 + 4000]]
+ }]
+ ```
+
{{ if: ${componentNameInLink} === 'line' }}
下面示例可以通过右上角 [toolbox](~toolbox) 中的堆叠切换看效果：
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
