forked from womkim/react-native-web-echarts
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.js
69 lines (63 loc) · 2.05 KB
/
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
/**
* Created by womkim on 2017/11/6.
*/
import React from 'react'
import PropTypes from 'prop-types'
import { View, WebView, Platform } from 'react-native'
const renderChart = ({ height, option }) => `
var main = document.getElementById('main');
main.style.height = "${height}px";
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption(${JSON.stringify(option)});
`
export default class Echarts extends React.Component {
componentWillReceiveProps (nextProps) {
if (JSON.stringify(this.props.option) !== JSON.stringify(nextProps.option) || this.props.height !== nextProps.height) {
this.echart.injectJavaScript(renderChart({ height: nextProps.height, option: nextProps.option }))
}
}
render () {
const { height, width, style, option, onLoadStart, onLoad, onError, onLoadEnd, onMessage, renderLoading, renderError } = this.props
return <View style={{width, height}}>
<WebView
ref={node => { this.echart = node }}
style={[style, {height, width, backgroundColor: 'transparent'}]}
injectedJavaScript={renderChart({ height, option })}
source={__DEV__ || Platform.OS === 'ios' ? require('./tpl.html') : { uri:'file:///android_asset/tpl.html' }}
startInLoadingState={false}
javaScriptEnabled={true}
scalesPageToFit={false}
onLoadStart={onLoadStart}
onLoad={onLoad}
onError={onError}
onLoadEnd={onLoadEnd}
onMessage={onMessage}
renderLoading={renderLoading}
renderError={renderError}
/>
</View>
}
}
Echarts.propTypes = {
width: PropTypes.oneOfType([
PropTypes.number,
PropTypes.string
]),
height: PropTypes.oneOfType([
PropTypes.number,
PropTypes.string
]),
style: PropTypes.object,
option: PropTypes.object.isRequired,
onLoadStart: PropTypes.func,
onLoad: PropTypes.func,
onError: PropTypes.func,
onLoadEnd: PropTypes.func,
onMessage: PropTypes.func,
renderLoading: PropTypes.func,
renderError: PropTypes.func
}
Echarts.defaultProps = {
width: '100%',
height: 300
}