From bb4f1b50319cb7de9319a1d4289cab090651c311 Mon Sep 17 00:00:00 2001
From: tony chen <tony.zq.chen@gmail.com>
Date: Tue, 15 Oct 2024 16:04:14 +0800
Subject: [PATCH] docs: 2.0

---
 docs/about/_category_.json                    |  2 +-
 docs/advanced-guides/import-individually.md   |  4 +-
 .../write-a-adaptive-height-chart.md          | 14 ++---
 .../write-a-dynamic-data-chart.md             |  2 +-
 .../write-a-simple-line-chart.md              | 16 +++---
 docs/migration/_category_.json                |  4 ++
 docs/migration/v2.md                          | 53 +++++++++++++++++++
 .../current/about/_category_.json             |  2 +-
 .../advanced-guides/import-individually.md    |  4 +-
 .../write-a-adaptive-height-chart.md          | 14 ++---
 .../write-a-dynamic-data-chart.md             |  2 +-
 .../write-a-simple-line-chart.md              | 16 +++---
 .../current/migration/_category_.json         |  4 ++
 .../current/migration/v2.md                   | 53 +++++++++++++++++++
 .../current/about/_category_.json             |  2 +-
 .../advanced-guides/import-individually.md    |  4 +-
 .../write-a-adaptive-height-chart.md          | 14 ++---
 .../write-a-dynamic-data-chart.md             |  2 +-
 .../write-a-simple-line-chart.md              | 16 +++---
 .../current/migration/_category_.json         |  4 ++
 .../current/migration/v2.md                   | 53 +++++++++++++++++++
 .../current/about/_category_.json             |  2 +-
 .../advanced-guides/import-individually.md    |  4 +-
 .../write-a-adaptive-height-chart.md          | 14 ++---
 .../write-a-dynamic-data-chart.md             |  2 +-
 .../write-a-simple-line-chart.md              | 16 +++---
 .../current/migration/_category_.json         |  4 ++
 .../current/migration/v2.md                   | 53 +++++++++++++++++++
 src/components/SnackPlayer/index.tsx          |  2 +-
 src/snippets/adpative-chart/index.tsx         |  6 +--
 src/snippets/custom-gestures/index.tsx        |  6 +--
 src/snippets/large-area-chart/index.tsx       |  6 +--
 src/snippets/simple-line-chart/index.tsx      |  6 +--
 33 files changed, 317 insertions(+), 89 deletions(-)
 create mode 100644 docs/migration/_category_.json
 create mode 100644 docs/migration/v2.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/current/migration/_category_.json
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/current/migration/v2.md
 create mode 100644 i18n/zh-Hans/docusaurus-plugin-content-docs/current/migration/_category_.json
 create mode 100644 i18n/zh-Hans/docusaurus-plugin-content-docs/current/migration/v2.md
 create mode 100644 i18n/zh-hant/docusaurus-plugin-content-docs/current/migration/_category_.json
 create mode 100644 i18n/zh-hant/docusaurus-plugin-content-docs/current/migration/v2.md

diff --git a/docs/about/_category_.json b/docs/about/_category_.json
index 5d07b3408..0c41061cf 100644
--- a/docs/about/_category_.json
+++ b/docs/about/_category_.json
@@ -1,5 +1,5 @@
 {
     "label": "About",
-    "position": 6
+    "position": 7
   }
   
diff --git a/docs/advanced-guides/import-individually.md b/docs/advanced-guides/import-individually.md
index 3a16ce504..922c1bb9b 100644
--- a/docs/advanced-guides/import-individually.md
+++ b/docs/advanced-guides/import-individually.md
@@ -4,9 +4,9 @@ sidebar_position: 1
 
 # Import individually
 
-if you only need to use the react-native-skia renderer, you can import the SVGRenderer and SkiaChart individually.
+if you only need to use the react-native-skia renderer, you can import the SkiaRenderer and SkiaChart individually.
 ```tsx
-import SkiaChart, { SVGRenderer } from '@wuba/react-native-echarts/skiaChart';
+import SkiaChart, { SkiaRenderer } from '@wuba/react-native-echarts/skiaChart';
 ```
 
 if you only need to use the react-native-svg renderer, you can import the SVGRenderer and SvgChart individually.
diff --git a/docs/getting-started/write-a-adaptive-height-chart.md b/docs/getting-started/write-a-adaptive-height-chart.md
index 889e97fc7..92cd12666 100644
--- a/docs/getting-started/write-a-adaptive-height-chart.md
+++ b/docs/getting-started/write-a-adaptive-height-chart.md
@@ -14,13 +14,13 @@ import { StyleSheet, View, Dimensions } from "react-native";
 import * as echarts from "echarts/core";
 import { LineChart } from "echarts/charts";
 import { GridComponent } from "echarts/components";
-import { SVGRenderer, SkiaChart } from "@wuba/react-native-echarts";
+import { SkiaRenderer, SkiaChart } from "@wuba/react-native-echarts";
 ```
 
 2. Use echarts.use to register renderers and charts.
 
 ```tsx
-echarts.use([SVGRenderer, LineChart, GridComponent]);
+echarts.use([SkiaRenderer, LineChart, GridComponent]);
 ```
 
 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 = {
 
 ```tsx
 let chart = echarts.init(skiaRef.current, "light", {
-  renderer: "svg",
+  renderer: "skia",
   width: chartWidth,
   height: chartHeight,
 });
@@ -135,9 +135,9 @@ import { StyleSheet, View, Dimensions } from "react-native";
 import * as echarts from "echarts/core";
 import { LineChart } from "echarts/charts";
 import { GridComponent } from "echarts/components";
-import { SVGRenderer, SkiaChart } from "@wuba/react-native-echarts";
+import { SkiaRenderer, SkiaChart } from "@wuba/react-native-echarts";
 
