apache · 100pah · Aug 10, 2025 · Aug 9, 2025 · Aug 10, 2025 · Aug 10, 2025
diff --git a/README.md b/README.md
@@ -63,21 +63,24 @@ These global variables can be used in doc:
 + `${galleryViewPath}`
 + `${galleryEditorPath}`
 + `${websitePath}`
++ `${handbookPath}`
+
+Note: All of them are ended with a `/`, therefore, use them like `${galleryEditorPath}pie-legend`.
 
 See samples in "Reference of echarts-examples or other links"
 
 ### Reference of echarts-examples or Other Links
 
-Embed an example in doc:
+Embed an example in doc (display the example directly in doc with an iframe. To avoid performance issues, do not overuse it.):
 ```md
-~[700X300](${galleryEditorPath}pie-legend&edit=1&reset=1)
+~[700X300](${galleryViewPath}pie-legend&edit=1&reset=1)
 ~[700x300](${galleryViewPath}doc-example/aria-pie&edit=1&reset=1)
 ```
 
 Provide an example link in doc:
 ```md
 [vertically scrollable legend](${galleryEditorPath}pie-legend&edit=1&reset=1)
-[aria pie](${galleryViewPath}doc-example/aria-pie&edit=1&reset=1)
+[aria pie](${galleryEditorPath}doc-example/aria-pie&edit=1&reset=1)
 ```
 
 Provide a website link in doc:
@@ -94,8 +97,10 @@ A `~` can be used to refer to a option item in the same doc. For example:
 
 If intending to reference an anchor in different doc, it can be:
 ```md
-In api.html, reference
 [itemStyle](option.html#series.itemStyle)
+[action.highlight](api.html#action.highlight)
+[Custom Series](tutorial.html#Custom%20Series)
+[Use ECharts with bundler and NPM](${handbookPath}basics/import)
 ```
 
 

diff --git a/en/api/echarts-instance.md b/en/api/echarts-instance.md
diff --git a/en/option/component/matrix.md b/en/option/component/matrix.md
@@ -8,7 +8,7 @@ Matrix coordinate system component.
 
 The `matrix` coordinate system, like a table, can serve as the layout system of data items in a series, 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 in series like `series.heatmap`, `series.scatter`, `series.custom`, etc. The entire layout is displayed in rows and columns to express the relationship of two-dimensional or higher-dimensional data.
 
-The `matrix` coordinate system can also serve as the layout system of the box of series like `series.pie`, `series.tree`, etc., or another coordinate systems like `grid` (i.e., Cartesian coordinate system), `geo`, `polar`, etc., or plain components like `legend`, `dataZoom`, etc. This character enables tiny charts to be laid out in a table, or enables the layout approach like [CSS grid layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout). Currently all the series and components can be laid out within a matrix. `matrix` can also be used purely as table for data texts.
+The `matrix` coordinate system can also serve as the layout system of the box of series like `series.pie`, `series.tree`, etc., or another coordinate systems like `grid` (i.e., Cartesian coordinate system), `geo`, `polar`, etc., or plain components like `legend`, `dataZoom`, etc. This character enables [mini charts](${galleryEditorPath}matrix-sparkline&edit=1&reset=1) to be laid out in a table, or enables the layout approach like [CSS grid layout](${galleryEditorPath}matrix-grid-layout&edit=1&reset=1). Currently all the series and components can be laid out within a matrix. `matrix` can also be used purely as table for data texts.
 
 Correlation heat map using heat map in matrix coordinate system:
 ~[800x400](${galleryViewPath}matrix-correlation-heatmap&edit=1&reset=1)
@@ -25,8 +25,12 @@ Correlation pie chart using pie chart in matrix coordinate system. The example b
 Confusion matrix using custom series in matrix coordinate system:
 ~[800x400](${galleryViewPath}matrix-confusion&edit=1&reset=1)
 
