Skip to content
This repository was archived by the owner on Dec 2, 2025. It is now read-only.

Commit 340356d

Browse files
zhiqingchenzhiqingchen
committed
feat: react native echarts 2
1 parent 3a07607 commit 340356d

File tree

7 files changed

+50
-39
lines changed

7 files changed

+50
-39
lines changed

‎ios/Podfile.lock‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1016,7 +1016,7 @@ PODS:
10161016
- React-Core
10171017
- react-native-safe-area-context (4.8.2):
10181018
- React-Core
1019-
- react-native-skia (0.1.222):
1019+
- react-native-skia (1.5.1):
10201020
- glog
10211021
- RCT-Folly (= 2022.05.16.00)
10221022
- React
@@ -1244,7 +1244,7 @@ PODS:
12441244
- glog
12451245
- RCT-Folly (= 2022.05.16.00)
12461246
- React-Core
1247-
- RNSVG (14.1.0):
1247+
- RNSVG (15.8.0):
12481248
- React-Core
12491249
- SocketRocket (0.6.1)
12501250
- UMAppLoader (4.5.1)
@@ -1631,7 +1631,7 @@ SPEC CHECKSUMS:
16311631
react-native-netinfo: 3aa5637c18834966e0c932de8ae1ae56fea20a97
16321632
react-native-pager-view: d5f3adb58a4e6e0d200055e9a4afdcda9b9022ce
16331633
react-native-safe-area-context: 0ee144a6170530ccc37a0fd9388e28d06f516a89
1634-
react-native-skia: a3e5199852a723258bb3c7acaaaed1b36dc5dde2
1634+
react-native-skia: a50c7fffb96edf98d842a31b77bc530a5fcda58b
16351635
react-native-slider: 33b8d190b59d4f67a541061bb91775d53d617d9d
16361636
react-native-splash-screen: 4312f786b13a81b5169ef346d76d33bc0c6dc457
16371637
react-native-webview: ff06d1fe175ff827882ec88b696a7efcafa7e98d
@@ -1664,7 +1664,7 @@ SPEC CHECKSUMS:
16641664
RNGestureHandler: 15c6ef51acba34c49ff03003806cf5dd6098f383
16651665
RNReanimated: 51ba6c9ecdde77caf364c7e5ae59a089c7dd98b3
16661666
RNScreens: 17e2f657f1b09a71ec3c821368a04acbb7ebcb46
1667-
RNSVG: ba3e7232f45e34b7b47e74472386cf4e1a676d0a
1667+
RNSVG: 8b1a777d54096b8c2a0fd38fc9d5a454332bbb4d
16681668
SocketRocket: f32cd54efbe0f095c4d7594881e52619cfe80b17
16691669
UMAppLoader: 79d3ee6aa2447a1fe2e8b0d07acf2de106e55b58
16701670
Yoga: 66a97477b94264cc4e49990c8fe6b153260d871d

‎package.json‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@
5454
"@react-native-masked-view/masked-view": "~0.3.1",
5555
"@react-native-picker/picker": "2.6.1",
5656
"@shopify/flash-list": "^1.3.1",
57-
"@shopify/react-native-skia": "0.1.222",
57+
"@shopify/react-native-skia": "^1.5.1",
5858
"@tarojs/components": "4.0.7-canary.3",
5959
"@tarojs/components-rn": "4.0.7-canary.3",
6060
"@tarojs/helper": "4.0.7-canary.3",
@@ -72,7 +72,7 @@
7272
"@tarojs/shared": "4.0.7-canary.3",
7373
"@tarojs/taro": "4.0.7-canary.3",
7474
"@tarojs/taro-rn": "4.0.7-canary.3",
75-
"@wuba/react-native-echarts": "1.2.5",
75+
"@wuba/react-native-echarts": "^2.0.0",
7676
"d3-hierarchy": "^3.1.2",
7777
"echarts": "^5.4.1",
7878
"echarts-stat": "^1.2.0",
@@ -108,7 +108,7 @@
108108
"react-native-safe-area-context": "4.8.2",
109109
"react-native-screens": "~3.29.0",
110110
"react-native-splash-screen": "^3.2.0",
111-
"react-native-svg": "14.1.0",
111+
"react-native-svg": "15.8.0",
112112
"react-native-webview": "13.6.4",
113113
"taro-lottie": "^1.0.2"
114114
},
@@ -141,5 +141,8 @@
141141
"stylelint": "^16.4.0",
142142
"typescript": "^5.1.3",
143143
"webpack": "5.69.0"
144+
},
145+
"resolutions": {
146+
"react-native-svg": "15.8.0"
144147
}
145148
}

