lvwang2002
/
react-native-echarts
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge 042b96aad4 into 0ae9a6386c

This commit is contained in:
superscore 2019-10-11 15:25:03 +08:00 committed by GitHub
parent 0ae9a6386c 042b96aad4
commit 8421c2239e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 56 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "native-echarts", "name": "native-echarts",
"version": "0.5.0", "version": "0.7.0",
"description": "echarts for react-native", "description": "echarts for react-native",
"main": "src/index.js", "main": "src/index.js",
"directories": { "directories": {

45
src/components/Echarts/index.js
View File

@ -1,7 +1,9 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import { WebView, View, StyleSheet, Platform } from 'react-native'; import { View, StyleSheet, Platform } from 'react-native';
import renderChart from './renderChart'; import renderChart from './renderChart';
import echarts from './echarts.min'; import echarts from './echarts.min';
import WebView from "react-native-webview";
import getTpl from "./tpl" ;
export default class App extends Component { export default class App extends Component {
@ -9,13 +11,21 @@ export default class App extends Component {
super(props); super(props);
this.setNewOption = this.setNewOption.bind(this); this.setNewOption = this.setNewOption.bind(this);
} }
componentWillReceiveProps(nextProps) { componentWillReceiveProps(nextProps) {
if(nextProps.option !== this.props.option) { if(nextProps.option !== this.props.option) {
this.refs.chart.reload(); // this.refs.chart.reload();
if(Platform.OS === 'android'){
this.refs.chart.reload();
}else {
this.setNewOption(nextProps.option) ;
}
} }
} }
shouldComponentUpdate() {
return false ;
}
setNewOption(option) { setNewOption(option) {
this.refs.chart.postMessage(JSON.stringify(option)); this.refs.chart.postMessage(JSON.stringify(option));
@ -23,21 +33,20 @@ export default class App extends Component {
render() { render() {
return ( return (
<View style={{flex: 1, height: this.props.height || 400,}}> <View style={{flex: 1, height: this.props.height || 400,}}>
<WebView <WebView
ref="chart" ref="chart"
scrollEnabled = {false} scrollEnabled = {false}
injectedJavaScript = {renderChart(this.props)} injectedJavaScript = {renderChart(this.props)}
style={{ style={{
height: this.props.height || 400, height: this.props.height || 400,
backgroundColor: this.props.backgroundColor || 'transparent' backgroundColor: this.props.backgroundColor || 'transparent'
}} }}
scalesPageToFit={Platform.OS !== 'ios'} originWhitelist={['*']}
originWhitelist={['*']} source={Platform.OS === "ios"?{ html:getTpl() }:{uri:'file:///android_asset/tpl.html'}}
source={require('./tpl.html')} onMessage={event => this.props.onPress ? this.props.onPress(JSON.parse(event.nativeEvent.data)) : null}
onMessage={event => this.props.onPress ? this.props.onPress(JSON.parse(event.nativeEvent.data)) : null} />
/> </View>
</View>
); );
} }
} }

63
src/components/Echarts/tpl.html
View File

File diff suppressed because one or more lines are too long

28
src/components/Echarts/tpl.js Normal file
View File

@ -0,0 +1,28 @@
export default ()=>`<!DOCTYPE html>
<html>
<head>
<link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon">
<title>echarts</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<style type="text/css">
html,body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
// overflow: hidden;
}
#main {
height: 100%;
}
</style>
<script src="https://cdn.bootcss.com/echarts/4.2.1/echarts.min.js"></script>
</head>
<body>
<div id="main" ></div>
<body>
<html>
` ;