Skip to content
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
43 changes: 39 additions & 4 deletions en/api/echarts.md
Original file line number Diff line number Diff line change
Expand Up @@ -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`
Expand Down
4 changes: 2 additions & 2 deletions en/option/series/custom.md
Original file line number Diff line number Diff line change
Expand Up @@ -113,7 +113,7 @@ chart.on('click', {element: 'aaa'}, function (params) {
none = true
) }}

## renderItem(Function)
## renderItem(Function|string)

{{ use: partial-custom-renderItem-common() }}

Expand Down Expand Up @@ -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:

Expand Down
44 changes: 38 additions & 6 deletions zh/api/echarts.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)

Expand Down
2 changes: 1 addition & 1 deletion zh/option/partial/zr-graphic.md
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
4 changes: 2 additions & 2 deletions zh/option/series/custom.md
Original file line number Diff line number Diff line change
Expand Up @@ -102,7 +102,7 @@ chart.on('click', {element: 'aaa'}, function (params) {
none = true
) }}

## renderItem(Function)
## renderItem(Function|string)

{{ use: partial-custom-renderItem-common() }}

Expand Down Expand Up @@ -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 = {
Expand Down