Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: 升级指南表格化 #1733

Merged
merged 1 commit into from
Oct 16, 2020
Merged

docs: 升级指南表格化 #1733

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
290 changes: 42 additions & 248 deletions docs/manual/upgrade.en.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
title: G2Plot 2.0 升级指南
title: G2Plot 2.0 Upgrade guide
order: 7
---

Expand All @@ -9,263 +9,57 @@ 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 实现。<br/> 删除 stackField 配置，改为 seriesField，需要指定 `isStack: true` 。 | [Column](../../examples/column/stacked) |
| GroupedColumn | 改用 Column 实现。<br/>删除 groupField 配置，改为 seriesField，需要指定 `isGroup: true` 。 | [Column](../../examples/column/grouped) |
| PercentStackedColumn | 改用 Column 实现。<br/> 删除 stackField 配置，改为 seriesField，需要指定 `isStack: true`、`isGroup: true` 。 | [Column](../../examples/column/percent) |
| RangeColumn | 改用 Column 实现。 <br/> 删除 stackField 配置，改为 seriesField，需要指定 `isRange: true` 。 <br/> label 不再支持 topStyle、bottomStyle，详细配置请参考 [API](../../examples/column/range/API#label) 文档。 | [Column](../../examples/column/range) |
| StackedBar | 改用 Bar 实现。<br/>删除 groupField 配置，改为 seriesField，需要指定 `isGroup: true` 。 | [Bar](../../examples/bar/stacked) |
| PercentStackedBar | 改用 Bar 实现。<br/> 删除 stackField 配置，改为 seriesField，需要指定 `isStack: true`、`isGroup: true` 。 | [Bar](../../examples/bar/percent) |
| RangeBar | 改用 Bar 实现。 <br/>删除 stackField 配置，改为 seriesField，需要指定 `isRange: true` 。 <br/> 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 实现。 <br/>去掉 stackField ，改用 seriesField 。 | [Area](../../examples/area/stacked) |
| PercentStackedArea | 改用 Area 实现。去掉 stackField ，改用 seriesField ，需要指定 `isStack: true` 。 | - |
| StepLine | 改用 Line 实现，需要指定 stepType。<br/>1.0 版版本可以使用默认 step ，2.0 版本必须手动指定 stepType（hv, vh, hvh, vhv）， | [Line](../../examples/line/step) |

## 配置变更

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 | 写法变更 | <img src="https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*IZmLQaZ8ANMAAAAAAAAAAAAAARQnAQ" alt="示例" /> |
| scrollbar | 写法变更 | <img src="https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*Zq3NSpae7NEAAAAAAAAAAAAAARQnAQ" alt="示例" /> |
| events | 写法变更 | <img src="https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*NW8VTp2JPm0AAAAAAAAAAAAAARQnAQ" alt="示例" /> |
| visible | 写法变更 | <img src="https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*WRVJR6jRJ5AAAAAAAAAAAAAAARQnAQ" alt="示例" /> |
| animation | 写法变更 | <img src="https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*CE30TZLMIL4AAAAAAAAAAAAAARQnAQ" alt="示例" /> |

### 私有配置

**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 。<br /> shape: 去掉默认类型 circle，需要显性设置。 | - |
| Rose | categoryField: 不再支持，改用 xField 。<br /> radiusField: 不再支持，改用 yField 。<br /> colorField: 不再支持，改用 seriesField 。 | - |
| Bullet | 改动较大，详细参考 [Bullet](../../examples/bullet/basic) | - |
| WordCloud | maskImage: 不再支持， 改用 imageMask。<br /> wordStyle 选项中的 gridSize 改为 padding。 | - |
| TinyArea、TinyColumn、 TinyLine | 删除 xField 、yField。<br /> data 类型由 object[] 变为 number[]。 | - |
| Gauge | 删除 color 、 min 、 max。<br />删除 value , 改用 percent 。 <br />删除 pivot 改用 indicator。 <br /> 更新 range ，详细参考[Gauge](../../examples/gauge/basic#complex) | <img src="https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*icQqR71EdikAAAAAAAAAAAAAARQnAQ" alt="示例" /> |
| Radar | 删除 radiusAxis ，改用 yAxis 。<br /> 删除 angleField ， 改用 xField 。<br /> 删除 radiusField ， 改用 yField 。 | - |
| Liquid | 删除 min 、max。<br /> 删除 value ，改用 percent。<br /> 更新 statistic 。 | <img src="https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*_CeWQbi4jlsAAAAAAAAAAAAAARQnAQ" alt="示例" /> |

## 遇到问题

Expand Down
Loading