This is an automated email from the ASF dual-hosted git repository.
ovilia pushed a commit to branch v6
in repository https://gitbox.apache.org/repos/asf/echarts-doc.git
The following commit(s) were added to refs/heads/v6 by this push:
new e1ee4407 doc(matrix): add doc for matrix enhance apache/echarts#21005
e1ee4407 is described below
commit e1ee4407105c638e9ab313564e7ff8eef057b808
Author: Ovilia <[email protected]>
AuthorDate: Mon Jun 9 15:11:27 2025 +0800
doc(matrix): add doc for matrix enhance apache/echarts#21005
---
en/option/component/matrix.md | 36 +++++----
en/option/partial/matrix-header.md | 86 +++++++++++-----------
.../partial/{matrix-header.md => matrix-region.md} | 18 ++---
zh/option/component/matrix.md | 39 +++++-----
zh/option/partial/matrix-header.md | 86 +++++++++++-----------
.../partial/{matrix-header.md => matrix-region.md} | 28 +++----
6 files changed, 147 insertions(+), 146 deletions(-)
diff --git a/en/option/component/matrix.md b/en/option/component/matrix.md
index 2abe7040..f0443b7e 100644
--- a/en/option/component/matrix.md
+++ b/en/option/component/matrix.md
@@ -37,37 +37,47 @@ By flexibly using the combination of chart series,
coordinate systems, and APIs,
## x(Object)
+X-axis header region.
+
{{ use: partial-matrix-header(
- name = 'x',
+ name = 'x-axis cells',
prefix = '##'
) }}
## y(Object)
+Y-axis header region.
+
{{ use: partial-matrix-header(
- name = 'y',
+ name = 'y-axis cells',
prefix = '##'
) }}
-## backgroundStyle(Object)
+## body(Object)
-The style of the entire matrix area.
+Body cells, which are the ones except header cells.
-{{ use: partial-item-style(
- prefix = "##",
- name = "Entire matrix area ",
- defaultColor = "none",
- defaultBorderColor = "'#ccc'",
- defaultBorderWidth = 1
+{{ use: partial-matrix-region(
+ prefix = '##',
+ name: 'Body cells'
+) }}
+
+## corner(Object)
+
+Corner cells, which are the one at the intersection of x and y-axis.
+
+{{ use: partial-matrix-region(
+ prefix = '##',
+ name: 'Corner cells'
) }}
-## innerBackgroundStyle(Object)
+## backgroundStyle(Object)
-The style of the inner cells.
+The style of the entire matrix area.
{{ use: partial-item-style(
prefix = "##",
- name = "Inner cells ",
+ name = "Entire matrix area ",
defaultColor = "none",
defaultBorderColor = "'#ccc'",
defaultBorderWidth = 1
diff --git a/en/option/partial/matrix-header.md
b/en/option/partial/matrix-header.md
index efa0ee06..3aa86cbf 100644
--- a/en/option/partial/matrix-header.md
+++ b/en/option/partial/matrix-header.md
@@ -1,61 +1,57 @@
{{ target: partial-matrix-header }}
-Configuration for the ${name} Axis
+### show(boolean) = true
-#${prefix|default('##')} show(boolean) = true
+Determines whether to display the title row of the ${name}.
-Determines whether to display the title row of the ${name} axis.
+{{ use: partial-matrix-region(
+ prefix = '##',
+ name: ${name}
+) }}
+
+### levelSize(number|string)
+
+The size of all cells in the title row/column. For the x title row, it refers
to the cell height; for the y title column, it refers to the cell width.
-#${prefix|default('##')} data(Array)
+The value type can be:
-Specifies the data for the title row of the ${name} axis.
++ `number`: Represents pixel value.
++ `string`: Percentage value (e.g., `'33%'`), representing the percentage
relative to the width or height of the entire chart container.
++ Unspecified: Represents the minimum value that adapts to the content.
+
+For example:
```js
-// Data for a single row
-data: ['A', 'B', 'C', 'D', 'E']
-
-// Data in a tree structure
-data: [{
- value: 'A',
- children: [
- {
- value: 'A1',
- children: [
- {value: 'A1-1'},
- {value: 'A1-2'}
- ]
- },
- {value: 'A2'}
- ]
-}, {
- value: 'B',
- children: [
- {value: 'B1'},
- {value: 'B2'}
- ]
-}]
+{
+ x: {
+ levelSize: undefined,
+ levels: [undefined, {levelSize: '10%'}]
+ }
+}
```
-#${prefix|default('##')} label(Object)
+In the above example, the width of the second column title is 10% of the
entire chart width, and other title columns use the maximum value of each
column title content as the width.
-{{ use: partial-label-desc() }}
+### levels(Array)
-{{ use: partial-label(
- prefix=${prefix|default('##')} + '#',
- formatter = true,
- defaultColor = "#333"
-) }}
+Settings for each row/column of the title row/column. The first element
represents the first row/column, and so on. If an item in the array is empty,
it means using the default value.
-#${prefix|default('##')} itemStyle(Object)
+#### levelSize(number|string)
-{{ use: partial-item-style-desc(
- name = 'Header row'
-) }}
+The size of cells in a specific row/column of the title row. For the x title
row, it refers to the cell height; for the y title column, it refers to the
cell width.
+
+The value type can be:
+
++ `number`: Represents pixel value.
++ `string`: Percentage value (e.g., `'33%'`), representing the percentage
relative to the width or height of the entire chart container.
++ Unspecified: Represents the minimum value that adapts to the content.
+
+### dividerLineStyle(Object)
-{{ use: partial-item-style(
- prefix=${prefix|default('##')} + '#',
- name = "Header row",
- defaultColor = "none",
- defaultBorderColor = "'#ccc'",
- defaultBorderWidth = 1
+{{ use: partial-line-style(
+ prefix = '###',
+ defaultColor = "'#aaa'",
+ defaultWidth = 1,
+ defaultType = "'solid'",
+ name = "title column divider line"
) }}
diff --git a/en/option/partial/matrix-header.md
b/en/option/partial/matrix-region.md
similarity index 75%
copy from en/option/partial/matrix-header.md
copy to en/option/partial/matrix-region.md
index efa0ee06..8e79937b 100644
--- a/en/option/partial/matrix-header.md
+++ b/en/option/partial/matrix-region.md
@@ -1,14 +1,8 @@
-{{ target: partial-matrix-header }}
-
-Configuration for the ${name} Axis
-
-#${prefix|default('##')} show(boolean) = true
-
-Determines whether to display the title row of the ${name} axis.
+{{ target: partial-matrix-region }}
#${prefix|default('##')} data(Array)
-Specifies the data for the title row of the ${name} axis.
+Specifies the data for the ${name}.
```js
// Data for a single row
@@ -49,13 +43,17 @@ data: [{
#${prefix|default('##')} itemStyle(Object)
{{ use: partial-item-style-desc(
- name = 'Header row'
+ name = ${name}
) }}
{{ use: partial-item-style(
prefix=${prefix|default('##')} + '#',
- name = "Header row",
+ name = ${name},
defaultColor = "none",
defaultBorderColor = "'#ccc'",
defaultBorderWidth = 1
) }}
+
+{{ use: partial-silent(
+ prefix=${prefix|default('##')},
+) }}
diff --git a/zh/option/component/matrix.md b/zh/option/component/matrix.md
index dd396e4e..81e894b7 100644
--- a/zh/option/component/matrix.md
+++ b/zh/option/component/matrix.md
@@ -38,38 +38,43 @@
## x(Object)
+x 轴标题区。
+
{{ use: partial-matrix-header(
- name = 'x',
- prefix = '##'
+ name: 'x 轴标题区单元格'
) }}
## y(Object)
+y 轴标题区。
+
{{ use: partial-matrix-header(
- name = 'y',
- prefix = '##'
+ name: 'y 轴标题区单元格'
) }}
-## backgroundStyle(Object)
+## body(Object)
-整个矩形视图区的样式。
+内容区单元格，即表单除了标题区外的区域。
-{{ use: partial-item-style(
- prefix = "##",
- name = "整个矩形视图区",
- defaultColor = "none",
- defaultBorderColor = "'#aaa'",
- defaultBorderWidth = 1
+{{ use: partial-matrix-region(
+ name: '内容区单元格'
) }}
-## innerBackgroundStyle(Object)
+## corner(Object)
-内部单元格的样式。
+角区单元格，即表单行列标题区的交集区域。
+
+{{ use: partial-matrix-region(
+ name: '角区单元格'
+) }}
+
+## backgroundStyle(Object)
+
+整个矩形视图区的样式。
{{ use: partial-item-style(
- prefix = "##",
- name = "内部单元格",
+ name = "整个矩形视图区",
defaultColor = "none",
- defaultBorderColor = "'#ccc'",
+ defaultBorderColor = "'#aaa'",
defaultBorderWidth = 1
) }}
diff --git a/zh/option/partial/matrix-header.md
b/zh/option/partial/matrix-header.md
index 0d8b17ee..62f27e3a 100644
--- a/zh/option/partial/matrix-header.md
+++ b/zh/option/partial/matrix-header.md
@@ -1,61 +1,57 @@
{{ target: partial-matrix-header }}
-${name} 轴的配置。
+### show(boolean) = true
-#${prefix|default('##')} show(boolean) = true
+是否显示 ${name}。
-是否显示 ${name} 轴的标题行。
+{{ use: partial-matrix-region(
+ prefix = '###',
+ name: ${name}
+) }}
+
+### levelSize(number|string)
+
+标题行列所有单元格的大小。对于 x 的标题行来说指单元格高度，对于 y 的标题列来说指单元格宽度。
-#${prefix|default('##')} data(Array)
+值的类型可以是：
-${name} 轴标题行的数据。
++ `number`：表示像素值。
++ `string`：百分比值（例如 `'33%'），表示相对整个图表容器的宽度或高度的百分比。
++ 未指定：表示根据内容自适应的最小值。
+
+例如：
```js
-// 一行的数据
-data: ['A', 'B', 'C', 'D', 'E']
-
-// 树状结构的数据
-data: [{
- value: 'A',
- children: [
- {
- value: 'A1',
- children: [
- {value: 'A1-1'},
- {value: 'A1-2'}
- ]
- },
- {value: 'A2'}
- ]
-}, {
- name: 'B',
- children: [
- {value: 'B1'},
- {value: 'B2'}
- ]
-}]
+{
+ x: {
+ levelSize: undefined,
+ levels: [undefined, {levelSize: '10%'}]
+ }
+}
```
-#${prefix|default('##')} label(Object)
+在上面的例子中，表示第二列标题的宽度为整个图表宽度的 10%，其他标题列的单元格使用每列标题内容的最大值作为宽度。
-{{ use: partial-label-desc() }}
+### levels(Array)
-{{ use: partial-label(
- prefix=${prefix|default('##')} + '#',
- formatter = true,
- defaultColor = "#333"
-) }}
+标题行列每一行列的设置。其中第一个元素表示第一行/列，以此类推。如果数组中的某项为空，表示采用默认值。
-#${prefix|default('##')} itemStyle(Object)
+#### levelSize(number|string)
-{{ use: partial-item-style-desc(
- name = '标题行'
-) }}
+标题行某一行/列单元格的大小。对于 x 的标题行来说指单元格高度，对于 y 的标题列来说指单元格宽度。
+
+值的类型可以是：
+
++ `number`：表示像素值。
++ `string`：百分比值（例如 `'33%'），表示相对整个图表容器的宽度或高度的百分比。
++ 未指定：表示根据内容自适应的最小值。
+
+### dividerLineStyle(Object)
-{{ use: partial-item-style(
- prefix=${prefix|default('##')} + '#',
- name = "标题行",
- defaultColor = "none",
- defaultBorderColor = "'#ccc'",
- defaultBorderWidth = 1
+{{ use: partial-line-style(
+ prefix = '###',
+ defaultColor = "'#aaa'",
+ defaultWidth = 1,
+ defaultType = "'solid'",
+ name = "标题列分割线"
) }}
diff --git a/zh/option/partial/matrix-header.md
b/zh/option/partial/matrix-region.md
similarity index 60%
copy from zh/option/partial/matrix-header.md
copy to zh/option/partial/matrix-region.md
index 0d8b17ee..c4b94a0a 100644
--- a/zh/option/partial/matrix-header.md
+++ b/zh/option/partial/matrix-region.md
@@ -1,14 +1,6 @@
-{{ target: partial-matrix-header }}
+{{ target: partial-matrix-region }}
-${name} 轴的配置。
-
-#${prefix|default('##')} show(boolean) = true
-
-是否显示 ${name} 轴的标题行。
-
-#${prefix|default('##')} data(Array)
-
-${name} 轴标题行的数据。
+${name}的数据。
```js
// 一行的数据
@@ -36,26 +28,30 @@ data: [{
}]
```
-#${prefix|default('##')} label(Object)
+### label(Object)
{{ use: partial-label-desc() }}
{{ use: partial-label(
- prefix=${prefix|default('##')} + '#',
+ prefix='###',
formatter = true,
defaultColor = "#333"
) }}
-#${prefix|default('##')} itemStyle(Object)
+### itemStyle(Object)
{{ use: partial-item-style-desc(
- name = '标题行'
+ name = ${name}
) }}
{{ use: partial-item-style(
- prefix=${prefix|default('##')} + '#',
- name = "标题行",
+ prefix='###',
+ name = ${name},
defaultColor = "none",
defaultBorderColor = "'#ccc'",
defaultBorderWidth = 1
) }}
+
+{{ use: partial-silent(
+ prefix='##'
+) }}
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