-Tiny line charts are laid out in a table:
-~[800x600](${galleryViewPath}matrix-cartesian-tiny&edit=1&reset=1)
+Mini charts are laid out in a table:
+~[800x600](${galleryViewPath}matrix-sparkline&edit=1&reset=1)
+~[800x600](${galleryViewPath}matrix-mini-bar-geo&edit=1&reset=1)
+
+And other **mini charts** examples: [matrix mini bar example](${galleryEditorPath}matrix-mini-bar-data-collection&edit=1&reset=1).
+
 
 By flexibly using the combination of chart series, coordinate systems, and APIs, richer effects can be achieved.
 
@@ -52,7 +56,7 @@ X-axis header region.
 
 {{ use: partial-matrix-header(
     name = 'x-axis cells',
-    prefix = '##'
+    matrixDim = 'x',
 ) }}
 
 ## y(Object)
@@ -63,7 +67,7 @@ Y-axis header region.
 
 {{ use: partial-matrix-header(
     name = 'y-axis cells',
-    prefix = '##'
+    matrixDim = 'y',
 ) }}
 
 ## body(Object)

diff --git a/en/option/component/thumbnail.md b/en/option/component/thumbnail.md
@@ -0,0 +1,76 @@
+{{ target: component-thumbnail }}
+
+# thumbnail(Object)
+
+{{ use: partial-version(version = "6.0.0") }}
+
+Thumbnail component.
+
+Currently it only supports [series.graph](~series-graph).
+
+Examples: [graph NPM](${galleryEditorPath}graph-npm&edit=1&reset=1), [graph Webkit dep](${galleryEditorPath}graph-webkit-dep&edit=1&reset=1).
+
+
+{{ use: partial-component-id(
+    prefix = "#"
+) }}
+
+## show(boolean) = true
+
+Whether to display the thumbnail component.
+
+{{ use: partial-rect-layout-width-height(
+    componentName = "thumbnail",
+    defaultLeft = "25%",
+    defaultTop = "25%"
+) }}
+
+{{ use: partial-coord-sys(
+    version = '6.0.0',
+    nonSeriesComponentMainType = "thumbnail",
+    coordSysDefault = "'none'",
+    matrix = true,
+    calendar = true,
+    none = true
+) }}
+
+## itemStyle(Object)
+
+{{ use: partial-version(version = "6.0.0") }}
+
+The style of the box and background of the thumbnail.
+
+{{ use: partial-item-style(
+    prefix = '##',
+    defaultBorderColor = "'#b7b9be'",
+    defaultBorderWidth = 2
+) }}
+
+## windowStyle(Object)
+
+{{ use: partial-version(version = "6.0.0") }}
+
+The style of the window of the thumbnail.
+
+{{ use: partial-item-style(
+    prefix = '##',
+    defaultColor = "'#9ea0a5'",
+    defaultBorderColor = "'#b7b9be'",
+    defaultBorderWidth = 1,
+    defaultOpacity = 0.3
+) }}
+
+## seriesIndex(number)
+
+{{ use: partial-version(version = "6.0.0") }}
+
+Specify which series this thumbnail is for. Use the first [series.graph](~series-graph) by default.
+
+## seriesId(string|number)
+
+{{ use: partial-version(version = "6.0.0") }}
+
+Specify which series this thumbnail is for. Use the first [series.graph](~series-graph) by default.
+
+
+{{ /target }}
diff --git a/en/option/option.md b/en/option/option.md
@@ -23,6 +23,7 @@
 {{import: component-graphic}}
 {{import: component-calendar}}
 {{import: component-matrix}}
+{{import: component-thumbnail}}
 {{import: component-dataset}}
 {{import: component-aria}}
 

diff --git a/en/option/partial/coord-sys.md b/en/option/partial/coord-sys.md
@@ -91,7 +91,7 @@ Options:
 
     Lay out based on a [matrix coordinate system](~matrix). When multiple matrix coordinate systems exist within an ECharts instance, the corresponding system should be specified using [matrixIndex](~${componentNameInLink}.matrixIndex) or [matrixId](~${componentNameInLink}.matrixId).{{if: ${nonSeriesComponentMainType} === 'grid' }}
 
