Skip to content

Commit

Permalink
docs: 升级指南表格化 (#1733)
Browse files Browse the repository at this point in the history
  • Loading branch information
@lxfu1
lxfu1 authored Oct 16, 2020
1 parent 61752a0 commit 2cc432d
Show file tree
Hide file tree
Showing 2 changed files with 83 additions and 495 deletions.
290 changes: 42 additions & 248 deletions docs/manual/upgrade.en.md
View file
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

0 comments on commit 2cc432d

Please sign in to comment.