From 340356d31c5b5a1f582ba0047f8e6143310eae00 Mon Sep 17 00:00:00 2001 From: tony chen Date: Mon, 4 Nov 2024 15:59:14 +0800 Subject: [PATCH] feat: react native echarts 2 --- ios/Podfile.lock | 8 ++-- package.json | 9 ++-- src/pages/explore/charts/echarts.tsx | 6 ++- .../charts/pages/graph/GraphForceDynamic.tsx | 10 +++-- .../pages/graphic/GraphicWaveAnimation.tsx | 6 ++- src/pages/explore/charts/pages/template.tsx | 5 ++- yarn.lock | 45 ++++++++++--------- 7 files changed, 50 insertions(+), 39 deletions(-) diff --git a/ios/Podfile.lock b/ios/Podfile.lock index 29f4f7d2..78466fef 100644 --- a/ios/Podfile.lock +++ b/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 diff --git a/package.json b/package.json index 67f9c738..0e30c219 100644 --- a/package.json +++ b/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" } } diff --git a/src/pages/explore/charts/echarts.tsx b/src/pages/explore/charts/echarts.tsx index fad29cff..f0451373 100644 --- a/src/pages/explore/charts/echarts.tsx +++ b/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 }); diff --git a/src/pages/explore/charts/pages/graph/GraphForceDynamic.tsx b/src/pages/explore/charts/pages/graph/GraphForceDynamic.tsx index 6a420bca..a8eca7bc 100644 --- a/src/pages/explore/charts/pages/graph/GraphForceDynamic.tsx +++ b/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(null); const skiaRef = useRef(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 ( diff --git a/src/pages/explore/charts/pages/graphic/GraphicWaveAnimation.tsx b/src/pages/explore/charts/pages/graphic/GraphicWaveAnimation.tsx index cae97a74..588a8bba 100644 --- a/src/pages/explore/charts/pages/graphic/GraphicWaveAnimation.tsx +++ b/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 }); diff --git a/src/pages/explore/charts/pages/template.tsx b/src/pages/explore/charts/pages/template.tsx index 932c04ca..77453e75 100644 --- a/src/pages/explore/charts/pages/template.tsx +++ b/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 }); diff --git a/yarn.lock b/yarn.lock index 2b28f3df..9365f12a 100644 --- a/yarn.lock +++ b/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" react-native-webview@13.6.4: version "13.6.4" @@ -16248,6 +16249,14 @@ react-native@^0.73.1: ws "^6.2.2" yargs "^17.6.2" +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" + react-reconciler@0.29.0: version "0.29.0" resolved "https://registry.yarnpkg.com/react-reconciler/-/react-reconciler-0.29.0.tgz#ee769bd362915076753f3845822f2d1046603de7" @@ -16256,14 +16265,6 @@ react-reconciler@0.29.0: 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" - react-refresh@0.11.0: 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==