-    See example [tiny Cartesians in matrix](${galleryEditorPath}matrix-cartesian-tiny&edit=1&reset=1).
+    See example [sparkline in matrix](${galleryEditorPath}matrix-sparkline&edit=1&reset=1).
     {{ /if }}
 {{ /if }}
 
@@ -158,7 +158,7 @@ Options:
 
     The entire series or component is laid out as a whole based on the specified coordinate system - that is, the overall bounding rect or basic anchor point is calculated relative to the system.
 
-    - For example, a [grid component](~grid) can be laid out in a [matrix coordinate system](~matrix) or a [calendar coordinate system](~calendar), where its layout rectangle is calculated by the specified [${componentNameInLink}.coords](~${componentNameInLink}.coords) in that system. See example [tiny Cartesians in matrix](${galleryEditorPath}matrix-cartesian-tiny&edit=1&reset=1).
+    - For example, a [grid component](~grid) can be laid out in a [matrix coordinate system](~matrix) or a [calendar coordinate system](~calendar), where its layout rectangle is calculated by the specified [${componentNameInLink}.coords](~${componentNameInLink}.coords) in that system. See example [sparkline in matrix](${galleryEditorPath}matrix-sparkline&edit=1&reset=1).
     - For example, a [pie series](~series-pie) or a [chord series](~series-chord) can be laid out in a [geo coordinate system](~geo) or a [cartesian2d coordinate system](~grid), where the center is calculated by the specified [series-pie.coords](~series-pie.coords) or [series-pie.center](~series-pie.center) in that system. See example [pie in geo](${galleryEditorPath}map-iceland-pie&edit=1&reset=1).
 
 {{ if: ${seriesType} }}
@@ -169,13 +169,13 @@ Most series only support `coordinateSystemUsage: 'data'` - such as [series-line]
 
 See also [${componentNameInLink}.coordinateSystem](~${componentNameInLink}.coordinateSystem).
 
-## coord(Array|string)
+## coord(Array|number|string)
 
 {{ use: partial-version(version = ${version|minVersion('6.0.0')}) }}
 
 When [coordinateSystemUsage](~${componentNameInLink}.coordinateSystemUsage) is `'box'`, `coord` is used as the input to the coordinate system and calculate the layout rectangle or anchor point.
 
-Examples: [tiny Cartesians in matrix](${galleryEditorPath}matrix-cartesian-tiny&edit=1&reset=1), [grpah in matrix](${galleryEditorPath}doc-example/matrix-graph-box&edit=1&reset=1).
+Examples: [sparkline in matrix](${galleryEditorPath}matrix-sparkline&edit=1&reset=1), [grpah in matrix](${galleryEditorPath}doc-example/matrix-graph-box&edit=1&reset=1).
 
 {{ if: ${seriesType} === 'pie' }}
 [series-pie.center](~series-pie.center) and [series-pie.coord](~series-pie.coord) can be used interchangably in this case.
