Skip to content

Commit 72f8fce

Browse files
tomLaddertomLadder
committed
expo support
1 parent 8655cf0 commit 72f8fce

File tree

16 files changed

+8727
-464
lines changed

16 files changed

+8727
-464
lines changed

‎CHANGELOG.md

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,13 @@
1+
## [1.4.0] - Monday, 20.May 2019
2+
### Fixed
3+
- Doesn't work on iOS in Expo (<a href="https://github.com/tomLadder/react-native-echarts-wrapper/issues/13" target="_blank">#13</a>)
4+
### Added
5+
- canvas & legacyMode
6+
7+
## [1.3.1] - Wednesday, 24.Apr 2019
8+
### Fixed
9+
- Doesn't work on iOS in Expo (<a href="https://github.com/tomLadder/react-native-echarts-wrapper/issues/13" target="_blank">#13</a>)
10+
111
## [1.3.0] - Thursday, 18.Apr 2019
212
### Added
313
- tests, coverage, build report

‎README.md

Lines changed: 256 additions & 206 deletions
Large diffs are not rendered by default.

‎example/echarts_example/App.js

Lines changed: 114 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,129 @@
1-
import React, { Component } from 'react';
2-
import { StyleSheet, View } from 'react-native';
3-
import { ECharts } from 'react-native-echarts-wrapper';
1+
import React, { Component } from "react";
2+
import { StyleSheet, SafeAreaView, Button } from "react-native";
3+
import { ECharts } from "react-native-echarts-wrapper";
44

55
export default class App extends Component {
6+
onRef = ref => {
7+
if (ref) {
8+
this.chart = ref;
9+
}
10+
};
11+
12+
onData = param => {};
13+
14+
initChart = () => {
15+
function randomData() {
16+
now = new Date(+now + oneDay);
17+
value = value + Math.random() * 21 - 10;
18+
return {
19+
name: now.toString(),
20+
value: [
21+
[now.getFullYear(), now.getMonth() + 1, now.getDate()].join("/"),
22+
Math.round(value)
23+
]
24+
};
25+
}
26+
27+
const data = [];
28+
var now = +new Date(1997, 9, 3);
29+
var oneDay = 24 * 3600 * 1000;
30+
var value = Math.random() * 1000;
31+
for (let i = 0; i < 1000; i++) {
32+
data.push(randomData());
33+
}
34+
635
option = {
36+
title: {
37+
text: "Dynamic Chart"
38+
},
39+
tooltip: {
40+
trigger: "axis",
41+
formatter(params) {
42+
params = params[0];
43+
const date = new Date(params.name);
44+
return `${date.getDate()}/${date.getMonth() +
45+
1}/${date.getFullYear()} : ${params.value[1]}`;
46+
},
47+
axisPointer: {
48+
animation: false
49+
}
50+
},
751
xAxis: {
8-
type: 'category',
9-
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
52+
type: "time",
53+
splitLine: {
54+
show: false
55+
}
1056
},
1157
yAxis: {
12-
type: 'value',
58+
type: "value",
59+
boundaryGap: [0, "100%"],
60+
splitLine: {
61+
show: false
62+
}
1363
},
14-
series: [{
15-
data: [820, 932, 901, 934, 1290, 1330, 1320],
16-
type: 'line',
17-
}],
64+
series: [
65+
{
66+
type: "line",
67+
showSymbol: false,
68+
hoverAnimation: false,
69+
data
70+
}
71+
]
1872
};
1973

20-
render() {
21-
return (
22-
<View style={styles.chartContainer}>
23-
<ECharts option={this.option} />
24-
</View>
25-
);
26-
}
74+
this.chart.setOption(option);
75+
76+
// no query parameter: whole option object
77+
this.chart.getOption(option => {
78+
console.log(option);
79+
});
80+
81+
// with query parameter
82+
this.chart.getOption(
83+
option => {
84+
console.log(option);
85+
},
86+
["dataZoom", "series"]
87+
);
88+
89+
const instance = this.chart;
90+
91+
setInterval(() => {
92+
for (let i = 0; i < 5; i++) {
93+
data.shift();
94+
data.push(randomData());
95+
}
96+
97+
instance.setOption({
98+
series: [
99+
{
100+
data
101+
}
102+
]
103+
});
104+
}, 100);
105+
};
106+
107+
render() {
108+
return (
109+
<SafeAreaView style={styles.chartContainer}>
110+
<Button title="Start" onPress={this.initChart} />
111+
112+
<ECharts
113+
onLoadEnd={() => alert("finished loading")}
114+
option={{}}
115+
ref={this.onRef}
116+
additionalCode={this.additionalCode}
117+
onData={this.onData}
118+
/>
119+
</SafeAreaView>
120+
);
121+
}
27122
}
28123

29124
const styles = StyleSheet.create({
30125
chartContainer: {
31126
flex: 1,
32-
},
127+
backgroundColor: "#F5FCFF"
128+
}
33129
});

