diff --git a/en/api/echarts.md b/en/api/echarts.md
index ddeee1d3..782f62dd 100644
--- a/en/api/echarts.md
+++ b/en/api/echarts.md
@@ -36,7 +36,7 @@ Creates an ECharts instance, and returns an [echartsInstance](~echartsInstance).
+ `devicePixelRatio` Ratio of one physical pixel to the size of one device independent pixels. Browser's `window.devicePixelRatio` is used by default.
+ `renderer` Supports `'canvas'` or `'svg'`. See [Render by Canvas or SVG](${handbookPath}best-practices/canvas-vs-svg).
- + `ssr` Whether to use server-side rendering. Only available in SVG rendering mode. When enabled, it will no longer render automatically every frame, you have to use the [renderToSVGString](~echartsInstance.renderToSVGString) method to get the rendered SVG string.
+ + `ssr` Whether to use server-side rendering. Only available in SVG rendering mode. When enabled, it will no longer render automatically every frame, you have to use the [renderToSVGString](~echartsInstance.renderToSVGString) method to get the rendered SVG string. See [Server Side Rendering](${handbookPath}how-to/cross-platform/server).
+ `useDirtyRect` Enable dirty rectangle rendering or not, `false` by default. See [New features in ECharts 5](${handbookPath}basics/release-note/v5-feature).
+ `useCoarsePointer` Whether to expand the response area when interacting with elements. `null` means enabling for mobile devices; `true` means always enabling; `false` means always disabling. See [Coarse Pointer](${handbookPath}how-to/interaction/coarse-pointer) for more information.
+ `pointerSize` Size of expanded interaction size in pixels. It should be used along with `opts.useCoarsePointer`.
diff --git a/en/option/component/angle-axis.md b/en/option/component/angle-axis.md
index e81562f6..11b2a66d 100644
--- a/en/option/component/angle-axis.md
+++ b/en/option/component/angle-axis.md
@@ -19,10 +19,22 @@ The index of angle axis in Polar Coordinate. The first axis is used by default.
Starting angle of axis. 90 degrees by default, standing for top position of center. 0 degree stands for right position of center.
-The following shows an example with startAngle of 45 deg.
+The following shows an example with `startAngle` of 45 deg.
~[400x400](${galleryViewPath}doc-example/polar-start-angle&edit=1&reset=1)
+## endAngle(number) = null
+
+
+
+{{ use: partial-version(version = '5.5.0') }}
+
+Ending angle of axis. `null` by default, standing for a whole circle.
+
+The following shows an example with `endAngle` of -180 deg.
+
+~[400x400](${galleryViewPath}doc-example/polar-end-angle&edit=1&reset=1)
+
## clockwise(boolean) = true
diff --git a/en/option/component/axis-common.md b/en/option/component/axis-common.md
index 6faaf9ff..0462773e 100644
--- a/en/option/component/axis-common.md
+++ b/en/option/component/axis-common.md
@@ -147,6 +147,62 @@ Whether to show the label of the min tick. Optional values: `true`, `false`, `nu
Whether to show the label of the max tick. Optional values: `true`, `false`, `null`. It is auto determined by default, that is, if labels are overlapped, the label of the max tick will not be displayed.
+{{ if: ${componentType} === 'xAxis' }}
+
+##${prefix} alignMinLabel(string) = null
+
+{{ use: partial-version(version = '5.5.0') }}
+
+Alignment of the label of the min tick. If set to be `null`, it's the same with other labels .
+
+Options are:
++ `'left'`
++ `'center'`
++ `'right'`
++ `null` (default)
+
+##${prefix} alignMaxLabel(string) = null
+
+{{ use: partial-version(version = '5.5.0') }}
+
+Alignment of the label of the max tick. If set to be `null`, it's the same with other labels. See [align](~${componentType}.axisLabel.align).
+
+Options are:
++ `'left'`
++ `'center'`
++ `'right'`
++ `null` (default)
+
+{{ /if }}
+
+{{ if: ${componentType} === 'yAxis' }}
+
+##${prefix} verticalAlignMinLabel(string) = null
+
+{{ use: partial-version(version = '5.5.0') }}
+
+Vertical alignment of the label of the min tick. If set to be `null`, it's the same with other labels. See [verticalAlign](~${componentType}.axisLabel.verticalAlign).
+
+Options are:
++ `'top'`
++ `'middle'`
++ `'bottom'`
++ `null` (default)
+
+##${prefix} verticalAlignMaxLabel(string) = null
+
+{{ use: partial-version(version = '5.5.0') }}
+
+Vertical alignment of the label of the max tick. If set to be `null`, it's the same with other labels. See [verticalAlign](~${componentType}.axisLabel.verticalAlign).
+
+Options are:
++ `'top'`
++ `'middle'`
++ `'bottom'`
++ `null` (default)
+
+{{ /if }}
+
##${prefix} hideOverlap(boolean)
diff --git a/en/option/component/tooltip.md b/en/option/component/tooltip.md
index cae1ddf4..81676246 100644
--- a/en/option/component/tooltip.md
+++ b/en/option/component/tooltip.md
@@ -199,6 +199,8 @@ Useful when tooltip is cut because of `'overflow: hidden'` set on outer dom of c
version = "4.7.0"
) }}
+(DEPRECATED, use [appendTo](~tooltip.appendTo) instead.)
+
Whether to append the tooltip DOM element as a child of the `
` of the HTML page, when using [renderMode](~tooltip.renderMode) `'html'`.
By default `false`, means that the tooltip DOM element will be one of a descendant of its echarts DOM container. But that means that the tooltip might be cut when overflow the container if some of the ancestors DOM element of the echarts container are styled with `overflow: hidden`. This case could also be resolved by setting [tooltip.confine](~tooltip.confine), but it might not suitable for all scenarios.
@@ -207,6 +209,20 @@ Here we provide `appendToBody: true` to auto append the tooltip element to ` HTMLElement | undefined | null`, which means it returns the node that the tooltip's DOM node should be added to. Returning `undefined` or `null` indicates that the default logic described above should be used. Returning an HTMLElement means that it should be added under that node.
+
+Note that it also works when CSS transform used.
+
## className(string)
diff --git a/en/option/partial/clip.md b/en/option/partial/clip.md
index 0d4f3f14..9de6d4ec 100644
--- a/en/option/partial/clip.md
+++ b/en/option/partial/clip.md
@@ -16,7 +16,8 @@ If clip the overflow on the coordinate system. Clip results varies between serie
+ Line:Clip the overflowed line.
+ Lines: Clip all the overflowed.
+ Candlestick: Ignore the elements exceeds the coordinate system.
++ PictorialBar: Clip all the overflowed. (Supported since v5.5.0)
+ Custom: Clip all the olverflowed.
-All these series have default value `true` except custom series. Set it to `false` if you don't want to clip.
+All these series have default value `true` except pictorialBar and custom series. Set it to `false` if you don't want to clip.
diff --git a/en/option/partial/encode-dimensions.md b/en/option/partial/encode-dimensions.md
index dccecc81..16f91c3d 100644
--- a/en/option/partial/encode-dimensions.md
+++ b/en/option/partial/encode-dimensions.md
@@ -60,9 +60,14 @@ encode: {
// Using dimensions[3] as the name of each data item. This is useful in charts like
// 'pie', 'funnel', where data item name can be displayed in legend.
itemName: 3,
- // Using dimensions[4] as the groupId of each data item. groupId will be used to categorize the data. And to determine
- // How the merge and split animation are performed in the universal transition. See universalTransition option for detail.
- itemGroupId: 4
+ // Using dimensions[4] as the group ID for each data item. With universalTransition enabled,
+ // the data items from the old option and those from the new one, if sharing a same group ID,
+ // will then be matched and applied to a proper animation after `setOption` is called.
+ itemGroupId: 4,
+ // Using dimension[5] as the child group ID for each data item. This option is introduced to
+ // make multiple levels drilldown and aggregation animation come true. See childGroupId for more.
+ // Since v5.5.0
+ itemChildGroupId: 5
}
// These properties only work in cartesian(grid) coordinate system:
diff --git a/en/option/partial/group-id.md b/en/option/partial/group-id.md
index 850ab7b6..c3c404ab 100644
--- a/en/option/partial/group-id.md
+++ b/en/option/partial/group-id.md
@@ -3,15 +3,63 @@
## dataGroupId(string)
-A groupID common to all data in the series. the groupID will be used to classify the data and determine how merge and split animations are performed in the universal transition animation.
-
-If you are using the [dataset](~dataset) component to represent the data, it is recommended to use `encode.itemGroupID` to specify which dimension is encoded as the groupID.
+A group ID assigned to all data items in the series.
+This option has a lower priority than `groupId`, which means when `groupId` is specified for a certain data item the `dataGroupId` will be simply ignored for that data item. For more information, please see `series.data.groupId`.
{{ target: partial-data-group-id }}
#${prefix} groupId(string)
-The groupID of this data item. groupID will be used to classify the data.
+The group ID of a data item. When `universalTransition` is enabled, the data items from the old option and those from the new one, if sharing a same group ID, will then be matched and applied to a proper animation after `setOption` is called.
+
+If a data item is not specified with a `groupId`, Apache ECharts will try to use `series.dataGroupId` as the group ID for the data item. If `series.dataGroupId` is not specified either, Apache ECharts will fall back to using the data item's ID as its group ID.
+
+If you are using the [dataset](~dataset) component to represent data, you are recommended to use `encode.itemGroupId` to specify the dimension that is to be encoded as the group ID.
+
+
+{{ target: partial-data-child-group-id }}
+
+#${prefix} childGroupId(string)
+
+{{ use: partial-version(
+ version = "5.5.0"
+) }}
+
+The group ID of the child data of a data item. This option is introduced to make multiple levels drilldown and aggregation animation possilbe.
+
+~[700x300](${galleryViewPath}doc-example/bar-multi-drilldown&edit=1&reset=1)
+
+Before `childGroupId` is introduced, developers actually can use `groupId` to make drilldown and aggregation animation already, but with the limit on the times that a continious drilldown or aggregation can happen, which is only one time.
+
+`childGroupId`, together with `groupId`, help to form "parent-child" relationships between data items of different options, such as:
+
+```text
+data: [ data: [ data: [
+ { { {
+ name: 'Animals', name: 'Dogs', name: 'Corgi',
+ value: 3, value: 3, value: 5,
+ groupId: 'things', groupId: 'animals', groupId: 'dogs'
+ childGroupId: 'animals' childGroupId: 'dogs' },
+ }, }, {
+ { { name: 'Bulldog',
+ name: 'Fruits', name: 'Cats', value: 6,
+ value: 3, value: 4, groupId: 'dogs'
+ groupId: 'things', groupId: 'animals', },
+ childGroupId: 'fruits' childGroupId: 'cats', {
+ }, }, name: 'Shiba Inu',
+ { { value: 7,
+ name: 'Cars', name: 'Birds', groupId: 'dogs'
+ value: 2, value: 3, }
+ groupId: 'things', groupId: 'animals', ]
+ childGroupId: 'cars' childGroupId: 'birds'
+ } }
+] ]
+```
+
+The 3 groups of data above come from 3 options, and by specifying `groupId` and `childGroupId` for the data items a relationship of "parent-child-grandChild" is formed in the 3 options. In this way, after `setOption` is called, Apache ECharts will try to find the "parent-child" or "child-parent" relationship of the old option and the new one. If the relationship exists, the matching data items will be applied to a drilldown animation or an aggregation one.
+
+If a data item has no child data then there is no need to specify a `childGroupId` at all.
+If you are using the [dataset](~dataset) component to represent data, you are recommended to use `encode.itemChildGroupId` to specify the dimension that is to be encoded as the child group ID.
diff --git a/en/option/partial/tooltip-common.md b/en/option/partial/tooltip-common.md
index 49fafb81..e134f54d 100644
--- a/en/option/partial/tooltip-common.md
+++ b/en/option/partial/tooltip-common.md
@@ -357,7 +357,7 @@ Callback function for formatting the value section in tooltip.
Interface:
```ts
-(value: number | string) => string
+(value: number | string, dataIndex: number) => string
```
Example:
diff --git a/en/option/partial/universal-transition.md b/en/option/partial/universal-transition.md
index b0743dca..a08cfaa2 100644
--- a/en/option/partial/universal-transition.md
+++ b/en/option/partial/universal-transition.md
@@ -11,7 +11,7 @@ Configuration related to universal transition animation.
Universal Transition provides the ability to morph between any series. With this feature enabled, each time `setOption`, transitions between series with the same `id` will be automatically associated with each other.
-One-to-many or many-to-one animations such as drill-down, aggregation, etc. can also be achieved by specifying groups of data such as `encode.itemGroupId` or `dataGroupId`.
+One-to-many or many-to-one animations such as drill-down, aggregation, etc. can also be achieved by specifying data items' `groupId` and `childGroupId`.
This can be enabled directly by configuring `universalTransition: true` in the series. It is also possible to provide an object for more detailed configuration.
diff --git a/en/option/series/bar.md b/en/option/series/bar.md
index a27da5cb..d94b3b7a 100644
--- a/en/option/series/bar.md
+++ b/en/option/series/bar.md
@@ -159,13 +159,14 @@ How to stack values if the [stack](~series-bar.stack) property has been set. Opt
## sampling(string)
-The dowmsampling strategy used when the data size is much larger than pixel size. It will improve the performance when turned on. Defaults to be turned off, indicating that all the data points will be drawn.
+The downsampling strategy used when the data size is much larger than pixel size. It will improve the performance when turned on. Defaults to be turned off, indicating that all the data points will be drawn.
Options:
+ `'lttb'` Use Largest-Triangle-Three-Bucket algorithm to filter points. It will keep the trends and extremas.
+ `'average'` Use average value of filter points
-+ `'max'` Use maximum value of filter points
+ `'min'` Use minimum value of filter points
++ `'max'` Use maximum value of filter points
++ `'minmax'` Use maximum extremum absolute value of filter points (Since `v5.5.0`)
+ `'sum'` Use sum of filter points
{{ use: partial-cursor() }}
@@ -216,6 +217,10 @@ The value of a single data item.
prefix = '##'
) }}
+{{ use: partial-data-child-group-id(
+ prefix = '##'
+) }}
+
{{ use: partial-bar-state(
prefix = "##",
topLevel = false,
diff --git a/en/option/series/boxplot.md b/en/option/series/boxplot.md
index 8de4552a..66442f2b 100644
--- a/en/option/series/boxplot.md
+++ b/en/option/series/boxplot.md
@@ -191,6 +191,10 @@ Value of data item.
prefix = '##'
) }}
+{{ use: partial-data-child-group-id(
+ prefix = '##'
+) }}
+
### itemStyle(Object)
Style of a single data.
diff --git a/en/option/series/candlestick.md b/en/option/series/candlestick.md
index 44d5cb29..1a3725b6 100644
--- a/en/option/series/candlestick.md
+++ b/en/option/series/candlestick.md
@@ -210,6 +210,10 @@ Value of data item.
prefix = '##'
) }}
+{{ use: partial-data-child-group-id(
+ prefix = '##'
+) }}
+
### itemStyle(Object)
Style of a candle box.
diff --git a/en/option/series/custom.md b/en/option/series/custom.md
index 35e05d13..816a628d 100644
--- a/en/option/series/custom.md
+++ b/en/option/series/custom.md
@@ -444,6 +444,10 @@ Value of data item.
prefix = '##'
) }}
+{{ use: partial-data-child-group-id(
+ prefix = '##'
+) }}
+
### itemStyle(Object)
{{ use: partial-item-style(
diff --git a/en/option/series/heatmap.md b/en/option/series/heatmap.md
index eb6e8f96..761b9d10 100644
--- a/en/option/series/heatmap.md
+++ b/en/option/series/heatmap.md
@@ -154,6 +154,10 @@ Value of data item.
prefix = '##'
) }}
+{{ use: partial-data-child-group-id(
+ prefix = '##'
+) }}
+
### label(Object)
It is valid with [coordinateSystem](~series-heatmap.coordinateSystem) of 'cartesian2d' value.
diff --git a/en/option/series/line.md b/en/option/series/line.md
index 527d33c4..3bdfc4cb 100644
--- a/en/option/series/line.md
+++ b/en/option/series/line.md
@@ -299,13 +299,14 @@ Here are 2 examples of broken line chart with dual value axis, showing the diffe
## sampling(string)
-The dowmsampling strategy used when the data size is much larger than pixel size. It will improve the performance when turned on. Defaults to be turned off, indicating that all the data points will be drawn.
+The downsampling strategy used when the data size is much larger than pixel size. It will improve the performance when turned on. Defaults to be turned off, indicating that all the data points will be drawn.
Options:
+ `'lttb'` Use Largest-Triangle-Three-Bucket algorithm to filter points. It will keep the trends and extremas.
+ `'average'` Use average value of filter points
-+ `'max'` Use maximum value of filter points
+ `'min'` Use minimum value of filter points
++ `'max'` Use maximum value of filter points
++ `'minmax'` Use maximum extremum absolute value of filter points (Since `v5.5.0`)
+ `'sum'` Use sum of filter points
{{ use: partial-series-dimensions(
@@ -338,6 +339,10 @@ The value of a single data item.
prefix = '##'
) }}
+{{ use: partial-data-child-group-id(
+ prefix = '##'
+) }}
+
{{ use: partial-symbol(
defaultSymbol = "'circle'",
defaultSymbolSize = 4,
@@ -491,3 +496,4 @@ Select state of specified single data.
prefix = "####",
hasInherit = ${state} === 'emphasis'
) }}
+
diff --git a/en/option/series/lines.md b/en/option/series/lines.md
index 60e1280e..7817e92c 100644
--- a/en/option/series/lines.md
+++ b/en/option/series/lines.md
@@ -208,6 +208,10 @@ the name of data.
prefix = '##'
) }}
+{{ use: partial-data-child-group-id(
+ prefix = '##'
+) }}
+
### coords(Array)
An array includes two ore more than two coordinates. Each coordinate could be `[x, y]` in [rectangular coordinate](~grid) and `[lng, lat]` in [geographic coordinate](~geo).
diff --git a/en/option/series/map.md b/en/option/series/map.md
index 98ccec0c..b7c6ff03 100644
--- a/en/option/series/map.md
+++ b/en/option/series/map.md
@@ -104,6 +104,10 @@ The numerical value of this area.
prefix = '##'
) }}
+{{ use: partial-data-child-group-id(
+ prefix = '##'
+) }}
+
### selected(boolean) = false
Whether the are selected.
diff --git a/en/option/series/pictorialBar.md b/en/option/series/pictorialBar.md
index d7a2ee67..551e3a89 100644
--- a/en/option/series/pictorialBar.md
+++ b/en/option/series/pictorialBar.md
@@ -195,6 +195,10 @@ The value of a single data item.
prefix = '##'
) }}
+{{ use: partial-data-child-group-id(
+ prefix = '##'
+) }}
+
{{ use: pictorialBar-symbol-attrs(
prefix = "##",
useZ2 = true
@@ -280,6 +284,11 @@ Select state of the specified single data.
hasType = true
) }}
+{{ use: partial-clip(
+ prefix = "#",
+ defaultClip = false
+) }}
+
{{ use: partial-z-zlevel(
prefix = "#",
componentName = "Pictorial bar chart "
diff --git a/en/option/series/pie.md b/en/option/series/pie.md
index 52ebcce6..267176d1 100644
--- a/en/option/series/pie.md
+++ b/en/option/series/pie.md
@@ -60,12 +60,34 @@ Whether the layout of sectors of pie chart is clockwise.
The start angle, which range is [0, 360].
+## endAngle(number|string) = 'auto'
+
+
+
+{{ use: partial-version(
+ version = "5.5.0"
+) }}
+
+The end angle, the default value is `'auto'`.
+
+When the value is `'auto'`, the end angle is calculated automatically based on [startAngle](~series-pie.startAngle) to ensure it is a complete circle.
+
## minAngle(number) = 0
The minimum angle of sector (0 ~ 360). It prevents some sector from being too small when value is small, which will affect user interaction.
+## padAngle(number) = 0
+
+
+
+{{ use: partial-version(
+ version = "5.5.0"
+) }}
+
+The interval angle between the sectors (0 ~ 360).
+
## minShowLabelAngle(number) = 0
@@ -334,6 +356,10 @@ Data value.
prefix = '##'
) }}
+{{ use: partial-data-child-group-id(
+ prefix = '##'
+) }}
+
### selected(boolean) = false
Whether the data item is selected.
diff --git a/en/option/series/radar.md b/en/option/series/radar.md
index 5ccc7d45..eb2d3417 100644
--- a/en/option/series/radar.md
+++ b/en/option/series/radar.md
@@ -163,6 +163,10 @@ Numerical value of a single data item.
prefix = '##'
) }}
+{{ use: partial-data-child-group-id(
+ prefix = '##'
+) }}
+
{{ use: partial-symbol(
defaultSymbol = "'circle'",
defaultSymbolSize = 4,
diff --git a/en/option/series/scatter.md b/en/option/series/scatter.md
index 9061d8eb..70202181 100644
--- a/en/option/series/scatter.md
+++ b/en/option/series/scatter.md
@@ -175,6 +175,10 @@ the value of data item.
prefix = '##'
) }}
+{{ use: partial-data-child-group-id(
+ prefix = '##'
+) }}
+
{{ use: partial-symbol(
prefix = "##",
name = "single data"
diff --git a/zh/api/echarts.md b/zh/api/echarts.md
index ea42514e..061c2e3f 100644
--- a/zh/api/echarts.md
+++ b/zh/api/echarts.md
@@ -37,7 +37,7 @@
+ `devicePixelRatio`设备像素比,默认取浏览器的值`window.devicePixelRatio`。
+ `renderer` 渲染模式,支持`'canvas'`或者`'svg'`。参见 [使用 Canvas 或者 SVG 渲染](${handbookPath}best-practices/canvas-vs-svg)。
- + `ssr` 是否使用服务端渲染,只有在 SVG 渲染模式有效。开启后不再会每帧自动渲染,必须要调用 [renderToSVGString](~echartsInstance.renderToSVGString) 方法才能得到渲染后 SVG 字符串。
+ + `ssr` 是否使用服务端渲染,只有在 SVG 渲染模式有效。开启后不再会每帧自动渲染,必须要调用 [renderToSVGString](~echartsInstance.renderToSVGString) 方法才能得到渲染后 SVG 字符串。参见[服务端渲染 ECharts 图表](${handbookPath}how-to/cross-platform/server)。
+ `useDirtyRect`是否开启脏矩形渲染,只有在 Canvas 渲染模式有效,默认为`false`。参见 [ECharts 5 新特性](${handbookPath}basics/release-note/v5-feature)。
+ `useCoarsePointer` 是否扩大可点击元素的响应范围。`null` 表示对移动设备开启;`true` 表示总是开启;`false` 表示总是不开启。参见[增加交互响应范围](${handbookPath}how-to/interaction/coarse-pointer)。
+ `pointerSize` 扩大元素响应范围的像素大小,配合 `opts.useCoarsePointer`使用。
diff --git a/zh/option/component/angle-axis.md b/zh/option/component/angle-axis.md
index b923f780..e39212f3 100644
--- a/zh/option/component/angle-axis.md
+++ b/zh/option/component/angle-axis.md
@@ -90,6 +90,18 @@ const option = {
~[400x400](${galleryViewPath}doc-example/polar-start-angle&edit=1&reset=1)
+## endAngle(number) = null
+
+
+
+结束刻度的角度,默认为 `null`,表示一整个圆。
+
+{{ use: partial-version(version = '5.5.0') }}
+
+如下示例是 endAngle 为 -180 的效果:
+
+~[400x400](${galleryViewPath}doc-example/polar-end-angle&edit=1&reset=1)
+
## clockwise(boolean) = true
diff --git a/zh/option/component/axis-common.md b/zh/option/component/axis-common.md
index 92053155..bc76b640 100644
--- a/zh/option/component/axis-common.md
+++ b/zh/option/component/axis-common.md
@@ -145,6 +145,62 @@ X 轴或者 Y 轴的轴线是否在另一个轴的 0 刻度上,只有在另一
是否显示最大 tick 的 label。可取值 `true`, `false`, `null`。默认自动判定(即如果标签重叠,不会显示最大 tick 的 label)。
+{{ if: ${componentType} === 'xAxis' }}
+
+##${prefix} alignMinLabel(string) = null
+
+{{ use: partial-version(version = '5.5.0') }}
+
+最小的坐标刻度标签的对齐方式。如果设置为 `null`,则和其他标签一致。参见 [align](~${componentType}.axisLabel.align)。
+
+可选:
++ `'left'`
++ `'center'`
++ `'right'`
++ `null` (default)
+
+##${prefix} alignMaxLabel(string) = null
+
+{{ use: partial-version(version = '5.5.0') }}
+
+最大的坐标刻度标签的对齐方式。如果设置为 `null`,则和其他标签一致。参见 [align](~${componentType}.axisLabel.align)。
+
+可选:
++ `'left'`
++ `'center'`
++ `'right'`
++ `null` (default)
+
+{{ /if }}
+
+{{ if: ${componentType} === 'yAxis' }}
+
+##${prefix} verticalAlignMinLabel(string) = null
+
+{{ use: partial-version(version = '5.5.0') }}
+
+最小的坐标刻度标签的对齐方式。如果设置为 `null`,则和其他标签一致。参见 [align](~${componentType}.axisLabel.verticalAlign)。
+
+可选:
++ `'top'`
++ `'middle'`
++ `'bottom'`
++ `null` (default)
+
+##${prefix} verticalAlignMaxLabel(string) = null
+
+{{ use: partial-version(version = '5.5.0') }}
+
+最大的坐标刻度标签的对齐方式。如果设置为 `null`,则和其他标签一致。参见 [align](~${componentType}.axisLabel.verticalAlign)。
+
+可选:
++ `'top'`
++ `'middle'`
++ `'bottom'`
++ `null` (default)
+
+{{ /if }}
+
##${prefix} hideOverlap(boolean)
diff --git a/zh/option/component/tooltip.md b/zh/option/component/tooltip.md
index 16345839..abedd35c 100644
--- a/zh/option/component/tooltip.md
+++ b/zh/option/component/tooltip.md
@@ -199,6 +199,8 @@ const option = {
version = "4.7.0"
) }}
+(已废弃,请使用 [appendTo](~tooltip.appendTo)。)
+
是否将 tooltip 的 DOM 节点添加为 HTML 的 `` 的子节点。只有当 [renderMode](~tooltip.renderMode) 为 `'html'` 是有意义的。
默认值是 `false`。`false` 表示,tooltip 的 DOM 节点会被添加为本图表的 DOM container 的一个子孙节点。但是这种方式导致,如果本图表的 DOM container 的祖先节点有设置 `overflow: hidden`,那么当 tooltip 超出 container 范围使可能被截断。这个问题一定程度上可以用 [tooltip.confine](~tooltip.confine) 来解决,但是不一定能解决所有场景。
@@ -207,6 +209,20 @@ const option = {
注:CSS transform 的场景,这也可以使用。
+## appendTo() = Function | HTMLElement | string | null
+
+{{ use: partial-version(
+ version = "5.5.0"
+) }}
+
+将 tooltip 的 DOM 节点添加到哪个节点下。只有当 [renderMode](~tooltip.renderMode) 为 `'html'` 是有意义的。
+
+默认值是 `null`,表示 tooltip 的 DOM 节点会被添加为本图表的 DOM container 的一个子孙节点。但是这种方式导致,如果本图表的 DOM container 的祖先节点有设置 `overflow: hidden`,那么当 tooltip 超出 container 范围使可能被截断。这个问题一定程度上可以用 [tooltip.confine](~tooltip.confine) 来解决,但是不一定能解决所有场景。
+
+对于这样的场景,可以指定 `appendTo`。当其为 `Function` 形式时,接口形如 `(chartContainer: HTMLElement) => HTMLElement | undefined | null`,即返回 tooltip 的 DOM 节点应该添加到哪个节点下。返回 `undefined` 或 `null` 表示采用上述的默认逻辑。返回 `HTMLElement` 表示添加到该节点下。
+
+注:CSS transform 的场景,这也可以使用。
+
## className(string)
diff --git a/zh/option/partial/clip.md b/zh/option/partial/clip.md
index 3e4e350d..9fb6a166 100644
--- a/zh/option/partial/clip.md
+++ b/zh/option/partial/clip.md
@@ -16,7 +16,8 @@
+ 折线图:裁掉所有超出坐标系的折线部分,拐点图形的逻辑按照散点图处理
+ 路径图:裁掉所有超出坐标系的部分
+ K 线图:忽略整体都超出坐标系的图形,但是不裁剪单个图形
++ 象形柱图:裁掉所有超出坐标系的部分(从 v5.5.0 开始支持)
+ 自定义系列:裁掉所有超出坐标系的部分
-除了自定义系列,其它系列的默认值都为 true,及开启裁剪,如果你觉得不想要裁剪的话,可以设置成 false 关闭。
+除了象形柱图和自定义系列,其它系列的默认值都为 true,及开启裁剪,如果你觉得不想要裁剪的话,可以设置成 false 关闭。
diff --git a/zh/option/partial/encode-dimensions.md b/zh/option/partial/encode-dimensions.md
index 312e87e4..f67ace7e 100644
--- a/zh/option/partial/encode-dimensions.md
+++ b/zh/option/partial/encode-dimensions.md
@@ -55,8 +55,11 @@ encode: {
itemId: 2,
// 指定数据项的名称使用第三个维度在饼图等图表中有用,可以使这个名字显示在图例(legend)中。
itemName: 3,
- // 指定数据项的组 ID (groupID),组 ID 会被用于分类数据,并在全局过渡动画中决定如何进行合并和分裂动画,具体见 universalTransition
- itemGroupId: 4
+ // 指定数据项的组 ID (groupId)。当全局过渡动画功能开启时,setOption 前后拥有相同 groupId 的数据项会进行动画过渡。
+ itemGroupId: 4,
+ // 指定数据项对应的子数据组 ID (childGroupId),用于实现多层下钻和聚合。详见 childGroupId。
+ // 从 v5.5.0 开始支持
+ itemChildGroupId: 5
}
// 直角坐标系(grid/cartesian)特有的属性:
diff --git a/zh/option/partial/group-id.md b/zh/option/partial/group-id.md
index 59393a85..141fa344 100644
--- a/zh/option/partial/group-id.md
+++ b/zh/option/partial/group-id.md
@@ -3,15 +3,61 @@
## dataGroupId(string)
-该系列所有数据共有的组 ID。组 ID 会被用于分类数据,并在全局过渡动画中决定如何进行合并和分裂动画。
-
-如果你使用了[dataset](~dataset)组件来表达数据,推荐使用`encode.itemGroupID`来指定哪个维度被编码为组 ID。
-
+该系列所有数据项的组 ID,优先级低于`groupId`。详见`series.data.groupId`。
{{ target: partial-data-group-id }}
#${prefix} groupId(string)
-该数据项的组 ID。组 ID 会被用于分类数据,并在全局过渡动画中决定如何进行合并和分裂动画。
+该数据项的组 ID。当全局过渡动画功能开启时,`setOption` 前后拥有相同组 ID 的数据项会进行动画过渡。
+
+若没有指定`groupId` ,会尝试用`series.dataGroupId`作为该数据项的组 ID;若`series.dataGroupId`也没有指定,则会使用数据项的 ID 作为组 ID。
+
+如果你使用了[dataset](~dataset)组件来表达数据,推荐使用`encode.itemGroupId`来指定哪个维度被编码为组 ID。
+
+
+{{ target: partial-data-child-group-id }}
+
+#${prefix} childGroupId(string)
+
+{{ use: partial-version(
+ version = "5.5.0"
+) }}
+
+该数据项对应的子数据组 ID,用于实现多层下钻和聚合。
+
+~[700x300](${galleryViewPath}doc-example/bar-multi-drilldown&edit=1&reset=1)
+
+通过`groupId`已经可以达到数据下钻和聚合的效果,但只支持一层的下钻和聚合。为了实现多层下钻和聚合,我们又引入了`childGroupId`。
+
+引入`childGroupId`后,不同`option`的数据项之间就能形成逻辑上的父子关系,例如:
+
+```text
+data: [ data: [ data: [
+ { { {
+ name: 'Animals', name: 'Dogs', name: 'Corgi',
+ value: 3, value: 3, value: 5,
+ groupId: 'things', groupId: 'animals', groupId: 'dogs'
+ childGroupId: 'animals' childGroupId: 'dogs' },
+ }, }, {
+ { { name: 'Bulldog',
+ name: 'Fruits', name: 'Cats', value: 6,
+ value: 3, value: 4, groupId: 'dogs'
+ groupId: 'things', groupId: 'animals', },
+ childGroupId: 'fruits' childGroupId: 'cats', {
+ }, }, name: 'Shiba Inu',
+ { { value: 7,
+ name: 'Cars', name: 'Birds', groupId: 'dogs'
+ value: 2, value: 3, }
+ groupId: 'things', groupId: 'animals', ]
+ childGroupId: 'cars' childGroupId: 'birds'
+ } }
+] ]
+```
+
+上面 3 组 data 分别来自 3 个 option ,通过`groupId`和`childGroupId`,它们之间存在了“父-子-孙”的关系。在`setOption`时,Apache ECharts 会尝试寻找前后`option`数据项间的父子关系,若存在父子关系,则会对相关数据项进行下钻或聚合动画的过渡。
+
+没有对应子数据组的数据项不需要指定`childGroupId`。
+如果你使用了[dataset](~dataset)组件来表达数据,推荐使用`encode.itemChildGroupId`来指定哪个维度被编码为子数据组 ID。
diff --git a/zh/option/partial/universal-transition.md b/zh/option/partial/universal-transition.md
index 58699a92..e8db608c 100644
--- a/zh/option/partial/universal-transition.md
+++ b/zh/option/partial/universal-transition.md
@@ -11,7 +11,7 @@
全局过渡动画(Universal Transition)提供了任意系列之间进行变形动画的功能。开启该功能后,每次`setOption`,相同`id`的系列之间会自动关联进行动画的过渡,更细粒度的关联配置见`universalTransition.seriesKey`配置。
-通过配置`encode.itemGroupId`或者`dataGroupId`等指定数据的分组,还可以实现诸如下钻,聚合等一对多或者多对一的动画。
+通过配置数据项的`groupId`和`childGroupId`,还可以实现诸如下钻,聚合等一对多或者多对一的动画。
可以直接在系列中配置 `universalTransition: true` 开启该功能。也可以提供一个对象进行更多属性的配置。
diff --git a/zh/option/series/bar.md b/zh/option/series/bar.md
index 355f0d80..3bbdd571 100644
--- a/zh/option/series/bar.md
+++ b/zh/option/series/bar.md
@@ -240,8 +240,9 @@ option = {
可选:
+ `'lttb'` 采用 Largest-Triangle-Three-Bucket 算法,可以最大程度保证采样后线条的趋势,形状和极值。
+ `'average'` 取过滤点的平均值
-+ `'max'` 取过滤点的最大值
+ `'min'` 取过滤点的最小值
++ `'max'` 取过滤点的最大值
++ `'minmax'` 取过滤点绝对值的最大极值 (从 `v5.5.0` 开始支持)
+ `'sum'` 取过滤点的和
{{ use: partial-cursor() }}
@@ -292,6 +293,10 @@ option = {
prefix = '##'
) }}
+{{ use: partial-data-child-group-id(
+ prefix = '##'
+) }}
+
{{ use: partial-bar-state(
prefix = "##",
topLevel = false,
diff --git a/zh/option/series/boxplot.md b/zh/option/series/boxplot.md
index 48bb817d..030a157c 100644
--- a/zh/option/series/boxplot.md
+++ b/zh/option/series/boxplot.md
@@ -227,6 +227,10 @@ ECharts 并不内置对原始数据的处理,输入给 `boxplot` 的数据须
prefix = '##'
) }}
+{{ use: partial-data-child-group-id(
+ prefix = '##'
+) }}
+
### itemStyle(Object)
盒须图单个数据样式。
diff --git a/zh/option/series/candlestick.md b/zh/option/series/candlestick.md
index 3a61f44f..6a6d077f 100644
--- a/zh/option/series/candlestick.md
+++ b/zh/option/series/candlestick.md
@@ -397,6 +397,10 @@ K 线图的选中状态。开启 [selectedMode](~series-candlestick.selectedMode
prefix = '##'
) }}
+{{ use: partial-data-child-group-id(
+ prefix = '##'
+) }}
+
### itemStyle(Object)
单个 K 线图数据的图形样式。
diff --git a/zh/option/series/custom.md b/zh/option/series/custom.md
index d9d48804..e4390f3f 100644
--- a/zh/option/series/custom.md
+++ b/zh/option/series/custom.md
@@ -431,6 +431,10 @@ renderItem 函数的第二个参数。
prefix = '##'
) }}
+{{ use: partial-data-child-group-id(
+ prefix = '##'
+) }}
+
### itemStyle(Object)
{{ use: partial-item-style(
diff --git a/zh/option/series/heatmap.md b/zh/option/series/heatmap.md
index ea944602..29fe9443 100644
--- a/zh/option/series/heatmap.md
+++ b/zh/option/series/heatmap.md
@@ -205,6 +205,10 @@ option = {
prefix = '##'
) }}
+{{ use: partial-data-child-group-id(
+ prefix = '##'
+) }}
+
### label(Object)
在直角坐标系([coordinateSystem](~series-heatmap.coordinateSystem): 'cartesian2d')上有效。
diff --git a/zh/option/series/line.md b/zh/option/series/line.md
index c446b08b..a8a7bfc3 100644
--- a/zh/option/series/line.md
+++ b/zh/option/series/line.md
@@ -333,8 +333,9 @@ const option = {
可选:
+ `'lttb'` 采用 Largest-Triangle-Three-Bucket 算法,可以最大程度保证采样后线条的趋势,形状和极值。
+ `'average'` 取过滤点的平均值
-+ `'max'` 取过滤点的最大值
+ `'min'` 取过滤点的最小值
++ `'max'` 取过滤点的最大值
++ `'minmax'` 取过滤点绝对值的最大极值 (从 `v5.5.0` 开始支持)
+ `'sum'` 取过滤点的和
{{ use: partial-series-dimensions(
@@ -367,6 +368,10 @@ const option = {
prefix = '##'
) }}
+{{ use: partial-data-child-group-id(
+ prefix = '##'
+) }}
+
{{ use: partial-symbol(
defaultSymbol = "'circle'",
defaultSymbolSize = 4,
diff --git a/zh/option/series/lines.md b/zh/option/series/lines.md
index ea40b8e7..796a02b7 100644
--- a/zh/option/series/lines.md
+++ b/zh/option/series/lines.md
@@ -232,6 +232,10 @@ ECharts 2.x 里会用地图上的 `markLine` 去绘制迁徙效果,在 ECharts
prefix = '##'
) }}
+{{ use: partial-data-child-group-id(
+ prefix = '##'
+) }}
+
### coords(Array)
一个包含两个到多个二维坐标的数组。在 [polyline](~series-lines.polyline) 设置为 `true` 时支持多于两个的坐标。
diff --git a/zh/option/series/map.md b/zh/option/series/map.md
index 02ef3ce6..bb9d9ab9 100644
--- a/zh/option/series/map.md
+++ b/zh/option/series/map.md
@@ -101,6 +101,10 @@ center: [115.97, '30%']
prefix = '##'
) }}
+{{ use: partial-data-child-group-id(
+ prefix = '##'
+) }}
+
### selected(boolean) = false
该区域是否选中。
diff --git a/zh/option/series/pictorialBar.md b/zh/option/series/pictorialBar.md
index bfd1477d..48829ee9 100644
--- a/zh/option/series/pictorialBar.md
+++ b/zh/option/series/pictorialBar.md
@@ -244,6 +244,10 @@ option = {
prefix = '##'
) }}
+{{ use: partial-data-child-group-id(
+ prefix = '##'
+) }}
+
{{ use: pictorialBar-symbol-attrs(
prefix = "##",
useZ2 = true
@@ -329,6 +333,11 @@ option = {
hasType = true
) }}
+{{ use: partial-clip(
+ prefix = "#",
+ defaultClip = false
+) }}
+
{{ use: partial-z-zlevel(
prefix = "#",
componentName = "象形柱图"
diff --git a/zh/option/series/pie.md b/zh/option/series/pie.md
index 12b8804f..dfd3159e 100644
--- a/zh/option/series/pie.md
+++ b/zh/option/series/pie.md
@@ -81,12 +81,34 @@ const option = {
起始角度,支持范围[0, 360]。
+## endAngle(number|string) = 'auto'
+
+
+
+{{ use: partial-version(
+ version = "5.5.0"
+) }}
+
+结束角度,默认值是 `'auto'`。
+
+当值为 `'auto'` 时,根据 [startAngle](~series-pie.startAngle) 自动计算结束角度,以确保是一个完整的圆。
+
## minAngle(number) = 0
最小的扇区角度(0 ~ 360),用于防止某个值过小导致扇区太小影响交互。
+## padAngle(number) = 0
+
+
+
+{{ use: partial-version(
+ version = "5.5.0"
+) }}
+
+饼图扇区之间的间隔角度(0 ~ 360)。
+
## minShowLabelAngle(number) = 0
@@ -357,6 +379,10 @@ const option = {
prefix = '##'
) }}
+{{ use: partial-data-child-group-id(
+ prefix = '##'
+) }}
+
### selected(boolean) = false
该数据项是否被选中。
diff --git a/zh/option/series/radar.md b/zh/option/series/radar.md
index f2431fd9..79b87f0d 100644
--- a/zh/option/series/radar.md
+++ b/zh/option/series/radar.md
@@ -199,6 +199,10 @@ data : [
prefix = '##'
) }}
+{{ use: partial-data-child-group-id(
+ prefix = '##'
+) }}
+
{{ use: partial-symbol(
defaultSymbol = "'circle'",
defaultSymbolSize = 4,
diff --git a/zh/option/series/scatter.md b/zh/option/series/scatter.md
index 757f6c0b..029a61cb 100644
--- a/zh/option/series/scatter.md
+++ b/zh/option/series/scatter.md
@@ -244,6 +244,10 @@ const option = {
prefix = '##'
) }}
+{{ use: partial-data-child-group-id(
+ prefix = '##'
+) }}
+
{{ use: partial-symbol(
prefix = "##",
name = "单个数据"