-echarts.use([SVGRenderer, LineChart, GridComponent]);
+echarts.use([SkiaRenderer, LineChart, GridComponent]);
 
 export default function App() {
   const skiaRef = useRef<any>(null);
@@ -195,7 +195,7 @@ export default function App() {
     let chart: any;
     if (skiaRef.current) {
       chart = echarts.init(skiaRef.current, "light", {
-        renderer: "svg",
+        renderer: "skia",
         width: chartWidth,
         height: chartHeight,
       });
@@ -251,6 +251,6 @@ You should see the following screen:
 | ------------------------ | -------------------------------- |
 | ![ios](./ios_rotate.gif) | ![android](./android_rotate.gif) |
 
-If you want to use the react-native-skia，just replace the SvgChart with SkiaChart。
+If you want to use the react-native-svg，just replace the SkiaChart with SvgChart and use 'svg' as renderer.
 
 For more chart configuration, please refer to [echarts documentation](https://echarts.apache.org/en/option.html#title).
diff --git a/docs/getting-started/write-a-dynamic-data-chart.md b/docs/getting-started/write-a-dynamic-data-chart.md
index 16ab36a70..510e1d419 100644
--- a/docs/getting-started/write-a-dynamic-data-chart.md
+++ b/docs/getting-started/write-a-dynamic-data-chart.md
@@ -419,6 +419,6 @@ You should see the following screen:
 | ------------------------------ | -------------------------------------- |
 | ![ios](./dynamic-data-ios.gif) | ![android](./dynamic-data-android.gif) |
 
-If you want to use the react-native-skia，just replace the SvgChart with SkiaChart。
+If you want to use the react-native-skia，just replace the SvgChart with SkiaChart and use 'skia' as renderer.
 
 For more chart configuration, please refer to [echarts documentation](https://echarts.apache.org/en/option.html#title).
diff --git a/docs/getting-started/write-a-simple-line-chart.md b/docs/getting-started/write-a-simple-line-chart.md
index e496d3ce7..c5a2ddaf1 100644
--- a/docs/getting-started/write-a-simple-line-chart.md
+++ b/docs/getting-started/write-a-simple-line-chart.md
@@ -8,20 +8,20 @@ Next let's try to draw the most basic diagram - Basic Line Chart.
 
 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.
 
-1. import echarts, @wuba/react-native-echarts, react. Here I have only import SkiaChart and SVGRenderer.
+1. import echarts, @wuba/react-native-echarts, react. Here I have only import SkiaChart and SkiaRenderer.
 
 ```tsx
 import React, { useRef, useEffect } from 'react';
 import * as echarts from 'echarts/core';
 import { LineChart } from 'echarts/charts';
 import { GridComponent } from 'echarts/components';
-import { SVGRenderer, SkiaChart } from '@wuba/react-native-echarts';
+import { SkiaRenderer, SkiaChart } from '@wuba/react-native-echarts';
 ```
 
 2. use echarts.use to register the renderer and chart.
 
 ```tsx
-echarts.use([SVGRenderer, LineChart, GridComponent]);
+echarts.use([SkiaRenderer, LineChart, GridComponent]);
 ```
 
 3. create a ref for the SkiaChart.
@@ -57,7 +57,7 @@ const option = {
 
 ```tsx
 let chart = echarts.init(skiaRef.current, 'light', {
-  renderer: 'svg',
+  renderer: 'skia',
   width: 400,
   height: 400,
 });
@@ -78,9 +78,9 @@ import React, { useRef, useEffect } from 'react';
 import * as echarts from 'echarts/core';
 import { LineChart } from 'echarts/charts';
 import { GridComponent } from 'echarts/components';
-import { SVGRenderer, SkiaChart } from '@wuba/react-native-echarts';
+import { SkiaRenderer, SkiaChart } from '@wuba/react-native-echarts';
 
-echarts.use([SVGRenderer, LineChart, GridComponent]);
+echarts.use([SkiaRenderer, LineChart, GridComponent]);
 
 export default function App() {
   const skiaRef = useRef<any>(null);
@@ -103,7 +103,7 @@ export default function App() {
     let chart: any;
     if (skiaRef.current) {
       chart = echarts.init(skiaRef.current, 'light', {
-        renderer: 'svg',
+        renderer: 'skia',
         width: 400,
         height: 400,
       });
@@ -121,6 +121,6 @@ You should see the following screen:
 | --- | --- |
 | ![ios](./ios-line.png) | ![android](./android-line.jpg) |
 
-If you want to use the react-native-svg, just replace the SkiaChart with SvgChart.
+If you want to use the react-native-svg, just replace the SkiaChart with SvgChart and use 'svg' as renderer.
 
 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).
\ No newline at end of file
diff --git a/docs/migration/_category_.json b/docs/migration/_category_.json
new file mode 100644
index 000000000..0a83a07fe
--- /dev/null
+++ b/docs/migration/_category_.json
@@ -0,0 +1,4 @@
+{
+  "label": "Upgrading",
+  "position": 6
+}
\ No newline at end of file
diff --git a/docs/migration/v2.md b/docs/migration/v2.md
new file mode 100644
index 000000000..d76265eee
--- /dev/null
+++ b/docs/migration/v2.md
@@ -0,0 +1,53 @@
+---
+sidebar_position: 1
+---
+
+# Migrate from v1 to v2
+
+## Key Changes
+- **SVGRenderer** and **SkiaRenderer** are now split.
+- **SkiaChart** refactored, no more `ImageSVG` tag.
+- Added support for new rendering effects (e.g., shadows).
+
+## Steps to Migrate from v1 to v2
+
+SVGChart has no changes, so you can skip this migration if you are using SVGChart.
+
+### Summary
+
+- Replace **SVGRenderer** with **SkiaRenderer**.
+- Set `renderer: 'skia'` when initializing the chart.
+
+### 1. Update Imports
+
+#### v1
+
+```js
+import { SVGRenderer, SkiaChart } from '@wuba/react-native-echarts';
+echarts.use([SVGRenderer]);
+```
+
+#### v2
+
+```js
+import { SkiaRenderer, SkiaChart } from '@wuba/react-native-echarts';
+echarts.use([SkiaRenderer]);
+```
+
+### 2. Initialize Chart with SkiaRenderer
+
+#### v1
+
+```js
+chart = echarts.init(skiaRef.current, 'light', {
+  renderer: 'svg',
+});
+```
+
+#### v2
+
+```js
+chart = echarts.init(skiaRef.current, 'light', {
+  renderer: 'skia',
+});
+```
\ No newline at end of file
diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/about/_category_.json b/i18n/ja/docusaurus-plugin-content-docs/current/about/_category_.json
index 5d07b3408..0c41061cf 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/current/about/_category_.json
+++ b/i18n/ja/docusaurus-plugin-content-docs/current/about/_category_.json
@@ -1,5 +1,5 @@
 {
     "label": "About",
-    "position": 6
+    "position": 7
   }
   
diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/advanced-guides/import-individually.md b/i18n/ja/docusaurus-plugin-content-docs/current/advanced-guides/import-individually.md
index 87842f254..880e6696d 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/current/advanced-guides/import-individually.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/current/advanced-guides/import-individually.md
@@ -4,9 +4,9 @@ sidebar_position: 1
 
 # 個別にインポートする
 
-もし、react-native-skia レンダラーのみを使用する場合は、SVGRenderer と SkiaChart を個別にインポートすることができます。
+もし、react-native-skia レンダラーのみを使用する場合は、SkiaRenderer と SkiaChart を個別にインポートすることができます。
 ```tsx
-import SkiaChart, { SVGRenderer } from '@wuba/react-native-echarts/skiaChart';
+import SkiaChart, { SkiaRenderer } from '@wuba/react-native-echarts/skiaChart';
 ```
 
 もし、react-native-svg レンダラーのみを使用する場合は、SVGRenderer と SvgChart を個別にインポートすることができます。
diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/getting-started/write-a-adaptive-height-chart.md b/i18n/ja/docusaurus-plugin-content-docs/current/getting-started/write-a-adaptive-height-chart.md
index a91abfb48..5ac2609aa 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/current/getting-started/write-a-adaptive-height-chart.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/current/getting-started/write-a-adaptive-height-chart.md
@@ -14,13 +14,13 @@ import { StyleSheet, View, Dimensions } from "react-native";
 import * as echarts from "echarts/core";
 import { LineChart } from "echarts/charts";
 import { GridComponent } from "echarts/components";
-import { SVGRenderer, SkiaChart } from "@wuba/react-native-echarts";
+import { SkiaRenderer, SkiaChart } from "@wuba/react-native-echarts";
 ```
 
 2. echarts.useを使用してレンダラとチャートを登録します。
 
 ```tsx
-echarts.use([SVGRenderer, LineChart, GridComponent]);
+echarts.use([SkiaRenderer, LineChart, GridComponent]);
 ```
 
 3. SkiaChartコンポーネントのためのRefを作成し、Viewコンテナでそれをラップします。後でEChartsのチャートに割り当てるために、onLayoutを使用してコンテナの幅と高さを取得します。
@@ -82,7 +82,7 @@ const option = {
 
 ```tsx
 let chart = echarts.init(skiaRef.current, "light", {
-  renderer: "svg",
+  renderer: "skia",
   width: chartWidth,
   height: chartHeight,
 });
@@ -135,9 +135,9 @@ import { StyleSheet, View, Dimensions } from "react-native";
 import * as echarts from "echarts/core";
 import { LineChart } from "echarts/charts";
 import { GridComponent } from "echarts/components";
-import { SVGRenderer, SkiaChart } from "@wuba/react-native-echarts";
+import { SkiaRenderer, SkiaChart } from "@wuba/react-native-echarts";
 
-echarts.use([SVGRenderer, LineChart, GridComponent]);
+echarts.use([SkiaRenderer, LineChart, GridComponent]);
 
 export default function App() {
   const skiaRef = useRef<any>(null);
@@ -195,7 +195,7 @@ export default function App() {
     let chart: any;
     if (skiaRef.current) {
       chart = echarts.init(skiaRef.current, "light", {
-        renderer: "svg",
+        renderer: "skia",
         width: chartWidth,
         height: chartHeight,
       });
@@ -251,7 +251,7 @@ const styles = StyleSheet.create({
 | ------------------------ | -------------------------------- |
 | ![ios](./ios_rotate.gif) | ![android](./android_rotate.gif) |
 
-react-native-skiaを使用したい場合は、SvgChartをSkiaChartに置き換えてください。
+react-native-svgを使用したい場合は、SkiaChartをSvgChartに置き換えてください、そして、レンダラーとして「svg」を使用します。
 
 より詳細なチャートの設定については、[echartsのドキュメント](https://echarts.apache.org/en/option.html#title)を参照してください。
 
diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/getting-started/write-a-dynamic-data-chart.md b/i18n/ja/docusaurus-plugin-content-docs/current/getting-started/write-a-dynamic-data-chart.md
index 21309ebb9..e23fa6da6 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/current/getting-started/write-a-dynamic-data-chart.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/current/getting-started/write-a-dynamic-data-chart.md
@@ -419,7 +419,7 @@ const styles = StyleSheet.create({
 | ------------------------------ | -------------------------------------- |
 | ![ios](./dynamic-data-ios.gif) | ![android](./dynamic-data-android.gif) |
 
-react-native-skiaを使用する場合は、SvgChartをSkiaChartに置き換えてください。
+react-native-skiaを使用する場合は、SvgChartをSkiaChartに置き換えてください、そして、レンダラーとして「skia」を使用します。
 
 より詳細なチャートの設定については、[echartsのドキュメント](https://echarts.apache.org/en/option.html#title)を参照してください。
 
diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/getting-started/write-a-simple-line-chart.md b/i18n/ja/docusaurus-plugin-content-docs/current/getting-started/write-a-simple-line-chart.md
index 023e97595..a6c6f538d 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/current/getting-started/write-a-simple-line-chart.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/current/getting-started/write-a-simple-line-chart.md
@@ -8,20 +8,20 @@ sidebar_position: 3
 
 ブラウザでの表示を確認するには、[echartsエディター](https://echarts.apache.org/examples/en/editor.html?c=line-simple)にアクセスし、設定を変更して変化を確認してみてください。
 
-1. echarts、@wuba/react-native-echarts、reactをインポートします。ここでは、SkiaChartとSVGRendererのみをインポートしています。
+1. echarts、@wuba/react-native-echarts、reactをインポートします。ここでは、SkiaChartとSkiaRendererのみをインポートしています。
 
 ```tsx
 import React, { useRef, useEffect } from 'react';
 import * as echarts from 'echarts/core';
 import { LineChart } from 'echarts/charts';
 import { GridComponent } from 'echarts/components';
-import { SVGRenderer, SkiaChart } from '@wuba/react-native-echarts';
+import { SkiaRenderer, SkiaChart } from '@wuba/react-native-echarts';
 ```
 
 2. echarts.useを使用して、レンダラーとチャートを登録します。
 
 ```tsx
-echarts.use([SVGRenderer, LineChart, GridComponent]);
+echarts.use([SkiaRenderer, LineChart, GridComponent]);
 ```
 
 3. SkiaChartのためのrefを作成します。
@@ -57,7 +57,7 @@ const option = {
 
 ```tsx
 let chart = echarts.init(skiaRef.current, 'light', {
-  renderer: 'svg',
+  renderer: 'skia',
   width: 400,
   height: 400,
 });
@@ -79,9 +79,9 @@ import React, { useRef, useEffect } from 'react';
 import * as echarts from 'echarts/core';
 import { LineChart } from 'echarts/charts';
 import { GridComponent } from 'echarts/components';
-import { SVGRenderer, SkiaChart } from '@wuba/react-native-echarts';
+import { SkiaRenderer, SkiaChart } from '@wuba/react-native-echarts';
 
-echarts.use([SVGRenderer, LineChart, GridComponent]);
+echarts.use([SkiaRenderer, LineChart, GridComponent]);
 
 export default function App() {
   const skiaRef = useRef<any>(null);
@@ -104,7 +104,7 @@ export default function App() {
     let chart: any;
     if (skiaRef.current) {
       chart = echarts.init(skiaRef.current, 'light', {
-        renderer: 'svg',
+        renderer: 'skia',
         width: 400,
         height: 400,
       });
@@ -123,6 +123,6 @@ export default function App() {
 | --- | --- |
 | ![ios](./ios-line.png) | ![android](./android-line.jpg) |
 
-react-native-svgを使用する場合は、SkiaChartをSvgChartに置き換えてください。
+react-native-svgを使用する場合は、SkiaChartをSvgChartに置き換えてください、レンダラーとして「svg」を使用します。
 
 次に、@wuba/react-native-echartsで使用できるさまざまな設定を[echartsの例](https://echarts.apache.org/examples/en/index.html)から見つけることができます。
\ No newline at end of file
diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/migration/_category_.json b/i18n/ja/docusaurus-plugin-content-docs/current/migration/_category_.json
new file mode 100644
index 000000000..0a83a07fe
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/current/migration/_category_.json
@@ -0,0 +1,4 @@
+{
+  "label": "Upgrading",
+  "position": 6
+}
\ No newline at end of file
diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/migration/v2.md b/i18n/ja/docusaurus-plugin-content-docs/current/migration/v2.md
new file mode 100644
index 000000000..3d4d55e00
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/current/migration/v2.md
@@ -0,0 +1,53 @@
+---
+sidebar_position: 1
+---
+
+# v1 から v2 への移行
+
+## 主要な変更点
+- **SVGRenderer** と **SkiaRenderer** が分割されました。
+- **SkiaChart** がリファクタリングされ、`ImageSVG` タグがなくなりました。
+- 新しいレンダリング効果（例：シャドウ）のサポートが追加されました。
+
+## v1 から v2 への移行手順
+
+SVGChart には変更がないため、SVGChart を使用している場合はこの移行をスキップできます。
+
+### 概要
+
+- **SVGRenderer** を **SkiaRenderer** に置き換えます。
+- チャートの初期化時に `renderer: 'skia'` を設定します。
+
+### 1. インポートの更新
+
+#### v1
+
+```js
+import { SVGRenderer, SkiaChart } from '@wuba/react-native-echarts';
+echarts.use([SVGRenderer]);
+```
+
+#### v2
+
+```js
+import { SkiaRenderer, SkiaChart } from '@wuba/react-native-echarts';
+echarts.use([SkiaRenderer]);
+```
+
+### 2. SkiaRenderer でチャートを初期化する
+
+#### v1
+
+```js
+chart = echarts.init(skiaRef.current, 'light', {
+  renderer: 'svg',
+});
+```
+
+#### v2
+
+```js
+chart = echarts.init(skiaRef.current, 'light', {
+  renderer: 'skia',
+});
+```
\ No newline at end of file
diff --git a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/about/_category_.json b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/about/_category_.json
index a73c5b947..b2610b7a6 100644
--- a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/about/_category_.json
+++ b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/about/_category_.json
@@ -1,5 +1,5 @@
 {
     "label": "About",
-    "position": 6
+    "position": 7
   }
   
\ No newline at end of file
diff --git a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/advanced-guides/import-individually.md b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/advanced-guides/import-individually.md
index 3dfb29175..34f5f44d0 100644
--- a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/advanced-guides/import-individually.md
+++ b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/advanced-guides/import-individually.md
@@ -4,9 +4,9 @@ sidebar_position: 1
 
 # 单独导入
 
-如果你只需要使用 react-native-skia 渲染器，你可以单独导入 SVGRenderer 和 SkiaChart。
+如果你只需要使用 react-native-skia 渲染器，你可以单独导入 SkiaRenderer 和 SkiaChart。
 ```tsx
-import SkiaChart, { SVGRenderer } from '@wuba/react-native-echarts/skiaChart';
+import SkiaChart, { SkiaRenderer } from '@wuba/react-native-echarts/skiaChart';
 ```
 
 如果你只需要使用 react-native-svg 渲染器，你可以单独导入 SVGRenderer 和 SvgChart。
diff --git a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/getting-started/write-a-adaptive-height-chart.md b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/getting-started/write-a-adaptive-height-chart.md
index 7365b6bf9..6652238dc 100644
--- a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/getting-started/write-a-adaptive-height-chart.md
+++ b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/getting-started/write-a-adaptive-height-chart.md
@@ -14,13 +14,13 @@ import { StyleSheet, View, Dimensions } from "react-native";
 import * as echarts from "echarts/core";
 import { LineChart } from "echarts/charts";
 import { GridComponent } from "echarts/components";
-import { SVGRenderer, SkiaChart } from "@wuba/react-native-echarts";
+import { SkiaRenderer, SkiaChart } from "@wuba/react-native-echarts";
 ```
 
 2. 使用 echarts.use 来注册渲染器和图表。
 
 ```tsx
-echarts.use([SVGRenderer, LineChart, GridComponent]);
+echarts.use([SkiaRenderer, LineChart, GridComponent]);
 ```
 
 3. 为 SkiaChart 组件创建一个 Ref, 并使用 View 容器装它。通过 onLayout 获取容器的宽高后续对 echarts 图表进行赋值。
@@ -81,7 +81,7 @@ const option = {
 
 ```tsx
 let chart = echarts.init(skiaRef.current, "light", {
-  renderer: "svg",
+  renderer: "skia",
   width: chartWidth,
   height: chartHeight,
 });
@@ -134,9 +134,9 @@ import { StyleSheet, View, Dimensions } from "react-native";
 import * as echarts from "echarts/core";
 import { LineChart } from "echarts/charts";
 import { GridComponent } from "echarts/components";
-import { SVGRenderer, SkiaChart } from "@wuba/react-native-echarts";
+import { SkiaRenderer, SkiaChart } from "@wuba/react-native-echarts";
 
-echarts.use([SVGRenderer, LineChart, GridComponent]);
+echarts.use([SkiaRenderer, LineChart, GridComponent]);
 
 export default function App() {
   const skiaRef = useRef<any>(null);
@@ -194,7 +194,7 @@ export default function App() {
     let chart: any;
     if (skiaRef.current) {
       chart = echarts.init(skiaRef.current, "light", {
-        renderer: "svg",
+        renderer: "skia",
         width: chartWidth,
         height: chartHeight,
       });
@@ -246,6 +246,6 @@ const styles = StyleSheet.create({
 | ------------------------ | -------------------------------- |
 | ![ios](./ios_rotate.gif) | ![android](./android_rotate.gif) |
 
-如果你想使用 react-native-skia，只需将 SvgChart 替换为 SkiaChart。
+如果你想使用 react-native-svg，只需将 SkiaChart 替换为 SvgChart，然后使用 `svg` 作为渲染器。
 
 更多图表配置，可以参考[echarts 文档](https://echarts.apache.org/zh/option.html#title)。
diff --git a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/getting-started/write-a-dynamic-data-chart.md b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/getting-started/write-a-dynamic-data-chart.md
index d3628eab2..75b3cf0fd 100644
--- a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/getting-started/write-a-dynamic-data-chart.md
+++ b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/getting-started/write-a-dynamic-data-chart.md
@@ -419,6 +419,6 @@ const styles = StyleSheet.create({
 | ------------------------------ | -------------------------------------- |
 | ![ios](./dynamic-data-ios.gif) | ![android](./dynamic-data-android.gif) |
 
-如果你想使用 react-native-skia，只需将 SvgChart 替换为 SkiaChart。
+如果你想使用 react-native-skia，只需将 SvgChart 替换为 SkiaChart，然后使用 `skia` 作为渲染器。
 
 更多图表配置，可以参考[echarts 文档](https://echarts.apache.org/zh/option.html#title)。
diff --git a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/getting-started/write-a-simple-line-chart.md b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/getting-started/write-a-simple-line-chart.md
index dc5adc1a6..a3ebf4044 100644
--- a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/getting-started/write-a-simple-line-chart.md
+++ b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/getting-started/write-a-simple-line-chart.md
@@ -8,20 +8,20 @@ sidebar_position: 3
 
 为了看看它在浏览器中的样子，你可以访问 [echarts 编辑器](https://echarts.apache.org/examples/en/editor.html?c=line-simple)，并尝试修改配置，看看有什么变化。
 
-1. 导入 echarts、@wuba/react-native-echarts、react。这里我只导入了 SkiaChart 和 SVGRenderer。
+1. 导入 echarts、@wuba/react-native-echarts、react。这里我只导入了 SkiaChart 和 SkiaRenderer。
 
 ```tsx
 import React, { useRef, useEffect } from 'react';
 import * as echarts from 'echarts/core';
 import { LineChart } from 'echarts/charts';
 import { GridComponent } from 'echarts/components';
-import { SVGRenderer, SkiaChart } from '@wuba/react-native-echarts';
+import { SkiaRenderer, SkiaChart } from '@wuba/react-native-echarts';
 ```
 
 2. 使用 echarts.use 来注册渲染器和图表。
 
 ```tsx
-echarts.use([SVGRenderer, LineChart, GridComponent]);
+echarts.use([SkiaRenderer, LineChart, GridComponent]);
 ```
 
 3. 为 SkiaChart 组件创建一个 Ref。
@@ -57,7 +57,7 @@ const option = {
 
 ```tsx
 let chart = echarts.init(skiaRef.current, 'light', {
-  renderer: 'svg',
+  renderer: 'skia',
   width: 400,
   height: 400,
 });
@@ -78,9 +78,9 @@ import React, { useRef, useEffect } from 'react';
 import * as echarts from 'echarts/core';
 import { LineChart } from 'echarts/charts';
 import { GridComponent } from 'echarts/components';
-import { SVGRenderer, SkiaChart } from '@wuba/react-native-echarts';
+import { SkiaRenderer, SkiaChart } from '@wuba/react-native-echarts';
 
-echarts.use([SVGRenderer, LineChart, GridComponent]);
+echarts.use([SkiaRenderer, LineChart, GridComponent]);
 
 export default function App() {
   const skiaRef = useRef<any>(null);
@@ -103,7 +103,7 @@ export default function App() {
     let chart: any;
     if (skiaRef.current) {
       chart = echarts.init(skiaRef.current, 'light', {
-        renderer: 'svg',
+        renderer: 'skia',
         width: 400,
         height: 400,
       });
@@ -121,6 +121,6 @@ export default function App() {
 | --- | --- |
 | ![ios](./ios-line.png) | ![android](./android-line.jpg) |
 
-如果你想使用 react-native-svg，只需将 SkiaChart 替换为 SvgChart。
+如果你想使用 react-native-svg，只需将 SkiaChart 替换为 SvgChart，并使用 “svg” 作为渲染器。
 
 接下来你可以从 [echarts 示例](https://echarts.apache.org/examples/zh/index.html) 中找到更多在 @wuba/react-native-echarts 中使用的配置。
\ No newline at end of file
diff --git a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/migration/_category_.json b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/migration/_category_.json
new file mode 100644
index 000000000..0a83a07fe
--- /dev/null
+++ b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/migration/_category_.json
@@ -0,0 +1,4 @@
+{
+  "label": "Upgrading",
+  "position": 6
+}
\ No newline at end of file
diff --git a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/migration/v2.md b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/migration/v2.md
new file mode 100644
index 000000000..34e582a28
--- /dev/null
+++ b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/migration/v2.md
@@ -0,0 +1,53 @@
+---
+sidebar_position: 1
+---
+
+# 从 v1 迁移到 v2
+
+## 主要变更
+- **SVGRenderer** 和 **SkiaRenderer** 现在已分离。
+- **SkiaChart** 重构，不再使用 `ImageSVG` 标签。
+- 增加了对新渲染效果的支持（例如阴影）。
+
+## 从 v1 迁移到 v2 的步骤
+
+如果你使用的是 SVGChart，则无需进行迁移，因为它没有任何变更。
+
+### 概要
+
+- 将 **SVGRenderer** 替换为 **SkiaRenderer**。
+- 初始化图表时，设置 `renderer: 'skia'`。
+
+### 1. 更新导入
+
+#### v1
+
+```js
+import { SVGRenderer, SkiaChart } from '@wuba/react-native-echarts';
+echarts.use([SVGRenderer]);
+```
+
+#### v2
+
+```js
+import { SkiaRenderer, SkiaChart } from '@wuba/react-native-echarts';
+echarts.use([SkiaRenderer]);
+```
+
+### 2. 使用 SkiaRenderer 初始化图表
+
+#### v1
+
+```js
+chart = echarts.init(skiaRef.current, 'light', {
+  renderer: 'svg',
+});
+```
+
+#### v2
+
+```js
+chart = echarts.init(skiaRef.current, 'light', {
+  renderer: 'skia',
+});
+```
\ No newline at end of file
diff --git a/i18n/zh-hant/docusaurus-plugin-content-docs/current/about/_category_.json b/i18n/zh-hant/docusaurus-plugin-content-docs/current/about/_category_.json
index 5d07b3408..0c41061cf 100644
--- a/i18n/zh-hant/docusaurus-plugin-content-docs/current/about/_category_.json
+++ b/i18n/zh-hant/docusaurus-plugin-content-docs/current/about/_category_.json
@@ -1,5 +1,5 @@
 {
     "label": "About",
-    "position": 6
+    "position": 7
   }
   
diff --git a/i18n/zh-hant/docusaurus-plugin-content-docs/current/advanced-guides/import-individually.md b/i18n/zh-hant/docusaurus-plugin-content-docs/current/advanced-guides/import-individually.md
index c31182565..e48c99b5f 100644
--- a/i18n/zh-hant/docusaurus-plugin-content-docs/current/advanced-guides/import-individually.md
+++ b/i18n/zh-hant/docusaurus-plugin-content-docs/current/advanced-guides/import-individually.md
@@ -4,9 +4,9 @@ sidebar_position: 1
 
 # 單獨導入
 
-如果您只需要使用 react-native-skia 渲染器，則可以單獨匯入 SVGRenderer 和 SkiaChart。
+如果您只需要使用 react-native-skia 渲染器，則可以單獨匯入 SkiaRenderer 和 SkiaChart。
 ```tsx
-import SkiaChart, { SVGRenderer } from '@wuba/react-native-echarts/skiaChart';
+import SkiaChart, { SkiaRenderer } from '@wuba/react-native-echarts/skiaChart';
 ```
 
 如果您只需要使用 react-native-svg 渲染器，則可以單獨匯入 SVGRenderer 和 SvgChart。
diff --git a/i18n/zh-hant/docusaurus-plugin-content-docs/current/getting-started/write-a-adaptive-height-chart.md b/i18n/zh-hant/docusaurus-plugin-content-docs/current/getting-started/write-a-adaptive-height-chart.md
index 9b0a5bb5b..64fccaa03 100644
--- a/i18n/zh-hant/docusaurus-plugin-content-docs/current/getting-started/write-a-adaptive-height-chart.md
+++ b/i18n/zh-hant/docusaurus-plugin-content-docs/current/getting-started/write-a-adaptive-height-chart.md
@@ -14,13 +14,13 @@ import { StyleSheet, View, Dimensions } from "react-native";
 import * as echarts from "echarts/core";
 import { LineChart } from "echarts/charts";
 import { GridComponent } from "echarts/components";
-import { SVGRenderer, SkiaChart } from "@wuba/react-native-echarts";
+import { SkiaRenderer, SkiaChart } from "@wuba/react-native-echarts";
 ```
 
 2. 使用 echarts.use 註冊渲染器和圖表。
 
 ```tsx
-echarts.use([SVGRenderer, LineChart, GridComponent]);
+echarts.use([SkiaRenderer, LineChart, GridComponent]);
 ```
 
 3. 為 SkiaChart 元件建立一個參考，並使用 View 容器將其包裝起來。 使用 onLayout 獲取容器的寬度和高度，以便以後分配給 ECharts 圖表。
@@ -82,7 +82,7 @@ const option = {
 
 ```tsx
 let chart = echarts.init(skiaRef.current, "light", {
-  renderer: "svg",
+  renderer: "skia",
   width: chartWidth,
   height: chartHeight,
 });
@@ -135,9 +135,9 @@ import { StyleSheet, View, Dimensions } from "react-native";
 import * as echarts from "echarts/core";
 import { LineChart } from "echarts/charts";
 import { GridComponent } from "echarts/components";
-import { SVGRenderer, SkiaChart } from "@wuba/react-native-echarts";
+import { SkiaRenderer, SkiaChart } from "@wuba/react-native-echarts";
 
-echarts.use([SVGRenderer, LineChart, GridComponent]);
+echarts.use([SkiaRenderer, LineChart, GridComponent]);
 
 export default function App() {
   const skiaRef = useRef<any>(null);
@@ -195,7 +195,7 @@ export default function App() {
     let chart: any;
     if (skiaRef.current) {
       chart = echarts.init(skiaRef.current, "light", {
-        renderer: "svg",
+        renderer: "skia",
         width: chartWidth,
         height: chartHeight,
       });
@@ -251,6 +251,6 @@ const styles = StyleSheet.create({
 | ------------------------ | -------------------------------- |
 | ![ios](./ios_rotate.gif) | ![android](./android_rotate.gif) |
 
-如果您想使用 react-native-skia，只需將 SvgChart 替換為 SkiaChart。
+如果您想使用 react-native-svg，只需將 SkiaChart 替換為 SvgChart，然後使用 `svg` 作為渲染器。
 
 有關更多圖表配置，請參閱 [echarts 文件](https://echarts.apache.org/en/option.html#title)。
diff --git a/i18n/zh-hant/docusaurus-plugin-content-docs/current/getting-started/write-a-dynamic-data-chart.md b/i18n/zh-hant/docusaurus-plugin-content-docs/current/getting-started/write-a-dynamic-data-chart.md
index 94c2ccfb7..d6b35e64f 100644
--- a/i18n/zh-hant/docusaurus-plugin-content-docs/current/getting-started/write-a-dynamic-data-chart.md
+++ b/i18n/zh-hant/docusaurus-plugin-content-docs/current/getting-started/write-a-dynamic-data-chart.md
@@ -419,6 +419,6 @@ const styles = StyleSheet.create({
 | ------------------------------ | -------------------------------------- |
 | ![ios](./dynamic-data-ios.gif) | ![android](./dynamic-data-android.gif) |
 
-如果您想使用 react-native-skia，只需將 SvgChart 替換為 SkiaChart。
+如果您想使用 react-native-skia，只需將 SvgChart 替換為 SkiaChart，然後使用 `skia` 作為渲染器。
 
 有關更多圖表配置，請參閱 [echarts 文檔](https://echarts.apache.org/en/option.html#title)。
diff --git a/i18n/zh-hant/docusaurus-plugin-content-docs/current/getting-started/write-a-simple-line-chart.md b/i18n/zh-hant/docusaurus-plugin-content-docs/current/getting-started/write-a-simple-line-chart.md
index 426a705b6..5c8646be4 100644
--- a/i18n/zh-hant/docusaurus-plugin-content-docs/current/getting-started/write-a-simple-line-chart.md
+++ b/i18n/zh-hant/docusaurus-plugin-content-docs/current/getting-started/write-a-simple-line-chart.md
@@ -8,20 +8,20 @@ sidebar_position: 3
 
 要查看在瀏覽器中的樣子，您可以訪問 [echarts 編輯器](https://echarts.apache.org/examples/en/editor.html?c=line-simple)並嘗試將配置修改為看到變化。
 
-1. 導入 echarts、@wuba/react-native-echarts 和 react。這裡我只導入了 SkiaChart 和 SVGRenderer。
+1. 導入 echarts、@wuba/react-native-echarts 和 react。這裡我只導入了 SkiaChart 和 SkiaRenderer。
 
 ```tsx
 import React, { useRef, useEffect } from 'react';
 import * as echarts from 'echarts/core';
 import { LineChart } from 'echarts/charts';
 import { GridComponent } from 'echarts/components';
-import { SVGRenderer, SkiaChart } from '@wuba/react-native-echarts';
+import { SkiaRenderer, SkiaChart } from '@wuba/react-native-echarts';
 ```
 
 2. 使用 echarts.use 註冊渲染器和圖表。
 
 ```tsx
-echarts.use([SVGRenderer, LineChart, GridComponent]);
+echarts.use([SkiaRenderer, LineChart, GridComponent]);
 ```
 
 3. 為 SkiaChart 創建一個 ref。
@@ -57,7 +57,7 @@ const option = {
 
 ```tsx
 let chart = echarts.init(skiaRef.current, 'light', {
-  renderer: 'svg',
+  renderer: 'skia',
   width: 400,
   height: 400,
 });
@@ -78,9 +78,9 @@ import React, { useRef, useEffect } from 'react';
 import * as echarts from 'echarts/core';
 import { LineChart } from 'echarts/charts';
 import { GridComponent } from 'echarts/components';
-import { SVGRenderer, SkiaChart } from '@wuba/react-native-echarts';
+import { SkiaRenderer, SkiaChart } from '@wuba/react-native-echarts';
 
-echarts.use([SVGRenderer, LineChart, GridComponent]);
+echarts.use([SkiaRenderer, LineChart, GridComponent]);
 
 export default function App() {
   const skiaRef = useRef<any>(null);
@@ -103,7 +103,7 @@ export default function App() {
     let chart: any;
     if (skiaRef.current) {
       chart = echarts.init(skiaRef.current, 'light', {
-        renderer: 'svg',
+        renderer: 'skia',
         width: 400,
         height: 400,
       });
@@ -121,6 +121,6 @@ export default function App() {
 | --- | --- |
 | ![ios](./ios-line.png) | ![android](./android-line.jpg) |
 
-如果您想使用 react-native-svg，只需將 SkiaChart 替換為 SvgChart 即可。
+如果您想使用 react-native-svg，只需將 SkiaChart 替換為 SvgChart 即可，並使用 “svg” 作為渲染器。
 
 接下來，您可以從 [echarts 示例](https://echarts.apache.org/examples/en/index.html)中找到更多用於 @wuba/react-native-echarts 的配置。
\ No newline at end of file
diff --git a/i18n/zh-hant/docusaurus-plugin-content-docs/current/migration/_category_.json b/i18n/zh-hant/docusaurus-plugin-content-docs/current/migration/_category_.json
new file mode 100644
index 000000000..0a83a07fe
--- /dev/null
+++ b/i18n/zh-hant/docusaurus-plugin-content-docs/current/migration/_category_.json
@@ -0,0 +1,4 @@
+{
+  "label": "Upgrading",
+  "position": 6
+}
\ No newline at end of file
diff --git a/i18n/zh-hant/docusaurus-plugin-content-docs/current/migration/v2.md b/i18n/zh-hant/docusaurus-plugin-content-docs/current/migration/v2.md
new file mode 100644
index 000000000..8e91dd31e
--- /dev/null
+++ b/i18n/zh-hant/docusaurus-plugin-content-docs/current/migration/v2.md
@@ -0,0 +1,53 @@
+---
+sidebar_position: 1
+---
+
+# 從 v1 遷移到 v2
+
+## 主要變更
+- **SVGRenderer** 和 **SkiaRenderer** 現在已分離。
+- **SkiaChart** 重構，不再使用 `ImageSVG` 標籤。
+- 增加了對新渲染效果的支援（例如陰影）。
+
+## 從 v1 遷移到 v2 的步驟
+
+如果你使用的是 SVGChart，則無需進行遷移，因為它沒有任何變更。
+
+### 概要
+
+- 將 **SVGRenderer** 替換為 **SkiaRenderer**。
+- 初始化圖表時，設定 `renderer: 'skia'`。
+
+### 1. 更新導入
+
+#### v1
+
+```js
+import { SVGRenderer, SkiaChart } from '@wuba/react-native-echarts';
+echarts.use([SVGRenderer]);
+```
+
+#### v2
+
+```js
+import { SkiaRenderer, SkiaChart } from '@wuba/react-native-echarts';
+echarts.use([SkiaRenderer]);
+```
+
+### 2. 使用 SkiaRenderer 初始化圖表
+
+#### v1
+
+```js
+chart = echarts.init(skiaRef.current, 'light', {
+  renderer: 'svg',
+});
+```
+
+#### v2
+
+```js
+chart = echarts.init(skiaRef.current, 'light', {
+  renderer: 'skia',
+});
+```
\ No newline at end of file
diff --git a/src/components/SnackPlayer/index.tsx b/src/components/SnackPlayer/index.tsx
index fd5dcb7a5..97cacae92 100644
--- a/src/components/SnackPlayer/index.tsx
+++ b/src/components/SnackPlayer/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-const defaultDependencies = ['@wuba/react-native-echarts@1.2.5-all.0', 'react-native-svg', 'react-native-reanimated', '@shopify/react-native-skia', 'react-native-gesture-handler']
+const defaultDependencies = ['@wuba/react-native-echarts@2.0.0-all.1', 'react-native-svg', 'react-native-reanimated', '@shopify/react-native-skia', 'react-native-gesture-handler']
 
 type SnackPlayerProps = {
     name?: string;
diff --git a/src/snippets/adpative-chart/index.tsx b/src/snippets/adpative-chart/index.tsx
index fb9307a2d..3f26bdcd8 100644
--- a/src/snippets/adpative-chart/index.tsx
+++ b/src/snippets/adpative-chart/index.tsx
@@ -5,9 +5,9 @@
 
 import { useState, useRef, useEffect } from "react";
 import { StyleSheet, View, Dimensions } from "react-native";
-import { SVGRenderer, SkiaChart, echarts } from "@wuba/react-native-echarts";
+import { SkiaRenderer, SkiaChart, echarts } from "@wuba/react-native-echarts";
 
-echarts.use([SVGRenderer]);
+echarts.use([SkiaRenderer]);
 
 export default function App() {
     const skiaRef = useRef<any>(null);
@@ -65,7 +65,7 @@ export default function App() {
       let chart: any;
       if (skiaRef.current) {
         chart = echarts.init(skiaRef.current, "light", {
-          renderer: "svg",
+          renderer: "skia",
           width: chartWidth,
           height: chartHeight,
         });
diff --git a/src/snippets/custom-gestures/index.tsx b/src/snippets/custom-gestures/index.tsx
index 398f901fc..bbf22a979 100644
--- a/src/snippets/custom-gestures/index.tsx
+++ b/src/snippets/custom-gestures/index.tsx
@@ -5,10 +5,10 @@
 
 import { useRef, useEffect, useCallback, useState } from 'react';
 import { StyleSheet, View, Dimensions, Text } from 'react-native';
-import { SVGRenderer, SkiaChart, echarts } from '@wuba/react-native-echarts';
+import { SkiaRenderer, SkiaChart, echarts } from '@wuba/react-native-echarts';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 
-echarts.use([SVGRenderer]);
+echarts.use([SkiaRenderer]);
 
 const E_HEIGHT = 400;
 const E_WIDTH = Dimensions.get('window').width;
@@ -95,7 +95,7 @@ export default function App() {
     let chart: any;
     if (skiaRef.current) {
       chart = echarts.init(skiaRef.current, 'light', {
-        renderer: 'svg',
+        renderer: 'skia',
         width: E_WIDTH,
         height: E_HEIGHT,
       });
diff --git a/src/snippets/large-area-chart/index.tsx b/src/snippets/large-area-chart/index.tsx
index c4e4cb4c4..5dff6697d 100644
--- a/src/snippets/large-area-chart/index.tsx
+++ b/src/snippets/large-area-chart/index.tsx
@@ -5,10 +5,10 @@
 
 import { useRef, useEffect } from 'react';
 import { StyleSheet, View, Dimensions } from 'react-native';
-import { SVGRenderer, SkiaChart, echarts } from '@wuba/react-native-echarts';
+import { SkiaRenderer, SkiaChart, echarts } from '@wuba/react-native-echarts';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 
-echarts.use([SVGRenderer]);
+echarts.use([SkiaRenderer]);
 
 const E_HEIGHT = 400;
 const E_WIDTH = Dimensions.get('window').width;
@@ -95,7 +95,7 @@ export default function App() {
     let chart: any;
     if (skiaRef.current) {
       chart = echarts.init(skiaRef.current, 'light', {
-        renderer: 'svg',
+        renderer: 'skia',
         width: E_WIDTH,
         height: E_HEIGHT,
       });
diff --git a/src/snippets/simple-line-chart/index.tsx b/src/snippets/simple-line-chart/index.tsx
index 42fce970c..512abf9ef 100644
--- a/src/snippets/simple-line-chart/index.tsx
+++ b/src/snippets/simple-line-chart/index.tsx
@@ -4,9 +4,9 @@
 // under Apache License 2.0.
 import { useRef, useEffect } from 'react';
 import { StyleSheet, View, Dimensions } from 'react-native';
-import { SVGRenderer, SkiaChart, echarts } from '@wuba/react-native-echarts';
+import { SkiaRenderer, SkiaChart, echarts } from '@wuba/react-native-echarts';
 
-echarts.use([SVGRenderer]);
+echarts.use([SkiaRenderer]);
 
 const E_HEIGHT = 400;
 const E_WIDTH = Dimensions.get('window').width;
@@ -32,7 +32,7 @@ export default function App() {
     let chart: any;
     if (skiaRef.current) {
       chart = echarts.init(skiaRef.current, 'light', {
-        renderer: 'svg',
+        renderer: 'skia',
         width: E_WIDTH,
         height: E_HEIGHT,
       });