This is an automated email from the ASF dual-hosted git repository.
ovilia pushed a commit to branch doc-custom
in repository https://gitbox.apache.org/repos/asf/echarts-doc.git
commit 09904ec8c259262bbdd553962ba1d35e091433d3
Author: Ovilia <zwl.s...@gmail.com>
AuthorDate: Fri Jul 4 14:17:32 2025 +0800
doc(custom): fix doc description
---
en/api/echarts.md | 43 ++++++++++++++++++++++++++++++++++++----
en/option/series/custom.md | 4 ++--
zh/api/echarts.md | 44 +++++++++++++++++++++++++++++++++++------
zh/option/partial/zr-graphic.md | 2 +-
zh/option/series/custom.md | 4 ++--
5 files changed, 82 insertions(+), 15 deletions(-)
diff --git a/en/api/echarts.md b/en/api/echarts.md
index 4710ce5a..e430abe8 100644
--- a/en/api/echarts.md
+++ b/en/api/echarts.md
@@ -237,15 +237,50 @@ Registers a theme, should be specified when [initialize
the chart instance](~ech
{{ use: partial-version(version: '6.0.0') }}
-Register a custom series. After registration, it can be used as
[series-custom.type](option.html#series-custom.type) in
[setOption](~api.html#echartsInstance.setOption).
-
```ts
-(type: string, renderItem: Function) => void
+(type: string, renderItem: Function)
```
-+ `type` is the type of the chart to be registered, that is, the `series.type`
written later in `setOption`.
+Register a custom series. After registration, it can be used in
[setOption](~api.html#echartsInstance.setOption).
+
++ `type` is the type of the chart to be registered, that is, the
`series.renderItem` written later in `setOption`.
+ `renderItem` is the graphic rendering logic of the custom series. For
details, see [series-custom.renderItem](option.html#series-custom.renderItem).
+Example:
+
+```ts
+const renderItem = (params, api) => {
+ return {
+ type: 'circle',
+ shape: {
+ cx: api.coord([api.value(0), api.value(1)])[0],
+ cy: api.coord([api.value(0), api.value(1)])[1],
+ r: api.value(2) * (params.itemPayload.scale || 1)
+ },
+ style: {
+ fill: api.visual('color'),
+ opacity: params.itemPayload.opacity() || 1,
+ }
+ }
+};
+echarts.registerCustomSeries('bubble', renderItem);
+
+const option = {
+ xAxis: {},
+ yAxis: {},
+ series: {
+ type: 'custom',
+ renderItem: 'bubble',
+ itemPayload: {
+ scale: 2,
+ opacity: () => Math.random() * 0.5 + 0.5
+ },
+ data: [[11, 22, 20], [33, 44, 40], [18, 24, 10]]
+ }
+};
+chart.setOption(option);
+```
+
## registerLocale(Function)
> Since `5.0.0`
diff --git a/en/option/series/custom.md b/en/option/series/custom.md
index 816a628d..19a02808 100644
--- a/en/option/series/custom.md
+++ b/en/option/series/custom.md
@@ -113,7 +113,7 @@ chart.on('click', {element: 'aaa'}, function (params) {
none = true
) }}
-## renderItem(Function)
+## renderItem(Function|string)
{{ use: partial-custom-renderItem-common() }}
@@ -493,7 +493,7 @@ Value of data item.
{{ target: partial-custom-renderItem-common }}
-`custom series` requires developers to write a render logic by themselves.
This render logic is called [renderItem](~series-custom.renderItem).
+`custom series` requires developers to write a rendering logic by themselves
in the form of `Function`, or use a registered rendering logic in the form of
`string` (since `v6.0.0`; See
[echarts.registerCustomSeries](api.html#echarts.registerCustomSeries) for more
information). This render logic is called
[renderItem](~series-custom.renderItem).
For example:
diff --git a/zh/api/echarts.md b/zh/api/echarts.md
index 0bf8e139..6aafeb7b 100644
--- a/zh/api/echarts.md
+++ b/zh/api/echarts.md
@@ -234,18 +234,50 @@ echarts.registerMap('USA', usaJson, {
{{ use: partial-version(version: '6.0.0') }}
```ts
-(type: string, renderItem: Function) => void
+(type: string, renderItem: Function)
```
-注册自定义系列。注册后可以通过 [setOption](~api.html#echartsInstance.setOption) 中使用：
+注册自定义系列。注册后可以通过 [setOption](~api.html#echartsInstance.setOption) 中使用。
+
++ `type` 注册的图表类型，也就是之后在 `setOption` 中写的 `series.renderItem`。
++ `renderItem` 自定义系列的图形渲染逻辑，详见
[series-custom.renderItem](option.html#series-custom.renderItem)。
+
+示例：
```ts
-(type: string, renderItem: Function) => void
+const renderItem = (params, api) => {
+ return {
+ type: 'circle',
+ shape: {
+ cx: api.coord([api.value(0), api.value(1)])[0],
+ cy: api.coord([api.value(0), api.value(1)])[1],
+ r: api.value(2) * (params.itemPayload.scale || 1)
+ },
+ style: {
+ fill: api.visual('color'),
+ opacity: params.itemPayload.opacity() || 1,
+ }
+ }
+};
+echarts.registerCustomSeries('bubble', renderItem);
+
+const option = {
+ xAxis: {},
+ yAxis: {},
+ series: {
+ type: 'custom',
+ renderItem: 'bubble',
+ itemPayload: {
+ scale: 2,
+ opacity: () => Math.random() * 0.5 + 0.5
+ },
+ data: [[11, 22, 20], [33, 44, 40], [18, 24, 10]]
+ }
+};
+chart.setOption(option);
```
-+ `type` 注册的图表类型，也就是之后在 `setOption` 中写的 `series.type`。
-+ `renderItem` 自定义系列的图形渲染逻辑，详见
[series-custom.renderItem](option.html#series-custom.renderItem)。
-
+[apache/echarts-custom-series](https://github.com/apache/echarts-custom-series)
项目提供了多种可以直接使用的自定义系列。
## registerLocale(Function)
diff --git a/zh/option/partial/zr-graphic.md b/zh/option/partial/zr-graphic.md
index 590d95e0..2ac0983d 100644
--- a/zh/option/partial/zr-graphic.md
+++ b/zh/option/partial/zr-graphic.md
@@ -989,7 +989,7 @@ font: 'bolder 2em "Microsoft YaHei", sans-serif'
{{ use: partial-version(version: '6.0.0') }}
-The union of multiple elements.
+多个图形元素并集组成的复合元素。
{{ use: partial-graphic-cpt-common-props(
type = 'compoundPath',
diff --git a/zh/option/series/custom.md b/zh/option/series/custom.md
index e4390f3f..ec4cd59e 100644
--- a/zh/option/series/custom.md
+++ b/zh/option/series/custom.md
@@ -102,7 +102,7 @@ chart.on('click', {element: 'aaa'}, function (params) {
none = true
) }}
-## renderItem(Function)
+## renderItem(Function|string)
{{ use: partial-custom-renderItem-common() }}
@@ -480,7 +480,7 @@ renderItem 函数的第二个参数。
{{ target: partial-custom-renderItem-common }}
-custom 系列需要开发者自己提供图形渲染的逻辑。这个渲染逻辑一般命名为
[renderItem](~series-custom.renderItem)。例如：
+custom 系列需要开发者以 `Function` 形式提供图形渲染的逻辑或者以 `string` 形式使用预先注册的图形渲染逻辑（从 `v6.0.0`
开始支持，详见
[echarts.registerCustomSeries](api.html#echarts.registerCustomSeries)）。这个渲染逻辑一般命名为
[renderItem](~series-custom.renderItem)。例如：
```ts
var option = {
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscr...@echarts.apache.org
For additional commands, e-mail: commits-h...@echarts.apache.org