‎example/echarts_expo/.gitignore

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
node_modules/**/*
2+
.expo/*
3+
npm-debug.*
4+
*.jks
5+
*.p12
6+
*.key
7+
*.mobileprovision

‎example/echarts_expo/.watchmanconfig

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
{}

‎example/echarts_expo/App.js

Lines changed: 131 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
import React, { Component } from 'react';
2+
import { StyleSheet, SafeAreaView, Button } from 'react-native';
3+
import { ECharts } from 'react-native-echarts-wrapper';
4+
5+
export default class App extends Component {
6+
onRef = (ref) => {
7+
if (ref) {
8+
this.chart = ref;
9+
}
10+
};
11+
12+
onData = (param) => {};
13+
14+
initChart = () => {
15+
function randomData() {
16+
now = new Date(+now + oneDay);
17+
value = value + Math.random() * 21 - 10;
18+
return {
19+
name: now.toString(),
20+
value: [
21+
[now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'),
22+
Math.round(value),
23+
],
24+
};
25+
}
26+
27+
const data = [];
28+
var now = +new Date(1997, 9, 3);
29+
var oneDay = 24 * 3600 * 1000;
30+
var value = Math.random() * 1000;
31+
for (let i = 0; i < 1000; i++) {
32+
data.push(randomData());
33+
}
34+
35+
option = {
36+
title: {
37+
text: 'Dynamic Chart',
38+
},
39+
tooltip: {
40+
trigger: 'axis',
41+
formatter(params) {
42+
params = params[0];
43+
const date = new Date(params.name);
44+
return `${date.getDate()}/${date.getMonth()
45+
+ 1}/${date.getFullYear()} : ${params.value[1]}`;
46+
},
47+
axisPointer: {
48+
animation: false,
49+
},
50+
},
51+
xAxis: {
52+
type: 'time',
53+
splitLine: {
54+
show: false,
55+
},
56+
},
57+
yAxis: {
58+
type: 'value',
59+
boundaryGap: [0, '100%'],
60+
splitLine: {
61+
show: false,
62+
},
63+
},
64+
series: [
65+
{
66+
type: 'line',
67+
showSymbol: false,
68+
hoverAnimation: false,
69+
data,
70+
},
71+
],
72+
};
73+
74+
this.chart.setOption(option);
75+
76+
// no query parameter: whole option object
77+
this.chart.getOption((option) => {
78+
console.log(option);
79+
});
80+
81+
// with query parameter
82+
this.chart.getOption(
83+
(option) => {
84+
console.log(option);
85+
},
86+
['dataZoom', 'series'],
87+
);
88+
89+
const instance = this.chart;
90+
91+
setInterval(() => {
92+
for (let i = 0; i < 5; i++) {
93+
data.shift();
94+
data.push(randomData());
95+
}
96+
97+
instance.setOption({
98+
series: [
99+
{
100+
data,
101+
},
102+
],
103+
});
104+
}, 100);
105+
};
106+
107+
render() {
108+
return (
109+
<SafeAreaView style={styles.chartContainer}>
110+
<Button title="Start" onPress={this.initChart} />
111+
112+
<ECharts
113+
onLoadEnd={() => alert('finished loading')}
114+
legacyMode
115+
option={{}}
116+
ref={this.onRef}
117+
additionalCode={this.additionalCode}
118+
onData={this.onData}
119+
canvas
120+
/>
121+
</SafeAreaView>
122+
);
123+
}
124+
}
125+
126+
const styles = StyleSheet.create({
127+
chartContainer: {
128+
flex: 1,
129+
backgroundColor: '#F5FCFF',
130+
},
131+
});

‎example/echarts_expo/app.json

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
{
2+
"expo": {
3+
"name": "Chart",
4+
"slug": "echarts_expo",
5+
"privacy": "public",
6+
"sdkVersion": "32.0.0",
7+
"platforms": [
8+
"ios",
9+
"android"
10+
],
11+
"version": "1.0.0",
12+
"orientation": "portrait",
13+
"icon": "./assets/icon.png",
14+
"splash": {
15+
"image": "./assets/splash.png",
16+
"resizeMode": "contain",
17+
"backgroundColor": "#ffffff"
18+
},
19+
"updates": {
20+
"fallbackToCacheTimeout": 0
21+
},
22+
"assetBundlePatterns": [
23+
"**/*"
24+
],
25+
"ios": {
26+
"supportsTablet": true
27+
}
28+
}
29+
}

‎example/echarts_expo/assets/icon.png

2.91 KB
Loading

‎example/echarts_expo/assets/splash.png

7.01 KB
Loading

‎example/echarts_expo/babel.config.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
module.exports = function(api) {
2+
api.cache(true);
3+
return {
4+
presets: ['babel-preset-expo'],
5+
};
6+
};

0 commit comments

Comments
 (0)