Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 1 commit into from
May 16, 2024
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
74 changes: 74 additions & 0 deletions en/option/component/matrix.md
Original file line number Diff line number Diff line change
@@ -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
) }}
1 change: 1 addition & 0 deletions en/option/option.md
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@
{{import: component-timeline}}
{{import: component-graphic}}
{{import: component-calendar}}
{{import: component-matrix}}
{{import: component-dataset}}
{{import: component-aria}}

Expand Down
61 changes: 61 additions & 0 deletions en/option/partial/matrix-header.md
Original file line number Diff line number Diff line change
@@ -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
) }}
75 changes: 75 additions & 0 deletions zh/option/component/matrix.md
Original file line number Diff line number Diff line change
@@ -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
) }}
1 change: 1 addition & 0 deletions zh/option/option.md
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@
{{import: component-timeline}}
{{import: component-graphic}}
{{import: component-calendar}}
{{import: component-matrix}}
{{import: component-dataset}}
{{import: component-aria}}

Expand Down
61 changes: 61 additions & 0 deletions zh/option/partial/matrix-header.md
Original file line number Diff line number Diff line change
@@ -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
) }}