Skip to content

Commit bb4f1b5

Browse files
zhiqingchenzhiqingchen
committed
docs: 2.0
1 parent 60857c3 commit bb4f1b5

File tree

33 files changed

+317
-89
lines changed

33 files changed

+317
-89
lines changed

‎docs/about/_category_.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
22
"label": "About",
3-
"position": 6
3+
"position": 7
44
}
55

‎docs/advanced-guides/import-individually.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,9 @@ sidebar_position: 1
44

55
# Import individually
66

7-
if you only need to use the react-native-skia renderer, you can import the SVGRenderer and SkiaChart individually.
7+
if you only need to use the react-native-skia renderer, you can import the SkiaRenderer and SkiaChart individually.
88
```tsx
9-
import SkiaChart, { SVGRenderer } from '@wuba/react-native-echarts/skiaChart';
9+
import SkiaChart, { SkiaRenderer } from '@wuba/react-native-echarts/skiaChart';
1010
```
1111

1212
if you only need to use the react-native-svg renderer, you can import the SVGRenderer and SvgChart individually.

‎docs/getting-started/write-a-adaptive-height-chart.md

+7-7
Original file line numberDiff line numberDiff line change
@@ -14,13 +14,13 @@ import { StyleSheet, View, Dimensions } from "react-native";
1414
import * as echarts from "echarts/core";
1515
import { LineChart } from "echarts/charts";
1616
import { GridComponent } from "echarts/components";
17-
import { SVGRenderer, SkiaChart } from "@wuba/react-native-echarts";
17+
import { SkiaRenderer, SkiaChart } from "@wuba/react-native-echarts";
1818
```
1919

2020
2. Use echarts.use to register renderers and charts.
2121

2222
```tsx
23-
echarts.use([SVGRenderer, LineChart, GridComponent]);
23+
echarts.use([SkiaRenderer, LineChart, GridComponent]);
2424
```
2525

2626
3. Create a Ref for the SkiaChart component and use a View container to wrap it. Use onLayout to obtain the container's width and height for later assignment to the ECharts chart.
@@ -82,7 +82,7 @@ const option = {
8282

8383
```tsx
8484
let chart = echarts.init(skiaRef.current, "light", {
85-
renderer: "svg",
85+
renderer: "skia",
8686
width: chartWidth,
8787
height: chartHeight,
8888
});
@@ -135,9 +135,9 @@ import { StyleSheet, View, Dimensions } from "react-native";
135135
import * as echarts from "echarts/core";
136136
import { LineChart } from "echarts/charts";
137137
import { GridComponent } from "echarts/components";
138-
import { SVGRenderer, SkiaChart } from "@wuba/react-native-echarts";
138+
import { SkiaRenderer, SkiaChart } from "@wuba/react-native-echarts";
139139

140-
echarts.use([SVGRenderer, LineChart, GridComponent]);
140+
echarts.use([SkiaRenderer, LineChart, GridComponent]);
141141

