更新 src/components/Echarts/index.js

@bugfix, Webview does not show in the release version

README.md

@@ -1,20 +1,22 @@
 # native-echarts
 
+[![NPM Version](https://img.shields.io/npm/v/native-echarts.svg?style=flat)](https://www.npmjs.org/package/native-echarts)
+  [![npm](https://img.shields.io/npm/dm/native-echarts.svg?style=flat)](https://www.npmjs.org/package/native-echarts)
+  [![License](http://img.shields.io/npm/l/native-echarts.svg?style=flat)](https://raw.githubusercontent.com/somonus/react-native-echarts/master/LICENSE.md)
+  
 ## install
 
 $ npm install native-echarts --save
 
 ## Usage
 
-###用法
+The Usage is complete consistent with Echarts
 
-用法完全和echarts一致，将echarts的option传给组件。option详细属性详见[文档](http://echarts.baidu.com/option.html#title)
+component props:
 
-native-echarts共暴露了三个属性:
+* *option* (object): The option for echarts: [Documentation](http://echarts.baidu.com/option.html#title)。 
-
+* *width* (number): The width of the chart. The default value is the outer container width. 
-* *option* (object): echarts图表的配置项，无默认值。 
+* *height* (number): The height of the chart. The default value is 400. 
-* *width* (number): 图表的宽度，默认值为其外层容器的宽度。 
-* *height* (number): 图表的高度，默认值为400。 
 
 
 ```js
@@ -31,7 +33,7 @@ export default class app extends Component {
   render() {
     const option = {
       title: {
-          text: 'ECharts 入门示例'
+          text: 'ECharts demo'
       },
       tooltip: {},
       legend: {
@@ -71,15 +73,19 @@ npm start
 
 ### IOS
 
-打开ios目录下的xcode工程，点击run
+Open the xcode project in the ios directory and click run
 
-运行截图：
+screenshots：
 
-![image](https://github.com/somonus/react-native-echarts/blob/master/example/demo.png)
+![image](https://github.com/somonus/react-native-echarts/blob/master/example/demoIOS.png)
 
 ### Android
 
-使用Android studio打开Android目录，点击run
+Open the Android project in the android directory with Android Studio and click run.
+
+screenshots：
+
+![image](https://github.com/somonus/react-native-echarts/blob/master/example/demoAndroid.png)
 
 ## License
 

example/index.android.js

@@ -9,36 +9,71 @@ import {
   AppRegistry,
   StyleSheet,
   Text,
-  View
+  View,
+  TouchableOpacity
 } from 'react-native';
 import Echarts from 'native-echarts';
 
 export default class app2 extends Component {
-  render() {
+  constructor(props) {
-    const option = {
+    super(props);
-      title: {
+  
-          text: 'ECharts 入门示例'
+    this.state = {
+      option : {
+        title: {
+            text: 'ECharts 入门示例'
+        },
+        tooltip: {},
+        legend: {
+            data:['销量']
+        },
+        xAxis: {
+            data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
+        },
+        yAxis: {},
+        series: [{
+            name: '销量',
+            type: 'bar',
+            data: [5, 20, 36, 10, 10, 20]
+        }]
       },
-      tooltip: {},
+      text: 'test'
-      legend: {
-          data:['销量']
-      },
-      xAxis: {
-          data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
-      },
-      yAxis: {},
-      series: [{
-          name: '销量',
-          type: 'bar',
-          data: [5, 20, 36, 10, 10, 20]
-      }]
     };
+  }
+
+  changeOption() {
+    this.setState({
+      option: {
+        title: {
+            text: 'New Chart'
+        },
+        tooltip: {},
+        legend: {
+            data:['销量']
+        },
+        xAxis: {
+            data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
+        },
+        yAxis: {},
+        series: [{
+            name: '销量',
+            type: 'line',
+            data: [5, 20, 36, 10, 10, 20]
+        }]
+      }
+    })
+  }
+
+  render() {
     return (
       <View style={styles.container}>
         <Text style={styles.welcome}>
           Welcome to React Native Echarts!
         </Text>
-        <Echarts option={option} height={300} />
+        <TouchableOpacity style={styles.button} onPress={this.changeOption.bind(this)}>
+          <Text style={{color: '#fff'}}>change state</Text>
+        </TouchableOpacity>
+        <Echarts option={this.state.option}  height={300} />
       </View>
     );
   }
@@ -56,6 +91,12 @@ const styles = StyleSheet.create({
     textAlign: 'center',
     margin: 30,
   },
+  button: {
+    backgroundColor: '#d9534f',
+    padding: 8,
+    borderRadius: 4,
+    marginBottom: 20
+  }
 });
 
 AppRegistry.registerComponent('app2', () => app2);

package.json

@@ -1,6 +1,6 @@
 {
   "name": "native-echarts",
-  "version": "0.2.0",
+  "version": "0.5.0",
   "description": "echarts for react-native",
   "main": "src/index.js",
   "directories": {
@@ -15,7 +15,9 @@
   },
   "keywords": [
     "react-native",
-    "echarts"
+    "echarts",
+    "chart",
+    "charts"
   ],
   "author": "somonus",
   "license": "MIT",
@@ -24,6 +26,7 @@
   },
   "homepage": "https://github.com/somonus/react-native-echarts#readme",
   "dependencies": {
-    "echarts": "3.2.3"
+    "echarts": "3.2.3",
+    "react-native-webview":"13.8.7"
   }
 }

src/components/Echarts/index.js

@@ -1,16 +1,32 @@
 import React, { Component } from 'react';
-import { WebView, View, StyleSheet } from 'react-native';
+import { View, StyleSheet, Platform } from 'react-native';
+import WebView from 'react-native-webview';
 import renderChart from './renderChart';
 import echarts from './echarts.min';
 
 export default class App extends Component {
-  componentWillReceiveProps(nextProps) {
+
+  constructor(props) {
+    super(props);
+    this.setNewOption = this.setNewOption.bind(this);
+  }
+  
+
+  UNSAFE_componentWillReceiveProps(nextProps) {
     if(nextProps.option !== this.props.option) {
       this.refs.chart.reload();
     }
   }
 
+  setNewOption(option) {
+    this.refs.chart.postMessage(JSON.stringify(option));
+  }
+
   render() {
+    const source = Platform.OS === 'ios'
+      ? require('./tpl.html')  // iOS使用require方式加载
+      : { uri: 'file:///android_asset/tpl.html' };  // Android从assets目录加载
+
     return (
       <View style={{flex: 1, height: this.props.height || 400,}}>
         <WebView
@@ -19,8 +35,12 @@ export default class App extends Component {
           injectedJavaScript = {renderChart(this.props)}
           style={{
             height: this.props.height || 400,
+            backgroundColor: this.props.backgroundColor || 'transparent'
           }}
-          source={require('./tpl.html')}
+          scalesPageToFit={Platform.OS !== 'ios'}
+          originWhitelist={['*']}
+          source={source}
+          onMessage={event => this.props.onPress ? this.props.onPress(JSON.parse(event.nativeEvent.data)) : null}
         />
       </View>
     );

src/components/Echarts/renderChart.js

@@ -2,10 +2,29 @@ import echarts from './echarts.min';
 import toString from '../../util/toString';
 
 export default function renderChart(props) {
-  const height = props.height || 400;
+  const height = `${props.height || 400}px`;
+  const width = props.width ? `${props.width}px` : 'auto';
   return `
-    document.getElementById('main').style.height = "${height}px";
+    document.getElementById('main').style.height = "${height}";
+    document.getElementById('main').style.width = "${width}";
     var myChart = echarts.init(document.getElementById('main'));
     myChart.setOption(${toString(props.option)});
+    window.document.addEventListener('message', function(e) {
+      var option = JSON.parse(e.data);
+      myChart.setOption(option);
+    });
+    myChart.on('click', function(params) {
+      var seen = [];
+      var paramsString = JSON.stringify(params, function(key, val) {
+        if (val != null && typeof val == "object") {
+          if (seen.indexOf(val) >= 0) {
+            return;
+          }
+          seen.push(val);
+        }
+        return val;
+      });
+      window.postMessage(paramsString);
+    });
   `
 }

src/components/Echarts/tpl.html

@@ -1,8 +1,10 @@
 <!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%;
@@ -57,9 +59,5 @@ var a=e.getData();r.each(n,function(t){t.scale.unionExtent(a.getDataExtent(t.dim
   
   <body>
     <div id="main" ></div>
-    <script>
-      // 基于准备好的dom，初始化echarts实例
-      
-    </script>
   <body>
-<html>
+<html>

src/index.js

@@ -1,12 +1,19 @@
 import React, { Component } from 'react';
-import { WebView, View } from 'react-native';
+import { View } from 'react-native';
+import WebView from 'react-native-webview';
+
 import { Container, Echarts } from './components'
 
 export default class App extends Component {
+
+  setNewOption(option) {
+    this.chart.setNewOption(option);
+  }
+
   render() {
     return (
       <Container width={this.props.width}>
-        <Echarts {...this.props} />
+        <Echarts {...this.props} ref={e => this.chart = e}/>
       </Container>
     );
   }

src/util/toString.js

@@ -1,8 +1,13 @@
 export default function toString(obj) {
-  return JSON.stringify(obj, function(key, val) {
+  let result = JSON.stringify(obj, function(key, val) {
-    if (typeof val === 'function') {
+        if (typeof val === 'function') {
-      return `~--demo--~${val}~--demo--~`;
+            return `~--demo--~${val}~--demo--~`;
-    }
+        }
-    return val;
+        return val;
-  }).replace('\"~--demo--~', '').replace('~--demo--~\"', '').replace(/\\n/g, '');
+    });
+
+    do {
+        result = result.replace('\"~--demo--~', '').replace('~--demo--~\"', '').replace(/\\n/g, '').replace(/\\\"/g,"\"");//最后一个replace将release模式中莫名生成的\"转换成"
+    } while (result.indexOf('~--demo--~') >= 0);
+    return result;
 }