feat: react native echarts 2

Author: zhiqingchen

ios/Podfile.lock

@@ -1016,7 +1016,7 @@ PODS:
     - React-Core
   - react-native-safe-area-context (4.8.2):
     - React-Core
-  - react-native-skia (0.1.222):
+  - react-native-skia (1.5.1):
     - glog
     - RCT-Folly (= 2022.05.16.00)
     - React
@@ -1244,7 +1244,7 @@ PODS:
     - glog
     - RCT-Folly (= 2022.05.16.00)
     - React-Core
-  - RNSVG (14.1.0):
+  - RNSVG (15.8.0):
     - React-Core
   - SocketRocket (0.6.1)
   - UMAppLoader (4.5.1)
@@ -1631,7 +1631,7 @@ SPEC CHECKSUMS:
   react-native-netinfo: 3aa5637c18834966e0c932de8ae1ae56fea20a97
   react-native-pager-view: d5f3adb58a4e6e0d200055e9a4afdcda9b9022ce
   react-native-safe-area-context: 0ee144a6170530ccc37a0fd9388e28d06f516a89
-  react-native-skia: a3e5199852a723258bb3c7acaaaed1b36dc5dde2
+  react-native-skia: a50c7fffb96edf98d842a31b77bc530a5fcda58b
   react-native-slider: 33b8d190b59d4f67a541061bb91775d53d617d9d
   react-native-splash-screen: 4312f786b13a81b5169ef346d76d33bc0c6dc457
   react-native-webview: ff06d1fe175ff827882ec88b696a7efcafa7e98d
@@ -1664,7 +1664,7 @@ SPEC CHECKSUMS:
   RNGestureHandler: 15c6ef51acba34c49ff03003806cf5dd6098f383
   RNReanimated: 51ba6c9ecdde77caf364c7e5ae59a089c7dd98b3
   RNScreens: 17e2f657f1b09a71ec3c821368a04acbb7ebcb46
-  RNSVG: ba3e7232f45e34b7b47e74472386cf4e1a676d0a
+  RNSVG: 8b1a777d54096b8c2a0fd38fc9d5a454332bbb4d
   SocketRocket: f32cd54efbe0f095c4d7594881e52619cfe80b17
   UMAppLoader: 79d3ee6aa2447a1fe2e8b0d07acf2de106e55b58
   Yoga: 66a97477b94264cc4e49990c8fe6b153260d871d

package.json

@@ -54,7 +54,7 @@
     "@react-native-masked-view/masked-view": "~0.3.1",
     "@react-native-picker/picker": "2.6.1",
     "@shopify/flash-list": "^1.3.1",
-    "@shopify/react-native-skia": "0.1.222",
+    "@shopify/react-native-skia": "^1.5.1",
     "@tarojs/components": "4.0.7-canary.3",
     "@tarojs/components-rn": "4.0.7-canary.3",
     "@tarojs/helper": "4.0.7-canary.3",
@@ -72,7 +72,7 @@
     "@tarojs/shared": "4.0.7-canary.3",
     "@tarojs/taro": "4.0.7-canary.3",
     "@tarojs/taro-rn": "4.0.7-canary.3",
-    "@wuba/react-native-echarts": "1.2.5",
+    "@wuba/react-native-echarts": "^2.0.0",
     "d3-hierarchy": "^3.1.2",
     "echarts": "^5.4.1",
     "echarts-stat": "^1.2.0",
@@ -108,7 +108,7 @@
     "react-native-safe-area-context": "4.8.2",
     "react-native-screens": "~3.29.0",
     "react-native-splash-screen": "^3.2.0",
-    "react-native-svg": "14.1.0",
+    "react-native-svg": "15.8.0",
     "react-native-webview": "13.6.4",
     "taro-lottie": "^1.0.2"
   },
@@ -141,5 +141,8 @@
     "stylelint": "^16.4.0",
     "typescript": "^5.1.3",
     "webpack": "5.69.0"
+  },
+  "resolutions": {
+    "react-native-svg": "15.8.0"
   }
 }

