From c79428bf3b98feb723864e03fbe911afbd74987b Mon Sep 17 00:00:00 2001 From: lxfu1 <954055752@qq.com> Date: Fri, 16 Oct 2020 09:09:21 +0800 Subject: [PATCH] =?UTF-8?q?docs:=20=E5=8D=87=E7=BA=A7=E6=8C=87=E5=8D=97?= =?UTF-8?q?=E8=A1=A8=E6=A0=BC=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/manual/upgrade.en.md | 290 ++++++-------------------------------- docs/manual/upgrade.zh.md | 288 ++++++------------------------------- 2 files changed, 83 insertions(+), 495 deletions(-) diff --git a/docs/manual/upgrade.en.md b/docs/manual/upgrade.en.md index 9eb744a067..5715c4603f 100644 --- a/docs/manual/upgrade.en.md +++ b/docs/manual/upgrade.en.md @@ -1,5 +1,5 @@ --- -title: G2Plot 2.0 升级指南 +title: G2Plot 2.0 Upgrade guide order: 7 --- @@ -9,93 +9,24 @@ G2Plot 2.0 持续开发中,截止目前,我们已经完成了 P0 、P1 级 ## 删除图表 -**Bubble**: - -- 改用 Scatter 实现, 修改图表名称即可, 详细参考 [Scatter](../../examples/scatter/basic)。 - -**StackedColumn**: - -- 改用 Column 实现。 -- 删除 stackField 配置,改为 seriesField,需要指定 `isStack: true` , 详细参考 [Column](../../examples/column/stacked)。 - -**GroupedColumn**: - -- 改用 Column 实现。 -- 删除 groupField 配置,改为 seriesField,需要指定 `isGroup: true` , 详细参考 [Column](../../examples/column/grouped)。 - -**PercentStackedColumn**: - -- 改用 Column 实现。 -- 删除 stackField 配置,改为 seriesField,需要指定 `isStack: true`、`isGroup: true` , 详细参考 [Column](../../examples/column/percent)。 - -**RangeColumn**: - -- 改用 Column 实现。 -- 删除 stackField 配置,改为 seriesField,需要指定 `isRange: true` , 详细参考 [Column](../../examples/column/range)。 -- label 不再支持 topStyle、bottomStyle,详细配置请参考 [API](../../examples/column/range/API#label) 文档。 - -**StackedBar**: - -- 改用 Bar 实现。 -- 删除 stackField 配置,改为 seriesField,需要指定 `isStack: true` , 详细参考 [Bar](../../examples/bar/stacked)。 - -**GroupedBar**: - -- 改用 Bar 实现。 -- 删除 groupField 配置,改为 seriesField,需要指定 `isGroup: true` , 详细参考 [Bar](../../examples/bar/stacked)。 - -**PercentStackedBar**: - -- 改用 Bar 实现。 -- 删除 stackField 配置,改为 seriesField,需要指定 `isStack: true`、`isGroup: true` , 详细参考 [Bar](../../examples/bar/stacked)。 - -**RangeBar**: - -- 改用 Bar 实现。 -- 删除 stackField 配置,改为 seriesField,需要指定 `isRange: true` , 详细参考 [Bar](../../examples/bar/stacked)。 -- label 不再支持 topStyle、bottomStyle,详细配置请参考 [API](../../examples/bar/range/API#label) 文档 - -**Donut**: - -- 改用 Pie 实现,修改图表名称即可 , 详细参考 [Pie](../../examples/pie/basic)。 - -**DualLine**: - -- 改用 DualAxes 实现,详细参考 [Demos](../../examples/dual-axes/dual-line) 。 - -**ColumnLine**: - -- 改用 DualAxes 实现,详细参考 [Demos](../../examples/dual-axes/column-line) 。 - -**StackedColumnLine**: - -- 改用 DualAxes 实现,详细参考 [Demos](../../examples/dual-axes/stacked-column-line) 。 - -**GroupedColumnLine**: - -- 改用 DualAxes 实现,详细参考 [Demos](../../examples/dual-axes/grouped-column-line) 。 - -**StackedArea**: - -- 改用 Area 实现。 -- 去掉 stackField ,改用 seriesField 。 - -**PercentStackedArea**: - -- 改用 Area 实现。 -- 去掉 stackField ,改用 seriesField ,需要指定 `isStack: true` 。 - -**StepLine**: - -- 改用 Line 实现,需要指定 stepType,详细参考 [Line](../../examples/line/step)。 - -```ts -// 变更前 -step: 'hvh', // 可以选择 hv, vh, hvh, vhv - -// 变更后 -stepType: 'hvh', // 可以选择 hv, vh, hvh, vhv -``` +| 图表名称 | 描述 | 示例 | +| -------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------- | +| Bubble | 改用 Scatter 实现, 修改图表名称即可。 | [Scatter](../../examples/scatter/basic) | +| StackedColumn | 改用 Column 实现。
删除 stackField 配置,改为 seriesField,需要指定 `isStack: true` 。 | [Column](../../examples/column/stacked) | +| GroupedColumn | 改用 Column 实现。
删除 groupField 配置,改为 seriesField,需要指定 `isGroup: true` 。 | [Column](../../examples/column/grouped) | +| PercentStackedColumn | 改用 Column 实现。
删除 stackField 配置,改为 seriesField,需要指定 `isStack: true`、`isGroup: true` 。 | [Column](../../examples/column/percent) | +| RangeColumn | 改用 Column 实现。
删除 stackField 配置,改为 seriesField,需要指定 `isRange: true` 。
label 不再支持 topStyle、bottomStyle,详细配置请参考 [API](../../examples/column/range/API#label) 文档。 | [Column](../../examples/column/range) | +| StackedBar | 改用 Bar 实现。
删除 groupField 配置,改为 seriesField,需要指定 `isGroup: true` 。 | [Bar](../../examples/bar/stacked) | +| PercentStackedBar | 改用 Bar 实现。
删除 stackField 配置,改为 seriesField,需要指定 `isStack: true`、`isGroup: true` 。 | [Bar](../../examples/bar/percent) | +| RangeBar | 改用 Bar 实现。
删除 stackField 配置,改为 seriesField,需要指定 `isRange: true` 。
label 不再支持 topStyle、bottomStyle,详细配置请参考 [API](../../examples/bar/range/API#label) 文档 | [Bar](../../examples/bar/stacked) | +| Donut | 改用 Pie 实现,修改图表名称即可 。 | [Pie](../../examples/pie/donut) | +| DualLine | 改用 DualAxes 实现。 | [Demos](../../examples/dual-axes/dual-line) | +| ColumnLine | 改用 DualAxes 实现。 | [Demos](../../examples/dual-axes/column-line) | +| StackedColumnLine | 改用 DualAxes 实现。 | [Demos](../../examples/dual-axes/stacked-column-line) | +| GroupedColumnLine | 改用 DualAxes 实现 。 | [Demos](../../examples/dual-axes/grouped-column-line) | +| StackedArea | 改用 Area 实现。
去掉 stackField ,改用 seriesField 。 | [Area](../../examples/area/stacked) | +| PercentStackedArea | 改用 Area 实现。去掉 stackField ,改用 seriesField ,需要指定 `isStack: true` 。 | - | +| StepLine | 改用 Line 实现,需要指定 stepType。
1.0 版版本可以使用默认 step ,2.0 版本必须手动指定 stepType(hv, vh, hvh, vhv), | [Line](../../examples/line/step) | ## 配置变更 @@ -103,169 +34,32 @@ G2Plot 2.0 兼容大部分的 1.x 版本图表功能和配置项,详情如下 ### 通用配置 -**title**: 不再支持 - -**description**: 不再支持 - -**forceFit**: 不再支持,改用 autoFit - -**responsive**:不再支持,内置。 - -**guideLine**:不再支持,改用 [anniotations](../../examples/general/annotation) 实现。 - -**label**:label.type 会有兼容性问题,如果报错修改 type 配置或者去掉 。 - -**slider**: - -```ts -// 变更前 -interactions: [ - { - type: 'slider', - start: 0.1, - end: 0.8 - }, -], -// 变更后 -slider: { - start: 0.1, - end: 0.8 -}, -``` - -**scrollbar**: - -```ts -// 变更前 -interactions: [ - { - type: 'scrollbar', - }, -], -// 变更后 -scrollbar: {}, -``` - -**events**: - -```ts -// 变更前 -events: { - 'plot:click': callback -} -// 变更后 -chart.on('element:click', callback) -``` - -**visible**: - -```ts -// 变更前 -label: { - visible: false -} -label: { - visible: true, - fill: 'red' -} -// 变更后 -label: false -label: { - fill: 'red' -} -``` - -**animation**: - -```ts -// 变更前 -... -// 变更后 -默认为 true,也可以自己设定。 - -animation: { - appear: { - duration: 300, - easing: 'linear', - delay: 100 - }, - enter: ..., // 同appear,下同 - update: ..., - delay: .... -} -``` +| 属性名 | 描述 | 示例 | +| ----------- | ----------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | +| title | 不再支持 | - | +| description | 不再支持 | - | +| forceFit | 不再支持,改用 autoFit | - | +| responsive | 不再支持,内置 | - | +| guideLine | 不再支持,改用 [anniotations](../../examples/general/annotation) 实现。 | - | +| label | label.type 会有兼容性问题,如果报错修改 type 配置或者去掉 | - | +| slider | 写法变更 | 示例 | +| scrollbar | 写法变更 | 示例 | +| events | 写法变更 | 示例 | +| visible | 写法变更 | 示例 | +| animation | 写法变更 | 示例 | ### 私有配置 -**Scatter**: - -- pointSize: 不再支持,改用 size 。 -- shape: 去掉默认类型 circle,需要显性设置。 - -**Rose**: - -- categoryField: 不再支持,改用 xField 。 -- radiusField: 不再支持,改用 yField 。 -- colorField: 不再支持,改用 seriesField 。 - -**Bullet**: - -- 改动较大,详细参考 [Bullet](../../examples/bullet/basic) - -**WordCloud**: - -- maskImage: 不再支持, 改用 imageMask。 -- wordStyle 选项中的 gridSize 改为 padding。 - -**TinyArea、 TinyColumn、 TinyLine**: - -- 删除 xField 、yField。 -- data 类型由 object[] 变为 number[]。 - -**Gauge**: - -- 删除 color 、 min 、 max。 -- 删除 value , 改用 percent 。 -- 删除 pivot 改用 indicator。 -- 更新 range ,详细参考[Gauge](../../examples/gauge/basic#complex) - -```ts -// 变更前 -range: [0, 25, 50, 75, 100], -color: ['#39B8FF', '#52619B', '#43E089', '#C0EDF3'], -// 变更后 -range: { - ticks: [0, 0.25, 0.5, 0.75, 1], - color: ['#39B8FF', '#52619B', '#43E089', '#C0EDF3'], -} -``` - -**Radar**: - -- 删除 radiusAxis ,改用 yAxis。 -- 删除 angleField , 改用 xField 。 -- 删除 radiusField , 改用 yField 。 - -**Liquid**: - -- 删除 min 、max。 -- 删除 value ,改用 percent。 -- 更新 statistic 。 - -```ts -// 变更前 -statistic: { - formatter: (value) => 'xx', -}, -// 变更后 -statistic: { - content: { - formatter: ({ percent }) => { - return `xxx`; - }, - }, -}, -``` +| 图表名称 | 描述 | 示例 | +| ------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | +| Scatter | pointSize: 不再支持,改用 size 。
shape: 去掉默认类型 circle,需要显性设置。 | - | +| Rose | categoryField: 不再支持,改用 xField 。
radiusField: 不再支持,改用 yField 。
colorField: 不再支持,改用 seriesField 。 | - | +| Bullet | 改动较大,详细参考 [Bullet](../../examples/bullet/basic) | - | +| WordCloud | maskImage: 不再支持, 改用 imageMask。
wordStyle 选项中的 gridSize 改为 padding。 | - | +| TinyArea、TinyColumn、 TinyLine | 删除 xField 、yField。
data 类型由 object[] 变为 number[]。 | - | +| Gauge | 删除 color 、 min 、 max。
删除 value , 改用 percent 。
删除 pivot 改用 indicator。
更新 range ,详细参考[Gauge](../../examples/gauge/basic#complex) | 示例 | +| Radar | 删除 radiusAxis ,改用 yAxis 。
删除 angleField , 改用 xField 。
删除 radiusField , 改用 yField 。 | - | +| Liquid | 删除 min 、max。
删除 value ,改用 percent。
更新 statistic 。 | 示例 | ## 遇到问题 diff --git a/docs/manual/upgrade.zh.md b/docs/manual/upgrade.zh.md index 9eb744a067..e150b7cb3a 100644 --- a/docs/manual/upgrade.zh.md +++ b/docs/manual/upgrade.zh.md @@ -9,93 +9,24 @@ G2Plot 2.0 持续开发中,截止目前,我们已经完成了 P0 、P1 级 ## 删除图表 -**Bubble**: - -- 改用 Scatter 实现, 修改图表名称即可, 详细参考 [Scatter](../../examples/scatter/basic)。 - -**StackedColumn**: - -- 改用 Column 实现。 -- 删除 stackField 配置,改为 seriesField,需要指定 `isStack: true` , 详细参考 [Column](../../examples/column/stacked)。 - -**GroupedColumn**: - -- 改用 Column 实现。 -- 删除 groupField 配置,改为 seriesField,需要指定 `isGroup: true` , 详细参考 [Column](../../examples/column/grouped)。 - -**PercentStackedColumn**: - -- 改用 Column 实现。 -- 删除 stackField 配置,改为 seriesField,需要指定 `isStack: true`、`isGroup: true` , 详细参考 [Column](../../examples/column/percent)。 - -**RangeColumn**: - -- 改用 Column 实现。 -- 删除 stackField 配置,改为 seriesField,需要指定 `isRange: true` , 详细参考 [Column](../../examples/column/range)。 -- label 不再支持 topStyle、bottomStyle,详细配置请参考 [API](../../examples/column/range/API#label) 文档。 - -**StackedBar**: - -- 改用 Bar 实现。 -- 删除 stackField 配置,改为 seriesField,需要指定 `isStack: true` , 详细参考 [Bar](../../examples/bar/stacked)。 - -**GroupedBar**: - -- 改用 Bar 实现。 -- 删除 groupField 配置,改为 seriesField,需要指定 `isGroup: true` , 详细参考 [Bar](../../examples/bar/stacked)。 - -**PercentStackedBar**: - -- 改用 Bar 实现。 -- 删除 stackField 配置,改为 seriesField,需要指定 `isStack: true`、`isGroup: true` , 详细参考 [Bar](../../examples/bar/stacked)。 - -**RangeBar**: - -- 改用 Bar 实现。 -- 删除 stackField 配置,改为 seriesField,需要指定 `isRange: true` , 详细参考 [Bar](../../examples/bar/stacked)。 -- label 不再支持 topStyle、bottomStyle,详细配置请参考 [API](../../examples/bar/range/API#label) 文档 - -**Donut**: - -- 改用 Pie 实现,修改图表名称即可 , 详细参考 [Pie](../../examples/pie/basic)。 - -**DualLine**: - -- 改用 DualAxes 实现,详细参考 [Demos](../../examples/dual-axes/dual-line) 。 - -**ColumnLine**: - -- 改用 DualAxes 实现,详细参考 [Demos](../../examples/dual-axes/column-line) 。 - -**StackedColumnLine**: - -- 改用 DualAxes 实现,详细参考 [Demos](../../examples/dual-axes/stacked-column-line) 。 - -**GroupedColumnLine**: - -- 改用 DualAxes 实现,详细参考 [Demos](../../examples/dual-axes/grouped-column-line) 。 - -**StackedArea**: - -- 改用 Area 实现。 -- 去掉 stackField ,改用 seriesField 。 - -**PercentStackedArea**: - -- 改用 Area 实现。 -- 去掉 stackField ,改用 seriesField ,需要指定 `isStack: true` 。 - -**StepLine**: - -- 改用 Line 实现,需要指定 stepType,详细参考 [Line](../../examples/line/step)。 - -```ts -// 变更前 -step: 'hvh', // 可以选择 hv, vh, hvh, vhv - -// 变更后 -stepType: 'hvh', // 可以选择 hv, vh, hvh, vhv -``` +| 图表名称 | 描述 | 示例 | +| -------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------- | +| Bubble | 改用 Scatter 实现, 修改图表名称即可。 | [Scatter](../../examples/scatter/basic) | +| StackedColumn | 改用 Column 实现。
删除 stackField 配置,改为 seriesField,需要指定 `isStack: true` 。 | [Column](../../examples/column/stacked) | +| GroupedColumn | 改用 Column 实现。
删除 groupField 配置,改为 seriesField,需要指定 `isGroup: true` 。 | [Column](../../examples/column/grouped) | +| PercentStackedColumn | 改用 Column 实现。
删除 stackField 配置,改为 seriesField,需要指定 `isStack: true`、`isGroup: true` 。 | [Column](../../examples/column/percent) | +| RangeColumn | 改用 Column 实现。
删除 stackField 配置,改为 seriesField,需要指定 `isRange: true` 。
label 不再支持 topStyle、bottomStyle,详细配置请参考 [API](../../examples/column/range/API#label) 文档。 | [Column](../../examples/column/range) | +| StackedBar | 改用 Bar 实现。
删除 groupField 配置,改为 seriesField,需要指定 `isGroup: true` 。 | [Bar](../../examples/bar/stacked) | +| PercentStackedBar | 改用 Bar 实现。
删除 stackField 配置,改为 seriesField,需要指定 `isStack: true`、`isGroup: true` 。 | [Bar](../../examples/bar/percent) | +| RangeBar | 改用 Bar 实现。
删除 stackField 配置,改为 seriesField,需要指定 `isRange: true` 。
label 不再支持 topStyle、bottomStyle,详细配置请参考 [API](../../examples/bar/range/API#label) 文档 | [Bar](../../examples/bar/stacked) | +| Donut | 改用 Pie 实现,修改图表名称即可 。 | [Pie](../../examples/pie/donut) | +| DualLine | 改用 DualAxes 实现。 | [Demos](../../examples/dual-axes/dual-line) | +| ColumnLine | 改用 DualAxes 实现。 | [Demos](../../examples/dual-axes/column-line) | +| StackedColumnLine | 改用 DualAxes 实现。 | [Demos](../../examples/dual-axes/stacked-column-line) | +| GroupedColumnLine | 改用 DualAxes 实现 。 | [Demos](../../examples/dual-axes/grouped-column-line) | +| StackedArea | 改用 Area 实现。
去掉 stackField ,改用 seriesField 。 | [Area](../../examples/area/stacked) | +| PercentStackedArea | 改用 Area 实现。去掉 stackField ,改用 seriesField ,需要指定 `isStack: true` 。 | - | +| StepLine | 改用 Line 实现,需要指定 stepType。
1.0 版版本可以使用默认 step ,2.0 版本必须手动指定 stepType(hv, vh, hvh, vhv), | [Line](../../examples/line/step) | ## 配置变更 @@ -103,169 +34,32 @@ G2Plot 2.0 兼容大部分的 1.x 版本图表功能和配置项,详情如下 ### 通用配置 -**title**: 不再支持 - -**description**: 不再支持 - -**forceFit**: 不再支持,改用 autoFit - -**responsive**:不再支持,内置。 - -**guideLine**:不再支持,改用 [anniotations](../../examples/general/annotation) 实现。 - -**label**:label.type 会有兼容性问题,如果报错修改 type 配置或者去掉 。 - -**slider**: - -```ts -// 变更前 -interactions: [ - { - type: 'slider', - start: 0.1, - end: 0.8 - }, -], -// 变更后 -slider: { - start: 0.1, - end: 0.8 -}, -``` - -**scrollbar**: - -```ts -// 变更前 -interactions: [ - { - type: 'scrollbar', - }, -], -// 变更后 -scrollbar: {}, -``` - -**events**: - -```ts -// 变更前 -events: { - 'plot:click': callback -} -// 变更后 -chart.on('element:click', callback) -``` - -**visible**: - -```ts -// 变更前 -label: { - visible: false -} -label: { - visible: true, - fill: 'red' -} -// 变更后 -label: false -label: { - fill: 'red' -} -``` - -**animation**: - -```ts -// 变更前 -... -// 变更后 -默认为 true,也可以自己设定。 - -animation: { - appear: { - duration: 300, - easing: 'linear', - delay: 100 - }, - enter: ..., // 同appear,下同 - update: ..., - delay: .... -} -``` +| 属性名 | 描述 | 示例 | +| ----------- | ----------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | +| title | 不再支持 | - | +| description | 不再支持 | - | +| forceFit | 不再支持,改用 autoFit | - | +| responsive | 不再支持,内置 | - | +| guideLine | 不再支持,改用 [anniotations](../../examples/general/annotation) 实现。 | - | +| label | label.type 会有兼容性问题,如果报错修改 type 配置或者去掉 | - | +| slider | 写法变更 | 示例 | +| scrollbar | 写法变更 | 示例 | +| events | 写法变更 | 示例 | +| visible | 写法变更 | 示例 | +| animation | 写法变更 | 示例 | ### 私有配置 -**Scatter**: - -- pointSize: 不再支持,改用 size 。 -- shape: 去掉默认类型 circle,需要显性设置。 - -**Rose**: - -- categoryField: 不再支持,改用 xField 。 -- radiusField: 不再支持,改用 yField 。 -- colorField: 不再支持,改用 seriesField 。 - -**Bullet**: - -- 改动较大,详细参考 [Bullet](../../examples/bullet/basic) - -**WordCloud**: - -- maskImage: 不再支持, 改用 imageMask。 -- wordStyle 选项中的 gridSize 改为 padding。 - -**TinyArea、 TinyColumn、 TinyLine**: - -- 删除 xField 、yField。 -- data 类型由 object[] 变为 number[]。 - -**Gauge**: - -- 删除 color 、 min 、 max。 -- 删除 value , 改用 percent 。 -- 删除 pivot 改用 indicator。 -- 更新 range ,详细参考[Gauge](../../examples/gauge/basic#complex) - -```ts -// 变更前 -range: [0, 25, 50, 75, 100], -color: ['#39B8FF', '#52619B', '#43E089', '#C0EDF3'], -// 变更后 -range: { - ticks: [0, 0.25, 0.5, 0.75, 1], - color: ['#39B8FF', '#52619B', '#43E089', '#C0EDF3'], -} -``` - -**Radar**: - -- 删除 radiusAxis ,改用 yAxis。 -- 删除 angleField , 改用 xField 。 -- 删除 radiusField , 改用 yField 。 - -**Liquid**: - -- 删除 min 、max。 -- 删除 value ,改用 percent。 -- 更新 statistic 。 - -```ts -// 变更前 -statistic: { - formatter: (value) => 'xx', -}, -// 变更后 -statistic: { - content: { - formatter: ({ percent }) => { - return `xxx`; - }, - }, -}, -``` +| 图表名称 | 描述 | 示例 | +| ------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | +| Scatter | pointSize: 不再支持,改用 size 。
shape: 去掉默认类型 circle,需要显性设置。 | - | +| Rose | categoryField: 不再支持,改用 xField 。
radiusField: 不再支持,改用 yField 。
colorField: 不再支持,改用 seriesField 。 | - | +| Bullet | 改动较大,详细参考 [Bullet](../../examples/bullet/basic) | - | +| WordCloud | maskImage: 不再支持, 改用 imageMask。
wordStyle 选项中的 gridSize 改为 padding。 | - | +| TinyArea、TinyColumn、 TinyLine | 删除 xField 、yField。
data 类型由 object[] 变为 number[]。 | - | +| Gauge | 删除 color 、 min 、 max。
删除 value , 改用 percent 。
删除 pivot 改用 indicator。
更新 range ,详细参考[Gauge](../../examples/gauge/basic#complex) | 示例 | +| Radar | 删除 radiusAxis ,改用 yAxis 。
删除 angleField , 改用 xField 。
删除 radiusField , 改用 yField 。 | - | +| Liquid | 删除 min 、max。
删除 value ,改用 percent。
更新 statistic 。 | 示例 | ## 遇到问题