@@ -185,6 +185,8 @@ Examples: [tiny Cartesians in matrix](${galleryEditorPath}matrix-cartesian-tiny&
 
 > Note: when [coordinateSystemUsage](~${componentNameInLink}.coordinateSystemUsage) is `'data'`, the input of coordinate system is `series.data[i]` rather than this `coord`.
 
+The format this `coord` is defined by each coordinate system, and it's the same as the second parameter of [chart.convertToPixel](api.html#echartsInstance.convertToPixel).
+
 
 {{ if: ${cartesian2d} }}
 ## xAxisIndex(number) = 0

diff --git a/en/option/partial/matrix-header.md b/en/option/partial/matrix-header.md
@@ -19,6 +19,8 @@ data: ['A', 'B', 'C', 'D', 'E']
 
 // Or if column/row names is not of concern, simply
 data: Array(5).fill(null) // Five columns or rows
+// Note: DO NOT support array with empty slots：
+// data: Array(5) // ❌
 
 // Data in a tree structure
 data: [{
@@ -42,13 +44,37 @@ data: [{
 }]
 ```
 
+If [matrix.${matrixDim}.data](~matrix.${matrixDim}.data) is not provided, it will be collected from `series.data` or `dataset.soruce`.
+
+See [matrix data collection example](${galleryEditorPath}matrix-mini-bar-data-collection&edit=1&reset=1).
+
+And in this case [series.encode](~series-scatter.encode) can be used to specify the dimension from which value is collected. For example,
+```js
+var option = {
+    // no matrix.x/y.data is specified;
+    // so collect from series.data or dataset.source (if any)
+    matrix: {},
+    series: {
+        type: 'scatter',
+        coordinateSystem: 'matrix',
+        // Collect values from dimension index 3 and 2.
+        encode: {x: 3, y: 2},
+        data: [
+            // 0   1    2    3    (dimension index)
+            [100, 111, 122, 133],
+            [200, 211, 222, 233],
+        ]
+    }
+}
+```
+
 #### value(string|number)
 {{ use: partial-version(version = "6.0.0") }}
 The text in the header cell. Can also be used as a index of this column or row. Optional. If not specified, auto generate a text.
 
 #### children(Array)
 {{ use: partial-version(version = "6.0.0") }}
-See [matrix.x/y.data](~matrix.x.data).
+See [matrix.${matrixDim}.data](~matrix.${matrixDim}.data).
 
 #### size(number)
 {{ use: partial-version(version = "6.0.0") }}

diff --git a/en/option/partial/view-coord-sys.md b/en/option/partial/view-coord-sys.md
@@ -90,6 +90,9 @@ center: ['50%', '50%']
 
 > The percentage string is introduced since `v5.3.3`. It is initially based on canvas width/height. But that is not reasonable, and then changed to be based on the bounding rect since `v6.0.0`.
 
+{{ use: partial-view-coord-sys-indicator-example-link(
+    componentNameInLink = ${componentNameInLink}
+) }}
 
 #${prefix} zoom(number) = 1
 
@@ -103,6 +106,10 @@ Zoom rate of current viewport.
 
 When [roaming](~${componentNameInLink}.roam), the values in [center](~${componentNameInLink}.center) and `zoom` will be modified correspondingly.
 
+{{ use: partial-view-coord-sys-indicator-example-link(
+    componentNameInLink = ${componentNameInLink}
+) }}
+
 #${prefix} scaleLimit(Object)
 
 {{ use: partial-scale-limit-desc(
@@ -131,9 +138,11 @@ Options:
 
     {{ if: ${supportClip} }}If `clip: true`, the roaming can only be triggered at any position within the clipped area. Otherwise it can be triggered in canvas globally.{{ else }}The roaming can be triggered in canvas globally.{{ /if }}
 
-{{ if: ${isGeoOrMap} }}
-**See example:** [geo roam indicator](${galleryEditorPath}doc-example/geo-roam-indicator&edit=1&reset=1).
-{{ /if }}
+{{ use: partial-view-coord-sys-indicator-example-link(
+    componentNameInLink = ${componentNameInLink}
+) }}
+
+
 
 {{ target: partial-preserve-aspect }}
 
@@ -166,10 +175,12 @@ Options of `preserveAspect`:
 
 {{ if: ${isGeoOrMap} }}
 Notice: When using [layoutCenter](~${componentNameInLink}.layoutCenter) and [layoutSize](~${componentNameInLink}.layoutSize), the `aspect radio` is always preserved, regardless of this `preserveAspect`.
-
-**See example:** [geo roam indicator](${galleryEditorPath}doc-example/geo-roam-indicator&edit=1&reset=1).
 {{ /if }}
 
+{{ use: partial-view-coord-sys-indicator-example-link(
+    componentNameInLink = ${componentNameInLink}
+) }}
+
 #${prefix} preserveAspectAlign(string) = 'center'
 
 <ExampleUIControlEnum options="left,right,center" default="center" />
@@ -180,7 +191,9 @@ Options: `'left'` | `'right'` | `'center'`.
 
 See [preserveAspect](~${componentNameInLink}.preserveAspect).
 
-See example [geo roam indicator](${galleryEditorPath}doc-example/geo-roam-indicator&edit=1&reset=1).
+{{ use: partial-view-coord-sys-indicator-example-link(
+    componentNameInLink = ${componentNameInLink}
+) }}
 
 #${prefix} preserveAspectVerticalAlign(string) = 'middle'
 
@@ -192,7 +205,19 @@ Options: `'top'` | `'bottom'` | `'middle'`.
 
 See [preserveAspect](~${componentNameInLink}.preserveAspect).
 
-See example [geo roam indicator](${galleryEditorPath}doc-example/geo-roam-indicator&edit=1&reset=1).
+{{ use: partial-view-coord-sys-indicator-example-link(
+    componentNameInLink = ${componentNameInLink}
+) }}
+
+
+
+{{ target: partial-view-coord-sys-indicator-example-link }}
+
+{{ if: ${componentNameInLink} === 'geo' || ${componentNameInLink} === 'series-map' }}
+**See [geo roam indicator example](${galleryEditorPath}doc-example/geo-roam-indicator&edit=1&reset=1)** to understand the concept.
+{{ elif: ${componentNameInLink} === 'series-graph' }}
+**See [graph roam indicator example](${galleryEditorPath}doc-example/graph-roam-indicator&edit=1&reset=1)** to understand the concept.
+{{ /if }}
 
 
 

diff --git a/en/option/series/custom.md b/en/option/series/custom.md
@@ -147,10 +147,10 @@ The first parameter of `renderItem`, including:
     },
     coordSys: {
         type: 'calendar',
-        x: // {number} x of calendar rect
-        y: // {number} y of calendar rect
-        width: // {number} width of calendar rect
-        height: // {number} height of calendar rect
+        x: // {number} x of the calendar component rect
+        y: // {number} y of the calendar component rect
+        width: // {number} width of the calendar component rect
+        height: // {number} height of the calendar component rect
         cellWidth: // {number} calendar cellWidth
         cellHeight: // {number} calendar cellHeight
         rangeInfo: {
@@ -160,6 +160,13 @@ The first parameter of `renderItem`, including:
             dayCount: // day count in calendar.
         }
     },
+    coordSys: {
+        type: 'matrix',
+        x: // {number} x of the matrix component rect
+        y: // {number} y of the matrix component rect
+        width: // {number} width of the matrix component rect
+        height: // {number} height of the matrix component rect
+    },
     coordSys: {
         type: 'geo',
         x: // {number} x of geo rect
@@ -207,12 +214,17 @@ Get value on the given dimension.
 
 Convert data to coordinate.
 
-```
-@param {Array.<number>} data.
-@return {Array.<number>} Point on canvas, at least includes [x, y].
-        In polar, it also contains:
-        polar: [x, y, radius, angle]
-```
+The behavior, parameters and returns are the same as [chart.convertToPixel](api.html#echartsInstance.convertToPixel) (only exclude its first parameter `finder`).
+
+##### layout(Function)
+
+{{ use: partial-version(version = "6.0.0") }}
+
+Convert data to the corresponding layout info based on the current coordinate system.
+
+The behavior, parameters and returns are the same as [chart.convertToLayout](api.html#echartsInstance.convertToLayout) (only exclude its first parameter `finder`).
+
+See [matrix api.layout example](${galleryEditorPath}matrix-mini-bar-data-collection).
 
 ##### size(Function)