src/pages/explore/charts/echarts.tsx

@@ -48,7 +48,7 @@ import {
 import { LabelLayout, UniversalTransition } from 'echarts/features';
 import { useEffect, useRef } from 'react';
 import { Dimensions } from 'react-native';
-import { SVGRenderer, SkiaChart as SkiaComponent, SvgChart as SvgComponent } from '@wuba/react-native-echarts';
+import { SVGRenderer, SkiaRenderer, SkiaChart as SkiaComponent, SvgChart as SvgComponent } from '@wuba/react-native-echarts';
 import { View } from '@tarojs/components';
 
 import './echarts.scss';
@@ -95,6 +95,7 @@ echarts.use([
   LabelLayout,
   UniversalTransition,
   SVGRenderer,
+  SkiaRenderer,
   LegendComponent,
   MarkLineComponent,
   MarkPointComponent,
@@ -135,7 +136,8 @@ export default function EchartsPage({ option, width = E_WIDTH, height = E_HEIGHT
     if (skiaRef.current) {
       // @ts-ignore
       chart = echarts.init(skiaRef.current, 'light', {
-        renderer: 'svg',
+        // @ts-ignore
+        renderer: 'skia',
         width,
         height
       });

src/pages/explore/charts/pages/graph/GraphForceDynamic.tsx

@@ -56,7 +56,7 @@ import {
 import { View } from '@tarojs/components';
 import { LabelLayout, UniversalTransition } from 'echarts/features';
 import { useEffect, useRef } from 'react';
-import { SVGRenderer, SkiaChart as SkiaComponent, SvgChart as SvgComponent } from '@wuba/react-native-echarts';
+import { SVGRenderer, SkiaRenderer, SkiaChart as SkiaComponent, SvgChart as SvgComponent } from '@wuba/react-native-echarts';
 import '../style.scss';
 
 // 通过 ComposeOption 来组合出一个只有必须组件和图表的 Option 类型
@@ -111,6 +111,7 @@ echarts.use([
   LabelLayout,
   UniversalTransition,
   SVGRenderer,
+  SkiaRenderer,
   LegendComponent,
   MarkLineComponent,
   MarkPointComponent,
@@ -132,13 +133,14 @@ export default function GraphForceDynamic() {
   const svgRef = useRef<any>(null);
   const skiaRef = useRef<any>(null);
 
-  const runChart = refObject => {
+  const runChart = (refObject, renderer = "svg") => {
     let myChart;
     let inter;
     if (refObject.current) {
       // @ts-ignore
       myChart = echarts.init(refObject.current, 'light', {
-        renderer: 'svg',
+        // @ts-ignore
+        renderer,
         width: E_WIDTH,
         height: E_HEIGHT
       });
@@ -200,7 +202,7 @@ export default function GraphForceDynamic() {
 
   useEffect(() => runChart(svgRef), []);
 
-  useEffect(() => runChart(skiaRef), []);
+  useEffect(() => runChart(skiaRef, 'skia'), []);
 
   return (
     <View>

src/pages/explore/charts/pages/graphic/GraphicWaveAnimation.tsx

@@ -55,7 +55,7 @@ import {
 } from 'echarts/components';
 import { LabelLayout, UniversalTransition } from 'echarts/features';
 import { useEffect, useRef } from 'react';
-import { SVGRenderer, SkiaChart as SkiaComponent, SvgChart as SvgComponent } from '@wuba/react-native-echarts';
+import { SVGRenderer, SkiaRenderer, SkiaChart as SkiaComponent, SvgChart as SvgComponent } from '@wuba/react-native-echarts';
 import { Text, View } from '@tarojs/components';
 import '../style.scss';
 
@@ -111,6 +111,7 @@ echarts.use([
   LabelLayout,
   UniversalTransition,
   SVGRenderer,
+  SkiaRenderer,
   LegendComponent,
   MarkLineComponent,
   MarkPointComponent,
@@ -585,7 +586,8 @@ export default function GraphicWaveAnimation() {
     if (skiaRef.current) {
       // @ts-ignore
       chart = echarts.init(skiaRef.current, 'light', {
-        renderer: 'svg',
+        // @ts-ignore
+        renderer: 'skia',
         width: E_WIDTH,
         height: E_HEIGHT
       });

src/pages/explore/charts/pages/template.tsx

@@ -55,7 +55,7 @@ import {
 } from 'echarts/components';
 import { LabelLayout, UniversalTransition } from 'echarts/features';
 import { useEffect, useRef } from 'react';
-import { SVGRenderer, SkiaChart as SkiaComponent, SvgChart as SvgComponent } from '@wuba/react-native-echarts';
+import { SVGRenderer, SkiaRenderer, SkiaChart as SkiaComponent, SvgChart as SvgComponent } from '@wuba/react-native-echarts';
 import { Text, View } from '@tarojs/components';
 import '../style.scss';
 
@@ -111,6 +111,7 @@ echarts.use([
   LabelLayout,
   UniversalTransition,
   SVGRenderer,
+  SkiaRenderer,
   LegendComponent,
   MarkLineComponent,
   MarkPointComponent,
@@ -234,7 +235,7 @@ export default function DatasetLink() {
     if (skiaRef.current) {
       // @ts-ignore
       chart = echarts.init(skiaRef.current, 'light', {
-        renderer: 'svg',
+        renderer: 'skia',
         width: E_WIDTH,
         height: E_HEIGHT
       });

yarn.lock

@@ -4204,13 +4204,13 @@
     recyclerlistview "4.2.1"
     tslib "2.6.3"
 
-"@shopify/react-native-skia@0.1.222":
-  version "0.1.222"
-  resolved "https://registry.yarnpkg.com/@shopify/react-native-skia/-/react-native-skia-0.1.222.tgz#2363d4eacfa790fdffe962f3e6c5adc5da39b244"
-  integrity sha512-3XnyCz+MyBcPznSb1n39UvXj70QaPgPfIgP0nx1+lw5daOTzAPCjuIGSB/SFnr8kptfyYc35+TCnrKXgijTUug==
+"@shopify/react-native-skia@^1.5.1":
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/@shopify/react-native-skia/-/react-native-skia-1.5.1.tgz#083aed1cf5709da2050862997ad417830284dde4"
+  integrity sha512-J+Di2sD7ONL8uGKLjnMQ8osHCDVBFsyg7EvhUlfbxi517Lk6sp7Dt1zTcXKs7ag8cyQKggumkuJLa7AbIRx5+g==
   dependencies:
     canvaskit-wasm "0.39.1"
-    react-reconciler "^0.27.0"
+    react-reconciler "0.27.0"
 
 "@sideway/address@^4.1.5":
   version "4.1.5"
@@ -5803,10 +5803,10 @@
   resolved "https://registry.yarnpkg.com/@webgpu/types/-/types-0.1.21.tgz#b181202daec30d66ccd67264de23814cfd176d3a"
   integrity sha512-pUrWq3V5PiSGFLeLxoGqReTZmiiXwY3jRkIG5sLLKjyqNxrwm/04b4nw7LSmGWJcKk59XOM/YRTUwOzo4MMlow==
 
-"@wuba/react-native-echarts@1.2.5":
-  version "1.2.5"
-  resolved "https://registry.yarnpkg.com/@wuba/react-native-echarts/-/react-native-echarts-1.2.5.tgz#06cc7bbbf675fc334daaaaa0b8300b72b7530f93"
-  integrity sha512-5tDmLXO4n2hLmGIZSCdnkIEHTwMeW94W2VGE/Y94euFOgw1bSE551TQCAo1gmczXuErzT9SyCdZQkFn4KheQ6Q==
+"@wuba/react-native-echarts@^2.0.0":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@wuba/react-native-echarts/-/react-native-echarts-2.0.0.tgz#2184359b175b0b9ed25e28f6cbaa5fa347d586ed"
+  integrity sha512-KI98o1JLEOlm+O/kzb/OA3qqZ7Dgey6xpLrEiWGuobkJ8F96gk2/kaoi/inuORZCjt4HQvSBNMvrlZ14wwzvGQ==
   dependencies:
     "@xmldom/xmldom" "^0.8.6"
     entities "^4.4.0"
@@ -16188,13 +16188,14 @@ react-native-svg-transformer@^1.4.0:
     "@svgr/plugin-svgo" "^8.1.0"
     path-dirname "^1.0.2"
 
-react-native-svg@14.1.0:
-  version "14.1.0"
-  resolved "https://registry.yarnpkg.com/react-native-svg/-/react-native-svg-14.1.0.tgz#7903bddd3c71bf3a8a503918253c839e6edaa724"
-  integrity sha512-HeseElmEk+AXGwFZl3h56s0LtYD9HyGdrpg8yd9QM26X+d7kjETrRQ9vCjtxuT5dCZEIQ5uggU1dQhzasnsCWA==
+react-native-svg@15.8.0:
+  version "15.8.0"
+  resolved "https://registry.yarnpkg.com/react-native-svg/-/react-native-svg-15.8.0.tgz#9b5fd4f5cf5675197b3f4cbfcc77c215de2b9502"
+  integrity sha512-KHJzKpgOjwj1qeZzsBjxNdoIgv2zNCO9fVcoq2TEhTRsVV5DGTZ9JzUZwybd7q4giT/H3RdtqC3u44dWdO0Ffw==
   dependencies:
     css-select "^5.1.0"
     css-tree "^1.1.3"
+    warn-once "0.1.1"
 
 [email protected]:
   version "13.6.4"
@@ -16248,6 +16249,14 @@ react-native@^0.73.1:
     ws "^6.2.2"
     yargs "^17.6.2"
 
+[email protected]:
+  version "0.27.0"
+  resolved "https://registry.yarnpkg.com/react-reconciler/-/react-reconciler-0.27.0.tgz#360124fdf2d76447c7491ee5f0e04503ed9acf5b"
+  integrity sha512-HmMDKciQjYmBRGuuhIaKA1ba/7a+UsM5FzOZsMO2JYHt9Jh8reCb7j1eDC95NOyUlKM9KRyvdx0flBuDvYSBoA==
+  dependencies:
+    loose-envify "^1.1.0"
+    scheduler "^0.21.0"
+
 [email protected]:
   version "0.29.0"
   resolved "https://registry.yarnpkg.com/react-reconciler/-/react-reconciler-0.29.0.tgz#ee769bd362915076753f3845822f2d1046603de7"
@@ -16256,14 +16265,6 @@ [email protected]:
     loose-envify "^1.1.0"
     scheduler "^0.23.0"
 
-react-reconciler@^0.27.0:
-  version "0.27.0"
-  resolved "https://registry.yarnpkg.com/react-reconciler/-/react-reconciler-0.27.0.tgz#360124fdf2d76447c7491ee5f0e04503ed9acf5b"
-  integrity sha512-HmMDKciQjYmBRGuuhIaKA1ba/7a+UsM5FzOZsMO2JYHt9Jh8reCb7j1eDC95NOyUlKM9KRyvdx0flBuDvYSBoA==
-  dependencies:
-    loose-envify "^1.1.0"
-    scheduler "^0.21.0"
-
 [email protected]:
   version "0.11.0"
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.11.0.tgz#77198b944733f0f1f1a90e791de4541f9f074046"
@@ -19020,7 +19021,7 @@ walker@^1.0.7:
   dependencies:
     makeerror "1.0.12"
 
-warn-once@^0.1.0:
+warn-once@0.1.1, warn-once@^0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/warn-once/-/warn-once-0.1.1.tgz#952088f4fb56896e73fd4e6a3767272a3fccce43"
   integrity sha512-VkQZJbO8zVImzYFteBXvBOZEl1qL175WH8VmZcxF2fZAoudNhNDvHi+doCaAEdU2l2vtcIwa2zn0QK5+I1HQ3Q==