142142
export default function App() {
143143
const skiaRef = useRef<any>(null);
@@ -195,7 +195,7 @@ export default function App() {
195195
let chart: any;
196196
if (skiaRef.current) {
197197
chart = echarts.init(skiaRef.current, "light", {
198-
renderer: "svg",
198+
renderer: "skia",
199199
width: chartWidth,
200200
height: chartHeight,
201201
});
@@ -251,6 +251,6 @@ You should see the following screen:
251251
| ------------------------ | -------------------------------- |
252252
| ![ios](./ios_rotate.gif) | ![android](./android_rotate.gif) |
253253
254-
If you want to use the react-native-skia，just replace the SvgChart with SkiaChart。
254+
If you want to use the react-native-svg，just replace the SkiaChart with SvgChart and use 'svg' as renderer.
255255
256256
For more chart configuration, please refer to [echarts documentation](https://echarts.apache.org/en/option.html#title).

‎docs/getting-started/write-a-dynamic-data-chart.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -419,6 +419,6 @@ You should see the following screen:
419419
| ------------------------------ | -------------------------------------- |
420420
| ![ios](./dynamic-data-ios.gif) | ![android](./dynamic-data-android.gif) |
421421

422-
If you want to use the react-native-skia，just replace the SvgChart with SkiaChart。
422+
If you want to use the react-native-skia，just replace the SvgChart with SkiaChart and use 'skia' as renderer.
423423

424424
For more chart configuration, please refer to [echarts documentation](https://echarts.apache.org/en/option.html#title).

‎docs/getting-started/write-a-simple-line-chart.md

+8-8
Original file line numberDiff line numberDiff line change
@@ -8,20 +8,20 @@ Next let's try to draw the most basic diagram - Basic Line Chart.
88

99
To see how it looks like in the browser, you can visit the [echarts editor](https://echarts.apache.org/examples/en/editor.html?c=line-simple) and try to modify the configuration to see the changes.
1010

11-
1. import echarts, @wuba/react-native-echarts, react. Here I have only import SkiaChart and SVGRenderer.
11+
1. import echarts, @wuba/react-native-echarts, react. Here I have only import SkiaChart and SkiaRenderer.
1212

1313
```tsx
1414
import React, { useRef, useEffect } from 'react';
1515
import * as echarts from 'echarts/core';
1616
import { LineChart } from 'echarts/charts';
1717
import { GridComponent } from 'echarts/components';
18-
import { SVGRenderer, SkiaChart } from '@wuba/react-native-echarts';
18+
import { SkiaRenderer, SkiaChart } from '@wuba/react-native-echarts';
1919
```
2020

2121
2. use echarts.use to register the renderer and chart.
2222

2323
```tsx
24-
echarts.use([SVGRenderer, LineChart, GridComponent]);
24+
echarts.use([SkiaRenderer, LineChart, GridComponent]);
2525
```
2626

2727
3. create a ref for the SkiaChart.
@@ -57,7 +57,7 @@ const option = {
5757

5858
```tsx
5959
let chart = echarts.init(skiaRef.current, 'light', {
60-
renderer: 'svg',
60+
renderer: 'skia',
6161
width: 400,
6262
height: 400,
6363
});
@@ -78,9 +78,9 @@ import React, { useRef, useEffect } from 'react';
7878
import * as echarts from 'echarts/core';
7979
import { LineChart } from 'echarts/charts';
8080
import { GridComponent } from 'echarts/components';
81-
import { SVGRenderer, SkiaChart } from '@wuba/react-native-echarts';
81+
import { SkiaRenderer, SkiaChart } from '@wuba/react-native-echarts';
8282

83-
echarts.use([SVGRenderer, LineChart, GridComponent]);
83+
echarts.use([SkiaRenderer, LineChart, GridComponent]);
8484

8585
export default function App() {
8686
const skiaRef = useRef<any>(null);
@@ -103,7 +103,7 @@ export default function App() {
103103
let chart: any;
104104
if (skiaRef.current) {
105105
chart = echarts.init(skiaRef.current, 'light', {
106-
renderer: 'svg',
106+
renderer: 'skia',
107107
width: 400,
108108
height: 400,
109109
});
@@ -121,6 +121,6 @@ You should see the following screen:
121121
| --- | --- |
122122
| ![ios](./ios-line.png) | ![android](./android-line.jpg) |
123123

124-
If you want to use the react-native-svg, just replace the SkiaChart with SvgChart.
124+
If you want to use the react-native-svg, just replace the SkiaChart with SvgChart and use 'svg' as renderer.
125125

126126
Next you can find more configurations to use in @wuba/react-native-echarts from the [echarts examples](https://echarts.apache.org/examples/en/index.html).

‎docs/migration/_category_.json

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"label": "Upgrading",
3+
"position": 6
4+
}

‎docs/migration/v2.md

+53
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
---
2+
sidebar_position: 1
3+
---
4+
5+
# Migrate from v1 to v2
6+
7+
## Key Changes
8+
- **SVGRenderer** and **SkiaRenderer** are now split.
9+
- **SkiaChart** refactored, no more `ImageSVG` tag.
10+
- Added support for new rendering effects (e.g., shadows).
11+
12+
## Steps to Migrate from v1 to v2
13+
14+
SVGChart has no changes, so you can skip this migration if you are using SVGChart.
15+
16+
### Summary
17+
18+
- Replace **SVGRenderer** with **SkiaRenderer**.
19+
- Set `renderer: 'skia'` when initializing the chart.
20+
21+
### 1. Update Imports
22+
23+
#### v1
24+
25+
```js
26+
import { SVGRenderer, SkiaChart } from '@wuba/react-native-echarts';
27+
echarts.use([SVGRenderer]);
28+
```
29+
30+
#### v2
31+
32+
```js
33+
import { SkiaRenderer, SkiaChart } from '@wuba/react-native-echarts';
34+
echarts.use([SkiaRenderer]);
35+
```
36+
37+
### 2. Initialize Chart with SkiaRenderer
38+
39+
#### v1
40+
41+
```js
42+
chart = echarts.init(skiaRef.current, 'light', {
43+
renderer: 'svg',
44+
});
45+
```
46+
47+
#### v2
48+
49+
```js
50+
chart = echarts.init(skiaRef.current, 'light', {
51+
renderer: 'skia',
52+
});
53+
```

‎i18n/ja/docusaurus-plugin-content-docs/current/about/_category_.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
22
"label": "About",
3-
"position": 6
3+
"position": 7
44
}
55

‎i18n/ja/docusaurus-plugin-content-docs/current/advanced-guides/import-individually.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,9 @@ sidebar_position: 1
44

55
# 個別にインポートする
66

7-
もし、react-native-skia レンダラーのみを使用する場合は、SVGRenderer と SkiaChart を個別にインポートすることができます。
7+
もし、react-native-skia レンダラーのみを使用する場合は、SkiaRenderer と SkiaChart を個別にインポートすることができます。
88
```tsx
9-
import SkiaChart, { SVGRenderer } from '@wuba/react-native-echarts/skiaChart';
9+
import SkiaChart, { SkiaRenderer } from '@wuba/react-native-echarts/skiaChart';
1010
```
1111

1212
もし、react-native-svg レンダラーのみを使用する場合は、SVGRenderer と SvgChart を個別にインポートすることができます。

‎i18n/ja/docusaurus-plugin-content-docs/current/getting-started/write-a-adaptive-height-chart.md

+7-7
Original file line numberDiff line numberDiff line change
@@ -14,13 +14,13 @@ import { StyleSheet, View, Dimensions } from "react-native";
1414
import * as echarts from "echarts/core";
1515
import { LineChart } from "echarts/charts";
1616
import { GridComponent } from "echarts/components";
17-
import { SVGRenderer, SkiaChart } from "@wuba/react-native-echarts";
17+
import { SkiaRenderer, SkiaChart } from "@wuba/react-native-echarts";
1818
```
1919

2020
2. echarts.useを使用してレンダラとチャートを登録します。
2121

2222
```tsx
23-
echarts.use([SVGRenderer, LineChart, GridComponent]);
23+
echarts.use([SkiaRenderer, LineChart, GridComponent]);
2424
```
2525

2626
3. SkiaChartコンポーネントのためのRefを作成し、Viewコンテナでそれをラップします。後でEChartsのチャートに割り当てるために、onLayoutを使用してコンテナの幅と高さを取得します。
@@ -82,7 +82,7 @@ const option = {
8282

8383
```tsx
8484
let chart = echarts.init(skiaRef.current, "light", {
85-
renderer: "svg",
85+
renderer: "skia",
8686
width: chartWidth,
8787
height: chartHeight,
8888
});
@@ -135,9 +135,9 @@ import { StyleSheet, View, Dimensions } from "react-native";
135135
import * as echarts from "echarts/core";
136136
import { LineChart } from "echarts/charts";
137137
import { GridComponent } from "echarts/components";
138-
import { SVGRenderer, SkiaChart } from "@wuba/react-native-echarts";
138+
import { SkiaRenderer, SkiaChart } from "@wuba/react-native-echarts";
139139

140-
echarts.use([SVGRenderer, LineChart, GridComponent]);
140+
echarts.use([SkiaRenderer, LineChart, GridComponent]);
141141

142142
export default function App() {
143143
const skiaRef = useRef<any>(null);
@@ -195,7 +195,7 @@ export default function App() {
195195
let chart: any;
196196
if (skiaRef.current) {
197197
chart = echarts.init(skiaRef.current, "light", {
198-
renderer: "svg",
198+
renderer: "skia",
199199
width: chartWidth,
200200
height: chartHeight,
201201
});
@@ -251,7 +251,7 @@ const styles = StyleSheet.create({
251251
| ------------------------ | -------------------------------- |
252252
| ![ios](./ios_rotate.gif) | ![android](./android_rotate.gif) |
253253
254-
react-native-skiaを使用したい場合は、SvgChartをSkiaChartに置き換えてください。
254+
react-native-svgを使用したい場合は、SkiaChartをSvgChartに置き換えてください、そして、レンダラーとして「svg」を使用します。
255255
256256
より詳細なチャートの設定については、[echartsのドキュメント](https://echarts.apache.org/en/option.html#title)を参照してください。
257257

‎i18n/ja/docusaurus-plugin-content-docs/current/getting-started/write-a-dynamic-data-chart.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -419,7 +419,7 @@ const styles = StyleSheet.create({
419419
| ------------------------------ | -------------------------------------- |
420420
| ![ios](./dynamic-data-ios.gif) | ![android](./dynamic-data-android.gif) |
421421

422-
react-native-skiaを使用する場合は、SvgChartをSkiaChartに置き換えてください。
422+
react-native-skiaを使用する場合は、SvgChartをSkiaChartに置き換えてください、そして、レンダラーとして「skia」を使用します。
423423

424424
より詳細なチャートの設定については、[echartsのドキュメント](https://echarts.apache.org/en/option.html#title)を参照してください。
425425

‎i18n/ja/docusaurus-plugin-content-docs/current/getting-started/write-a-simple-line-chart.md

+8-8
Original file line numberDiff line numberDiff line change
@@ -8,20 +8,20 @@ sidebar_position: 3
88

99
ブラウザでの表示を確認するには、[echartsエディター](https://echarts.apache.org/examples/en/editor.html?c=line-simple)にアクセスし、設定を変更して変化を確認してみてください。
1010

11-
1. echarts、@wuba/react-native-echarts、reactをインポートします。ここでは、SkiaChartとSVGRendererのみをインポートしています。
11+
1. echarts、@wuba/react-native-echarts、reactをインポートします。ここでは、SkiaChartとSkiaRendererのみをインポートしています。
1212

1313
```tsx
1414
import React, { useRef, useEffect } from 'react';
1515
import * as echarts from 'echarts/core';
1616
import { LineChart } from 'echarts/charts';
1717
import { GridComponent } from 'echarts/components';
18-
import { SVGRenderer, SkiaChart } from '@wuba/react-native-echarts';
18+
import { SkiaRenderer, SkiaChart } from '@wuba/react-native-echarts';
1919
```
2020

2121
2. echarts.useを使用して、レンダラーとチャートを登録します。
2222

2323
```tsx
24-
echarts.use([SVGRenderer, LineChart, GridComponent]);
24+
echarts.use([SkiaRenderer, LineChart, GridComponent]);
2525
```
2626

2727
3. SkiaChartのためのrefを作成します。
@@ -57,7 +57,7 @@ const option = {
5757

5858
```tsx
5959
let chart = echarts.init(skiaRef.current, 'light', {
60-
renderer: 'svg',
60+
renderer: 'skia',
6161
width: 400,
6262
height: 400,
6363
});
@@ -79,9 +79,9 @@ import React, { useRef, useEffect } from 'react';
7979
import * as echarts from 'echarts/core';
8080
import { LineChart } from 'echarts/charts';
8181
import { GridComponent } from 'echarts/components';
82-
import { SVGRenderer, SkiaChart } from '@wuba/react-native-echarts';
82+
import { SkiaRenderer, SkiaChart } from '@wuba/react-native-echarts';
8383

84-
echarts.use([SVGRenderer, LineChart, GridComponent]);
84+
echarts.use([SkiaRenderer, LineChart, GridComponent]);
8585

8686
export default function App() {
8787
const skiaRef = useRef<any>(null);
@@ -104,7 +104,7 @@ export default function App() {
104104
let chart: any;
105105
if (skiaRef.current) {
106106
chart = echarts.init(skiaRef.current, 'light', {
107-
renderer: 'svg',
107+
renderer: 'skia',
108108
width: 400,
109109
height: 400,
110110
});
@@ -123,6 +123,6 @@ export default function App() {
123123
| --- | --- |
124124
| ![ios](./ios-line.png) | ![android](./android-line.jpg) |
125125

126-
react-native-svgを使用する場合は、SkiaChartをSvgChartに置き換えてください。
126+
react-native-svgを使用する場合は、SkiaChartをSvgChartに置き換えてください、レンダラーとして「svg」を使用します。
127127

128128
次に、@wuba/react-native-echartsで使用できるさまざまな設定を[echartsの例](https://echarts.apache.org/examples/en/index.html)から見つけることができます。

‎i18n/ja/docusaurus-plugin-content-docs/current/migration/_category_.json

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"label": "Upgrading",
3+
"position": 6
4+
}

0 commit comments

Comments
 (0)