From 6781a9ec0dd15e68808e4452ea2e83f24f26f299 Mon Sep 17 00:00:00 2001 From: Lam Tang Date: Sun, 30 Oct 2022 00:25:32 +0800 Subject: [PATCH 01/17] docs: update documents for multiple level drilldown - `childGroupId` (#295) * all placeholders for multi-drilldown document * finish series.data.groupId & series.data.childGroupId * finish series.encode.itemGroupId & series.encode.itemChildGroupId * modify the description of groupId * improve data example * finish series.universalTransition * finish series.dataGroupId * improve series.data.groupId * update data example * finish english docs for multiple levels downdrill feature * use "parent" rather "father" and use "Apache ECharts" rather "Echarts" --- en/option/partial/encode-dimensions.md | 10 +++-- en/option/partial/group-id.md | 52 +++++++++++++++++++++-- en/option/partial/universal-transition.md | 2 +- en/option/series/bar.md | 4 ++ en/option/series/boxplot.md | 4 ++ en/option/series/candlestick.md | 4 ++ en/option/series/custom.md | 4 ++ en/option/series/heatmap.md | 4 ++ en/option/series/line.md | 5 +++ en/option/series/lines.md | 4 ++ en/option/series/map.md | 4 ++ en/option/series/pictorialBar.md | 4 ++ en/option/series/pie.md | 4 ++ en/option/series/radar.md | 4 ++ en/option/series/scatter.md | 4 ++ zh/option/partial/encode-dimensions.md | 6 ++- zh/option/partial/group-id.md | 52 ++++++++++++++++++++--- zh/option/partial/universal-transition.md | 2 +- zh/option/series/bar.md | 4 ++ zh/option/series/boxplot.md | 4 ++ zh/option/series/candlestick.md | 4 ++ zh/option/series/custom.md | 4 ++ zh/option/series/heatmap.md | 4 ++ zh/option/series/line.md | 4 ++ zh/option/series/lines.md | 4 ++ zh/option/series/map.md | 4 ++ zh/option/series/pictorialBar.md | 4 ++ zh/option/series/pie.md | 4 ++ zh/option/series/radar.md | 4 ++ zh/option/series/scatter.md | 4 ++ 30 files changed, 205 insertions(+), 16 deletions(-) diff --git a/en/option/partial/encode-dimensions.md b/en/option/partial/encode-dimensions.md index 356b0440..86d02f6f 100644 --- a/en/option/partial/encode-dimensions.md +++ b/en/option/partial/encode-dimensions.md @@ -60,9 +60,13 @@ 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. + 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..21d6519e 100644 --- a/en/option/partial/group-id.md +++ b/en/option/partial/group-id.md @@ -3,15 +3,59 @@ ## 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) + +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-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/universal-transition.md b/en/option/partial/universal-transition.md index ffece5e8..eea47674 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 338eb1bf..6b663dc0 100644 --- a/en/option/series/bar.md +++ b/en/option/series/bar.md @@ -216,6 +216,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 934882e8..2c7dfe1f 100644 --- a/en/option/series/candlestick.md +++ b/en/option/series/candlestick.md @@ -209,6 +209,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 3815a6b6..a98d51c2 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 010ef1c1..3840b495 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..70f33f0b 100644 --- a/en/option/series/line.md +++ b/en/option/series/line.md @@ -338,6 +338,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 +495,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 d07c4e83..36df7891 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 fb3d335f..0f41f84d 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 85cbcd5f..6f27928b 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 diff --git a/en/option/series/pie.md b/en/option/series/pie.md index d90c10ca..717740e9 100644 --- a/en/option/series/pie.md +++ b/en/option/series/pie.md @@ -334,6 +334,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/option/partial/encode-dimensions.md b/zh/option/partial/encode-dimensions.md index 312e87e4..f7cdb0ed 100644 --- a/zh/option/partial/encode-dimensions.md +++ b/zh/option/partial/encode-dimensions.md @@ -55,8 +55,10 @@ encode: { itemId: 2, // 指定数据项的名称使用第三个维度在饼图等图表中有用，可以使这个名字显示在图例（legend）中。 itemName: 3, - // 指定数据项的组 ID (groupID)，组 ID 会被用于分类数据，并在全局过渡动画中决定如何进行合并和分裂动画，具体见 universalTransition - itemGroupId: 4 + // 指定数据项的组 ID (groupId)。当全局过渡动画功能开启时，setOption 前后拥有相同 groupId 的数据项会进行动画过渡。 + itemGroupId: 4, + // 指定数据项对应的子数据组 ID (childGroupId)，用于实现多层下钻和聚合。详见 childGroupId。 + itemChildGroupId: 5 } // 直角坐标系（grid/cartesian）特有的属性： diff --git a/zh/option/partial/group-id.md b/zh/option/partial/group-id.md index 59393a85..bb10a2b4 100644 --- a/zh/option/partial/group-id.md +++ b/zh/option/partial/group-id.md @@ -3,15 +3,57 @@ ## 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) + +该数据项对应的子数据组 ID，用于实现多层下钻和聚合。 + +~[700x300](${galleryViewPath}doc-example/bar-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 d850e2a9..c4e7b1b9 100644 --- a/zh/option/series/bar.md +++ b/zh/option/series/bar.md @@ -292,6 +292,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 a79941dc..481cb8bc 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 b08c1e0e..7f2b8b21 100644 --- a/zh/option/series/candlestick.md +++ b/zh/option/series/candlestick.md @@ -396,6 +396,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..8519e05a 100644 --- a/zh/option/series/line.md +++ b/zh/option/series/line.md @@ -367,6 +367,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 ab2187e4..de1b9b8d 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..7f8a622f 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 diff --git a/zh/option/series/pie.md b/zh/option/series/pie.md index 794f6203..d3c07ad3 100644 --- a/zh/option/series/pie.md +++ b/zh/option/series/pie.md @@ -357,6 +357,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 = "单个数据" From 371bc7574d1e99f50838248120d961a7b835bd26 Mon Sep 17 00:00:00 2001 From: Lam Tang Date: Sat, 3 Dec 2022 18:24:34 +0800 Subject: [PATCH 02/17] add version tip for `childGroupId` and add version comment for `encode.itemChildGroupId` --- en/option/partial/encode-dimensions.md | 1 + en/option/partial/group-id.md | 4 ++++ zh/option/partial/encode-dimensions.md | 1 + zh/option/partial/group-id.md | 4 ++++ 4 files changed, 10 insertions(+) diff --git a/en/option/partial/encode-dimensions.md b/en/option/partial/encode-dimensions.md index 86d02f6f..663604d1 100644 --- a/en/option/partial/encode-dimensions.md +++ b/en/option/partial/encode-dimensions.md @@ -66,6 +66,7 @@ encode: { 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 } diff --git a/en/option/partial/group-id.md b/en/option/partial/group-id.md index 21d6519e..7e0601ba 100644 --- a/en/option/partial/group-id.md +++ b/en/option/partial/group-id.md @@ -23,6 +23,10 @@ If you are using the [dataset](~dataset) component to represent data, you are re #${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-drilldown&edit=1&reset=1) diff --git a/zh/option/partial/encode-dimensions.md b/zh/option/partial/encode-dimensions.md index f7cdb0ed..f67ace7e 100644 --- a/zh/option/partial/encode-dimensions.md +++ b/zh/option/partial/encode-dimensions.md @@ -58,6 +58,7 @@ encode: { // 指定数据项的组 ID (groupId)。当全局过渡动画功能开启时，setOption 前后拥有相同 groupId 的数据项会进行动画过渡。 itemGroupId: 4, // 指定数据项对应的子数据组 ID (childGroupId)，用于实现多层下钻和聚合。详见 childGroupId。 + // 从 v5.5.0 开始支持 itemChildGroupId: 5 } diff --git a/zh/option/partial/group-id.md b/zh/option/partial/group-id.md index bb10a2b4..19ebb342 100644 --- a/zh/option/partial/group-id.md +++ b/zh/option/partial/group-id.md @@ -21,6 +21,10 @@ #${prefix} childGroupId(string) +{{ use: partial-version( + version = "5.5.0" +) }} + 该数据项对应的子数据组 ID，用于实现多层下钻和聚合。 ~[700x300](${galleryViewPath}doc-example/bar-drilldown&edit=1&reset=1) From 0be16504585e0ab73604b5cec3a4389a022e87ed Mon Sep 17 00:00:00 2001 From: Lam Tang Date: Sat, 3 Dec 2022 18:25:58 +0800 Subject: [PATCH 03/17] "bar-drilldown" to "bar-multi-drilldown" --- en/option/partial/group-id.md | 2 +- zh/option/partial/group-id.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/en/option/partial/group-id.md b/en/option/partial/group-id.md index 7e0601ba..c3c404ab 100644 --- a/en/option/partial/group-id.md +++ b/en/option/partial/group-id.md @@ -29,7 +29,7 @@ If you are using the [dataset](~dataset) component to represent data, you are re 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-drilldown&edit=1&reset=1) +~[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. diff --git a/zh/option/partial/group-id.md b/zh/option/partial/group-id.md index 19ebb342..141fa344 100644 --- a/zh/option/partial/group-id.md +++ b/zh/option/partial/group-id.md @@ -27,7 +27,7 @@ 该数据项对应的子数据组 ID，用于实现多层下钻和聚合。 -~[700x300](${galleryViewPath}doc-example/bar-drilldown&edit=1&reset=1) +~[700x300](${galleryViewPath}doc-example/bar-multi-drilldown&edit=1&reset=1) 通过`groupId`已经可以达到数据下钻和聚合的效果，但只支持一层的下钻和聚合。为了实现多层下钻和聚合，我们又引入了`childGroupId`。 From 1258327c38dc8ab025ae5a12ce32c3edec0b1bc7 Mon Sep 17 00:00:00 2001 From: "linghao.su" Date: Mon, 3 Jul 2023 13:10:06 +0800 Subject: [PATCH 04/17] feat(pie): add new attribute endAngle --- en/option/series/pie.md | 7 +++++++ zh/option/series/pie.md | 8 ++++++++ 2 files changed, 15 insertions(+) diff --git a/en/option/series/pie.md b/en/option/series/pie.md index ba2258f1..601d0427 100644 --- a/en/option/series/pie.md +++ b/en/option/series/pie.md @@ -60,6 +60,13 @@ Whether the layout of sectors of pie chart is clockwise. The start angle, which range is [0, 360]. +## endAngle(number|string) = 'auto' + + + +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 diff --git a/zh/option/series/pie.md b/zh/option/series/pie.md index 1c418052..338a8c69 100644 --- a/zh/option/series/pie.md +++ b/zh/option/series/pie.md @@ -81,6 +81,14 @@ const option = { 起始角度，支持范围[0, 360]。 +## endAngle(number|string) = 'auto' + + + +结束角度，默认值是 `'auto'`。 + +当值为 `'auto'` 时，根据 [startAngle](~series-pie.startAngle) 自动计算结束角度，以确保是一个完整的圆。 + ## minAngle(number) = 0 From d959c20f05967df6b6ebd2a4810c3e9968382f14 Mon Sep 17 00:00:00 2001 From: "linghao.su" Date: Mon, 4 Sep 2023 19:59:05 +0800 Subject: [PATCH 05/17] feat(pie): add padAngle doc description --- en/option/series/pie.md | 6 ++++++ zh/option/series/pie.md | 6 ++++++ 2 files changed, 12 insertions(+) diff --git a/en/option/series/pie.md b/en/option/series/pie.md index 52ebcce6..5ba9af1a 100644 --- a/en/option/series/pie.md +++ b/en/option/series/pie.md @@ -66,6 +66,12 @@ The start angle, which range is [0, 360]. 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 + + + +The interval between pie chart sectors (0 ~ 360). + ## minShowLabelAngle(number) = 0 diff --git a/zh/option/series/pie.md b/zh/option/series/pie.md index 12b8804f..a60bfafd 100644 --- a/zh/option/series/pie.md +++ b/zh/option/series/pie.md @@ -87,6 +87,12 @@ const option = { 最小的扇区角度（0 ~ 360），用于防止某个值过小导致扇区太小影响交互。 +## padAngle(number) = 0 + + + +饼图扇区之间的间隔（0 ~ 360）。 + ## minShowLabelAngle(number) = 0 From e6be39687e662458e6a68982cf34c6c8d692d949 Mon Sep 17 00:00:00 2001 From: ChepteaCatalin <71984989+ChepteaCatalin@users.noreply.github.com> Date: Sun, 17 Sep 2023 18:50:53 +0300 Subject: [PATCH 06/17] feat(tooltip): add dataIndex to valueFormatter callback --- en/option/partial/tooltip-common.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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: From 8efd12f1ecb9c774b76da5cb22b3e894d8c358a4 Mon Sep 17 00:00:00 2001 From: plainheart Date: Tue, 19 Sep 2023 15:40:28 +0800 Subject: [PATCH 07/17] add version tip for `pie.endAngle` --- en/option/series/pie.md | 7 ++++++- zh/option/series/pie.md | 6 +++++- 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/en/option/series/pie.md b/en/option/series/pie.md index 601d0427..fd401096 100644 --- a/en/option/series/pie.md +++ b/en/option/series/pie.md @@ -62,11 +62,16 @@ 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 diff --git a/zh/option/series/pie.md b/zh/option/series/pie.md index 338a8c69..4bd5ccbd 100644 --- a/zh/option/series/pie.md +++ b/zh/option/series/pie.md @@ -83,7 +83,11 @@ const option = { ## endAngle(number|string) = 'auto' - + + +{{ use: partial-version( + version = "5.5.0" +) }} 结束角度，默认值是 `'auto'`。 From 75422229378aaaada65222fa9452e34fd2528500 Mon Sep 17 00:00:00 2001 From: plainheart Date: Tue, 19 Sep 2023 17:40:17 +0800 Subject: [PATCH 08/17] add version tip for `pie.padAngle` (#358) --- en/option/series/pie.md | 6 +++++- zh/option/series/pie.md | 6 +++++- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/en/option/series/pie.md b/en/option/series/pie.md index 99b24b92..989ca9a0 100644 --- a/en/option/series/pie.md +++ b/en/option/series/pie.md @@ -82,7 +82,11 @@ The minimum angle of sector (0 ~ 360). It prevents some sector from being too sm -The interval between pie chart sectors (0 ~ 360). +{{ use: partial-version( + version = "5.5.0" +) }} + +The interval angle between the sectors (0 ~ 360). ## minShowLabelAngle(number) = 0 diff --git a/zh/option/series/pie.md b/zh/option/series/pie.md index 50bae63d..f94f4e90 100644 --- a/zh/option/series/pie.md +++ b/zh/option/series/pie.md @@ -103,7 +103,11 @@ const option = { -饼图扇区之间的间隔（0 ~ 360）。 +{{ use: partial-version( + version = "5.5.0" +) }} + +饼图扇区之间的间隔角度（0 ~ 360）。 ## minShowLabelAngle(number) = 0 From 923437458e5930072ff6db5c5ec9861bf15bffb5 Mon Sep 17 00:00:00 2001 From: Ovilia Date: Thu, 12 Oct 2023 17:05:29 +0800 Subject: [PATCH 09/17] feat(pictorialBar): add doc for clip apache/echarts#19197 --- en/option/partial/clip.md | 3 ++- en/option/series/pictorialBar.md | 5 +++++ zh/option/partial/clip.md | 3 ++- zh/option/series/pictorialBar.md | 5 +++++ 4 files changed, 14 insertions(+), 2 deletions(-) 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/series/pictorialBar.md b/en/option/series/pictorialBar.md index d7a2ee67..785c1c56 100644 --- a/en/option/series/pictorialBar.md +++ b/en/option/series/pictorialBar.md @@ -280,6 +280,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/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/series/pictorialBar.md b/zh/option/series/pictorialBar.md index bfd1477d..1c314e20 100644 --- a/zh/option/series/pictorialBar.md +++ b/zh/option/series/pictorialBar.md @@ -329,6 +329,11 @@ option = { hasType = true ) }} +{{ use: partial-clip( + prefix = "#", + defaultClip = false +) }} + {{ use: partial-z-zlevel( prefix = "#", componentName = "象形柱图" From f5b94e8bb735c670eaea058c14f2f772116f5233 Mon Sep 17 00:00:00 2001 From: Said Nukhulov Date: Tue, 7 Nov 2023 17:29:46 +0300 Subject: [PATCH 10/17] feat(sampler): add min-max sampler function --- en/option/series/bar.md | 3 ++- en/option/series/line.md | 3 ++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/en/option/series/bar.md b/en/option/series/bar.md index a27da5cb..1bd5bfb0 100644 --- a/en/option/series/bar.md +++ b/en/option/series/bar.md @@ -164,8 +164,9 @@ The dowmsampling strategy used when the data size is much larger than pixel size 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 + `'sum'` Use sum of filter points {{ use: partial-cursor() }} diff --git a/en/option/series/line.md b/en/option/series/line.md index 527d33c4..a325a2df 100644 --- a/en/option/series/line.md +++ b/en/option/series/line.md @@ -304,8 +304,9 @@ The dowmsampling strategy used when the data size is much larger than pixel size 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 + `'sum'` Use sum of filter points {{ use: partial-series-dimensions( From b749cbdfa51885766205a88fdd05ca70ed6da1df Mon Sep 17 00:00:00 2001 From: Said Nukhulov Date: Tue, 28 Nov 2023 23:23:39 +0300 Subject: [PATCH 11/17] feat(sampler): add min-max sampler function --- zh/option/series/bar.md | 3 ++- zh/option/series/line.md | 3 ++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/zh/option/series/bar.md b/zh/option/series/bar.md index 355f0d80..491b7944 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'` 取过滤点绝对值的最大极值 + `'sum'` 取过滤点的和 {{ use: partial-cursor() }} diff --git a/zh/option/series/line.md b/zh/option/series/line.md index c446b08b..d4b50dc1 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'` 取过滤点绝对值的最大极值 + `'sum'` 取过滤点的和 {{ use: partial-series-dimensions( From 3b4d0223acafc64b4c03ecd51c5630e1c4261f0f Mon Sep 17 00:00:00 2001 From: plainheart Date: Thu, 30 Nov 2023 14:48:46 +0800 Subject: [PATCH 12/17] add version tip for new downsampling strategy `minmax` --- en/option/series/bar.md | 4 ++-- en/option/series/line.md | 4 ++-- zh/option/series/bar.md | 2 +- zh/option/series/line.md | 2 +- 4 files changed, 6 insertions(+), 6 deletions(-) diff --git a/en/option/series/bar.md b/en/option/series/bar.md index 1bd5bfb0..ed6208c2 100644 --- a/en/option/series/bar.md +++ b/en/option/series/bar.md @@ -159,14 +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 + `'min'` Use minimum value of filter points + `'max'` Use maximum value of filter points -+ `'minmax'` Use maximum extremum absolute 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() }} diff --git a/en/option/series/line.md b/en/option/series/line.md index a325a2df..1c5c7c42 100644 --- a/en/option/series/line.md +++ b/en/option/series/line.md @@ -299,14 +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 + `'min'` Use minimum value of filter points + `'max'` Use maximum value of filter points -+ `'minmax'` Use maximum extremum absolute 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( diff --git a/zh/option/series/bar.md b/zh/option/series/bar.md index 491b7944..47a47ec8 100644 --- a/zh/option/series/bar.md +++ b/zh/option/series/bar.md @@ -242,7 +242,7 @@ option = { + `'average'` 取过滤点的平均值 + `'min'` 取过滤点的最小值 + `'max'` 取过滤点的最大值 -+ `'minmax'` 取过滤点绝对值的最大极值 ++ `'minmax'` 取过滤点绝对值的最大极值 (从 `v5.5.0` 开始支持) + `'sum'` 取过滤点的和 {{ use: partial-cursor() }} diff --git a/zh/option/series/line.md b/zh/option/series/line.md index d4b50dc1..ea7f259d 100644 --- a/zh/option/series/line.md +++ b/zh/option/series/line.md @@ -335,7 +335,7 @@ const option = { + `'average'` 取过滤点的平均值 + `'min'` 取过滤点的最小值 + `'max'` 取过滤点的最大值 -+ `'minmax'` 取过滤点绝对值的最大极值 ++ `'minmax'` 取过滤点绝对值的最大极值 (从 `v5.5.0` 开始支持) + `'sum'` 取过滤点的和 {{ use: partial-series-dimensions( From 3d7d72d89a60967ff866ae8a68351ef564b1d22c Mon Sep 17 00:00:00 2001 From: Ovilia Date: Fri, 2 Feb 2024 14:29:36 +0800 Subject: [PATCH 13/17] doc: add doc for apache/echarts#18436 --- en/option/component/tooltip.md | 16 ++++++++++++++++ zh/option/component/tooltip.md | 16 ++++++++++++++++ 2 files changed, 32 insertions(+) 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 `