Merge pull request #394 from apache/feat-matrix

doc(matrix): add doc for apache/echarts#19807

en/option/component/matrix.md

@@ -0,0 +1,74 @@
+{{ target: component-matrix }}
+
+# matrix(Object)
+
+Matrix coordinate system component.
+
+Matrix coordinate system is similar to a table, mainly used to display the relationship and interaction of multi-dimensional data. It presents data in the form of a rectangular grid, where each grid unit (or "cell") represents the value of a specific data point. The entire layout is displayed in rows and columns to express the relationship of two-dimensional or higher-dimensional data.
+
+Because it is a "coordinate system", it can be used in combination with multiple chart series, such as heat maps, scatter plots, custom series, etc.
+
+Correlation heat map using heat map in matrix coordinate system:
+~[800x400](${galleryViewPath}matrix-correlation-heatmap&edit=1&reset=1)
+
+Correlation scatter plot using scatter plot in matrix coordinate system:
+~[800x400](${galleryViewPath}matrix-correlation-scatter&edit=1&reset=1)
+
+Correlation graph using relationship graph in matrix coordinate system:
+~[800x600](${galleryViewPath}matrix-graph&edit=1&reset=1)
+
+Correlation pie chart using pie chart in matrix coordinate system. The example below shows multi-level X data:
+~[800x600](${galleryViewPath}matrix-pie&edit=1&reset=1)
+
+Confusion matrix using custom series in matrix coordinate system:
+~[800x400](${galleryViewPath}matrix-confusion&edit=1&reset=1)
+
+By flexibly using the combination of chart series, coordinate systems, and APIs, richer effects can be achieved.
+
+{{ use: partial-component-id(
+    prefix = "#"
+) }}
+
+{{ use: partial-rect-layout-width-height(
+    componentName = "matrix",
+    defaultLeft = "10%",
+    defaultTop = "10%"
+) }}
+
+## x(Object)
+
+{{ use: partial-matrix-header(
+    name = 'x',
+    prefix = '##'
+) }}
+
+## y(Object)
+
+{{ use: partial-matrix-header(
+    name = 'y',
+    prefix = '##'
+) }}
+
+## backgroundStyle(Object)
+
+The style of the entire matrix area.
+
+{{ use: partial-item-style(
+    prefix = "##",
+    name = "Entire matrix area ",
+    defaultColor = "none",
+    defaultBorderColor = "'#ccc'",
+    defaultBorderWidth = 1
+) }}
+
+## innerBackgroundStyle(Object)
+
+The style of the inner cells.
+
+{{ use: partial-item-style(
+    prefix = "##",
+    name = "Inner cells ",
+    defaultColor = "none",
+    defaultBorderColor = "'#ccc'",
+    defaultBorderWidth = 1
+) }}

en/option/option.md

@@ -22,6 +22,7 @@
 {{import: component-timeline}}
 {{import: component-graphic}}
 {{import: component-calendar}}
+{{import: component-matrix}}
 {{import: component-dataset}}
 {{import: component-aria}}
 

en/option/partial/matrix-header.md