‎src/pages/explore/charts/echarts.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ import {
4848
import { LabelLayout, UniversalTransition } from 'echarts/features';
4949
import { useEffect, useRef } from 'react';
5050
import { Dimensions } from 'react-native';
51-
import { SVGRenderer, SkiaChart as SkiaComponent, SvgChart as SvgComponent } from '@wuba/react-native-echarts';
51+
import { SVGRenderer, SkiaRenderer, SkiaChart as SkiaComponent, SvgChart as SvgComponent } from '@wuba/react-native-echarts';
5252
import { View } from '@tarojs/components';
5353

5454
import './echarts.scss';
@@ -95,6 +95,7 @@ echarts.use([
9595
LabelLayout,
9696
UniversalTransition,
9797
SVGRenderer,
98+
SkiaRenderer,
9899
LegendComponent,
99100
MarkLineComponent,
100101
MarkPointComponent,
@@ -135,7 +136,8 @@ export default function EchartsPage({ option, width = E_WIDTH, height = E_HEIGHT
135136
if (skiaRef.current) {
136137
// @ts-ignore
137138
chart = echarts.init(skiaRef.current, 'light', {
138-
renderer: 'svg',
139+
// @ts-ignore
140+
renderer: 'skia',
139141
width,
140142
height
141143
});

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

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ import {
5656
import { View } from '@tarojs/components';
5757
import { LabelLayout, UniversalTransition } from 'echarts/features';
5858
import { useEffect, useRef } from 'react';
59-
import { SVGRenderer, SkiaChart as SkiaComponent, SvgChart as SvgComponent } from '@wuba/react-native-echarts';
59+
import { SVGRenderer, SkiaRenderer, SkiaChart as SkiaComponent, SvgChart as SvgComponent } from '@wuba/react-native-echarts';
6060
import '../style.scss';
6161

6262
// 通过 ComposeOption 来组合出一个只有必须组件和图表的 Option 类型
@@ -111,6 +111,7 @@ echarts.use([
111111
LabelLayout,
112112
UniversalTransition,
113113
SVGRenderer,
114+
SkiaRenderer,
114115
LegendComponent,
115116
MarkLineComponent,
116117
MarkPointComponent,
@@ -132,13 +133,14 @@ export default function GraphForceDynamic() {
132133
const svgRef = useRef<any>(null);
133134
const skiaRef = useRef<any>(null);
134135

135-
const runChart = refObject => {
136+
const runChart = (refObject, renderer = "svg") => {
136137
let myChart;
137138
let inter;
138139
if (refObject.current) {
139140
// @ts-ignore
140141
myChart = echarts.init(refObject.current, 'light', {
141-
renderer: 'svg',
142+
// @ts-ignore
143+
renderer,
142144
width: E_WIDTH,
143145
height: E_HEIGHT
144146
});
@@ -200,7 +202,7 @@ export default function GraphForceDynamic() {
200202

201203
useEffect(() => runChart(svgRef), []);
202204

203-
useEffect(() => runChart(skiaRef), []);
205+
useEffect(() => runChart(skiaRef, 'skia'), []);
204206

205207
return (
206208
<View>

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

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ import {
5555
} from 'echarts/components';
5656
import { LabelLayout, UniversalTransition } from 'echarts/features';
5757
import { useEffect, useRef } from 'react';
58-
import { SVGRenderer, SkiaChart as SkiaComponent, SvgChart as SvgComponent } from '@wuba/react-native-echarts';
58+
import { SVGRenderer, SkiaRenderer, SkiaChart as SkiaComponent, SvgChart as SvgComponent } from '@wuba/react-native-echarts';
5959
import { Text, View } from '@tarojs/components';
6060
import '../style.scss';
6161

@@ -111,6 +111,7 @@ echarts.use([
111111
LabelLayout,
112112
UniversalTransition,
113113
SVGRenderer,
114+
SkiaRenderer,
114115
LegendComponent,
115116
MarkLineComponent,
116117
MarkPointComponent,
@@ -585,7 +586,8 @@ export default function GraphicWaveAnimation() {
585586
if (skiaRef.current) {
586587
// @ts-ignore
587588
chart = echarts.init(skiaRef.current, 'light', {
588-
renderer: 'svg',
589+
// @ts-ignore
590+
renderer: 'skia',
589591
width: E_WIDTH,
590592
height: E_HEIGHT
591593
});

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ import {
5555
} from 'echarts/components';
5656
import { LabelLayout, UniversalTransition } from 'echarts/features';
5757
import { useEffect, useRef } from 'react';
58-
import { SVGRenderer, SkiaChart as SkiaComponent, SvgChart as SvgComponent } from '@wuba/react-native-echarts';
58+
import { SVGRenderer, SkiaRenderer, SkiaChart as SkiaComponent, SvgChart as SvgComponent } from '@wuba/react-native-echarts';
5959
import { Text, View } from '@tarojs/components';
6060
import '../style.scss';
6161

@@ -111,6 +111,7 @@ echarts.use([
111111
LabelLayout,
112112
UniversalTransition,
113113
SVGRenderer,
114+
SkiaRenderer,
114115
LegendComponent,
115116
MarkLineComponent,
116117
MarkPointComponent,
@@ -234,7 +235,7 @@ export default function DatasetLink() {
234235
if (skiaRef.current) {
235236
// @ts-ignore
236237
chart = echarts.init(skiaRef.current, 'light', {
237-
renderer: 'svg',
238+
renderer: 'skia',
238239
width: E_WIDTH,
239240
height: E_HEIGHT
240241
});

‎yarn.lock‎

Lines changed: 23 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -4204,13 +4204,13 @@
42044204
recyclerlistview "4.2.1"
42054205
tslib "2.6.3"
42064206

4207-
"@shopify/react-native-skia@0.1.222":
4208-
version "0.1.222"
4209-
resolved "https://registry.yarnpkg.com/@shopify/react-native-skia/-/react-native-skia-0.1.222.tgz#2363d4eacfa790fdffe962f3e6c5adc5da39b244"
4210-
integrity sha512-3XnyCz+MyBcPznSb1n39UvXj70QaPgPfIgP0nx1+lw5daOTzAPCjuIGSB/SFnr8kptfyYc35+TCnrKXgijTUug==
4207+
"@shopify/react-native-skia@^1.5.1":
4208+
version "1.5.1"
4209+
resolved "https://registry.yarnpkg.com/@shopify/react-native-skia/-/react-native-skia-1.5.1.tgz#083aed1cf5709da2050862997ad417830284dde4"
4210+
integrity sha512-J+Di2sD7ONL8uGKLjnMQ8osHCDVBFsyg7EvhUlfbxi517Lk6sp7Dt1zTcXKs7ag8cyQKggumkuJLa7AbIRx5+g==
42114211
dependencies:
42124212
canvaskit-wasm "0.39.1"
4213-
react-reconciler "^0.27.0"
4213+
react-reconciler "0.27.0"
42144214

42154215
"@sideway/address@^4.1.5":
42164216
version "4.1.5"
@@ -5803,10 +5803,10 @@
58035803
resolved "https://registry.yarnpkg.com/@webgpu/types/-/types-0.1.21.tgz#b181202daec30d66ccd67264de23814cfd176d3a"
58045804
integrity sha512-pUrWq3V5PiSGFLeLxoGqReTZmiiXwY3jRkIG5sLLKjyqNxrwm/04b4nw7LSmGWJcKk59XOM/YRTUwOzo4MMlow==
58055805

5806-
"@wuba/react-native-echarts@1.2.5":
5807-
version "1.2.5"
5808-
resolved "https://registry.yarnpkg.com/@wuba/react-native-echarts/-/react-native-echarts-1.2.5.tgz#06cc7bbbf675fc334daaaaa0b8300b72b7530f93"
5809-
integrity sha512-5tDmLXO4n2hLmGIZSCdnkIEHTwMeW94W2VGE/Y94euFOgw1bSE551TQCAo1gmczXuErzT9SyCdZQkFn4KheQ6Q==
5806+
"@wuba/react-native-echarts@^2.0.0":
5807+
version "2.0.0"
5808+
resolved "https://registry.yarnpkg.com/@wuba/react-native-echarts/-/react-native-echarts-2.0.0.tgz#2184359b175b0b9ed25e28f6cbaa5fa347d586ed"
5809+
integrity sha512-KI98o1JLEOlm+O/kzb/OA3qqZ7Dgey6xpLrEiWGuobkJ8F96gk2/kaoi/inuORZCjt4HQvSBNMvrlZ14wwzvGQ==
58105810
dependencies:
58115811
"@xmldom/xmldom" "^0.8.6"
58125812
entities "^4.4.0"
@@ -16188,13 +16188,14 @@ react-native-svg-transformer@^1.4.0:
1618816188
"@svgr/plugin-svgo" "^8.1.0"
1618916189
path-dirname "^1.0.2"
1619016190

16191-
react-native-svg@14.1.0:
16192-
version "14.1.0"
16193-
resolved "https://registry.yarnpkg.com/react-native-svg/-/react-native-svg-14.1.0.tgz#7903bddd3c71bf3a8a503918253c839e6edaa724"
16194-
integrity sha512-HeseElmEk+AXGwFZl3h56s0LtYD9HyGdrpg8yd9QM26X+d7kjETrRQ9vCjtxuT5dCZEIQ5uggU1dQhzasnsCWA==
16191+
react-native-svg@15.8.0:
16192+
version "15.8.0"
16193+
resolved "https://registry.yarnpkg.com/react-native-svg/-/react-native-svg-15.8.0.tgz#9b5fd4f5cf5675197b3f4cbfcc77c215de2b9502"
16194+
integrity sha512-KHJzKpgOjwj1qeZzsBjxNdoIgv2zNCO9fVcoq2TEhTRsVV5DGTZ9JzUZwybd7q4giT/H3RdtqC3u44dWdO0Ffw==
1619516195
dependencies:
1619616196
css-select "^5.1.0"
1619716197
css-tree "^1.1.3"
16198+
warn-once "0.1.1"
1619816199

1619916200
[email protected]:
1620016201
version "13.6.4"
@@ -16248,6 +16249,14 @@ react-native@^0.73.1:
1624816249
ws "^6.2.2"
1624916250
yargs "^17.6.2"
1625016251

16252+
[email protected]:
16253+
version "0.27.0"
16254+
resolved "https://registry.yarnpkg.com/react-reconciler/-/react-reconciler-0.27.0.tgz#360124fdf2d76447c7491ee5f0e04503ed9acf5b"
16255+
integrity sha512-HmMDKciQjYmBRGuuhIaKA1ba/7a+UsM5FzOZsMO2JYHt9Jh8reCb7j1eDC95NOyUlKM9KRyvdx0flBuDvYSBoA==
16256+
dependencies:
16257+
loose-envify "^1.1.0"
16258+
scheduler "^0.21.0"
16259+
1625116260
[email protected]:
1625216261
version "0.29.0"
1625316262
resolved "https://registry.yarnpkg.com/react-reconciler/-/react-reconciler-0.29.0.tgz#ee769bd362915076753f3845822f2d1046603de7"
@@ -16256,14 +16265,6 @@ [email protected]:
1625616265
loose-envify "^1.1.0"
1625716266
scheduler "^0.23.0"
1625816267

16259-
react-reconciler@^0.27.0:
16260-
version "0.27.0"
16261-
resolved "https://registry.yarnpkg.com/react-reconciler/-/react-reconciler-0.27.0.tgz#360124fdf2d76447c7491ee5f0e04503ed9acf5b"
16262-
integrity sha512-HmMDKciQjYmBRGuuhIaKA1ba/7a+UsM5FzOZsMO2JYHt9Jh8reCb7j1eDC95NOyUlKM9KRyvdx0flBuDvYSBoA==
16263-
dependencies:
16264-
loose-envify "^1.1.0"
16265-
scheduler "^0.21.0"
16266-
1626716268
[email protected]:
1626816269
version "0.11.0"
1626916270
resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.11.0.tgz#77198b944733f0f1f1a90e791de4541f9f074046"
@@ -19020,7 +19021,7 @@ walker@^1.0.7:
1902019021
dependencies:
1902119022
makeerror "1.0.12"
1902219023

19023-
warn-once@^0.1.0:
19024+
warn-once@0.1.1, warn-once@^0.1.0:
1902419025
version "0.1.1"
1902519026
resolved "https://registry.yarnpkg.com/warn-once/-/warn-once-0.1.1.tgz#952088f4fb56896e73fd4e6a3767272a3fccce43"
1902619027
integrity sha512-VkQZJbO8zVImzYFteBXvBOZEl1qL175WH8VmZcxF2fZAoudNhNDvHi+doCaAEdU2l2vtcIwa2zn0QK5+I1HQ3Q==

0 commit comments

Comments
 (0)