@@ -0,0 +1,61 @@
+{{ 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.
+
+#${prefix|default('##')} data(Array)
+
+Specifies the data for the title row of the ${name} axis.
+
+```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'}
+    ]
+}]
+```
+
+#${prefix|default('##')} label(Object)
+
+{{ use: partial-label-desc() }}
+
+{{ use: partial-label(
+    prefix=${prefix|default('##')} + '#',
+    formatter = true,
+    defaultColor = "#333"
+) }}
+
+#${prefix|default('##')} itemStyle(Object)
+
+{{ use: partial-item-style-desc(
+    name = 'Header row'
+) }}
+
+{{ use: partial-item-style(
+    prefix=${prefix|default('##')} + '#',
+    name = "Header row",
+    defaultColor = "none",
+    defaultBorderColor = "'#ccc'",
+    defaultBorderWidth = 1
+) }}

zh/option/component/matrix.md

@@ -0,0 +1,75 @@
+{{ target: component-matrix }}
+
+# matrix(Object)
+
+矩阵坐标系组件。
+
+矩阵坐标系类似表格，主要用于显示多维度数据的关系和相互作用。它以矩形网格的形式呈现数据，每个网格单元（或称为“单元格”）代表了特定数据点的值。整个布局以行和列的形式显示，用以表达二维或更高维度的数据关系。
+
+因为它是一种“坐标系”，所以它可以和多种图表系列组合使用，例如热力图、散点图、自定义系列等。
+
+在矩阵坐标系中使用热力图的相关矩阵图：
+~[800x400](${galleryViewPath}matrix-correlation-heatmap&edit=1&reset=1)
+
+在矩阵坐标系中使用散点图的相关矩阵图：
+~[800x400](${galleryViewPath}matrix-correlation-scatter&edit=1&reset=1)
+
+在矩阵坐标系中使用关系图的相关矩阵图：
+~[800x600](${galleryViewPath}matrix-graph&edit=1&reset=1)
+
+在矩阵坐标系中使用饼图的相关矩阵图，下面的例子展示了多层级的 X 数据：
+~[800x600](${galleryViewPath}matrix-pie&edit=1&reset=1)
+
+在矩阵坐标系中使用自定义系列的混淆矩阵图：
+~[800x400](${galleryViewPath}matrix-confusion&edit=1&reset=1)
+
+灵活利用图表系列、坐标系、API 的组合，可以实现更丰富的效果。
+
+
+{{ use: partial-component-id(
+    prefix = "#"
+) }}
+
+{{ use: partial-rect-layout-width-height(
+    componentName = "matrix",
+    defaultLeft = "10%",
+    defaultTop = "10%"
+) }}
+
+## x(Object)
+
+{{ use: partial-matrix-header(
+    name = 'x',
+    prefix = '##'
+) }}
+
+## y(Object)
+
+{{ use: partial-matrix-header(
+    name = 'y',
+    prefix = '##'
+) }}
+
+## backgroundStyle(Object)
+
+整个矩形视图区的样式。
+
+{{ use: partial-item-style(
+    prefix = "##",
+    name = "整个矩形视图区",
+    defaultColor = "none",
+    defaultBorderColor = "'#aaa'",
+    defaultBorderWidth = 1
+) }}
+
+## innerBackgroundStyle(Object)
+
+内部单元格的样式。
+
+{{ use: partial-item-style(
+    prefix = "##",
+    name = "内部单元格",
+    defaultColor = "none",
+    defaultBorderColor = "'#ccc'",
+    defaultBorderWidth = 1
+) }}

zh/option/option.md

@@ -22,6 +22,7 @@
 {{import: component-timeline}}
 {{import: component-graphic}}
 {{import: component-calendar}}
+{{import: component-matrix}}
 {{import: component-dataset}}
 {{import: component-aria}}
 

zh/option/partial/matrix-header.md

@@ -0,0 +1,61 @@
+{{ target: partial-matrix-header }}
+
+${name} 轴的配置。
+
+#${prefix|default('##')} show(boolean) = true
+
+是否显示 ${name} 轴的标题行。
+
+#${prefix|default('##')} data(Array)
+
+${name} 轴标题行的数据。
+
+```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'}
+    ]
+}]
+```
+
+#${prefix|default('##')} label(Object)
+
+{{ use: partial-label-desc() }}
+
+{{ use: partial-label(
+    prefix=${prefix|default('##')} + '#',
+    formatter = true,
+    defaultColor = "#333"
+) }}
+
+#${prefix|default('##')} itemStyle(Object)
+
+{{ use: partial-item-style-desc(
+    name = '标题行'
+) }}
+
+{{ use: partial-item-style(
+    prefix=${prefix|default('##')} + '#',
+    name = "标题行",
+    defaultColor = "none",
+    defaultBorderColor = "'#ccc'",
+    defaultBorderWidth = 1
+) }}