更新 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: {
@@ -68,11 +70,22 @@ cd example
 npm install
 npm start
 ```
-打开ios目录下的xcode工程，点击run
 
-运行截图：
+### IOS
 
-![image](https://github.com/somonus/react-native-echarts/blob/master/example/demo.png)
+Open the xcode project in the ios directory and click run
+
+screenshots：
+
+![image](https://github.com/somonus/react-native-echarts/blob/master/example/demoIOS.png)
+
+### Android
+
+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);

example/index.ios.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);

example/package.json

@@ -9,7 +9,7 @@
   "dependencies": {
     "react": "15.3.2",
     "react-native": "0.35.0",
-    "native-echarts": "0.1.0"
+    "native-echarts": "file:../"
   },
   "jest": {
     "preset": "jest-react-native"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "native-echarts",
-  "version": "0.1.1",
+  "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,20 +1,48 @@
 import React, { Component } from 'react';
-import { WebView } 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 {
+
+  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 (
-      <WebView
+      <View style={{flex: 1, height: this.props.height || 400,}}>
-        scrollEnabled = {false}
+        <WebView
-        style={{
+          ref="chart"
-          height: this.props.height || 400,
+          scrollEnabled = {false}
-        }}
+          injectedJavaScript = {renderChart(this.props)}
-        source={{html: renderChart(this.props.option)}}
+          style={{
-      />
+            height: this.props.height || 400,
+            backgroundColor: this.props.backgroundColor || 'transparent'
+          }}
+          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

@@ -1,38 +1,30 @@
 import echarts from './echarts.min';
+import toString from '../../util/toString';
 
-export default function renderChart(option) {
+export default function renderChart(props) {
+  const height = `${props.height || 400}px`;
+  const width = props.width ? `${props.width}px` : 'auto';
   return `
-    <!DOCTYPE html>\n
+    document.getElementById('main').style.height = "${height}";
-    <html>
+    document.getElementById('main').style.width = "${width}";
-      <head>
+    var myChart = echarts.init(document.getElementById('main'));
-        <title>echarts</title>
+    myChart.setOption(${toString(props.option)});
-        <meta http-equiv="content-type" content="text/html; charset=utf-8">
+    window.document.addEventListener('message', function(e) {
-        <style type="text/css">
+      var option = JSON.parse(e.data);
-          html,body {
+      myChart.setOption(option);
-            height: 100%;
+    });
-            width: 100%;
+    myChart.on('click', function(params) {
-            margin: 0;
+      var seen = [];
-            padding: 0;
+      var paramsString = JSON.stringify(params, function(key, val) {
-            overflow: hidden;
+        if (val != null && typeof val == "object") {
+          if (seen.indexOf(val) >= 0) {
+            return;
           }
-          #main {
+          seen.push(val);
-            height: 100%;
+        }
-          }
+        return val;
-        </style>
+      });
-        <script>
+      window.postMessage(paramsString);
-          ${echarts}
+    });
-        </script>
+  `
-      </head>
-      
-      <body>
-        <div id="main" ></div>
-        <script>
-          // 基于准备好的dom，初始化echarts实例
-            var myChart = echarts.init(document.getElementById('main'));
-            // 使用刚指定的配置项和数据显示图表。
-            myChart.setOption(${JSON.stringify(option)});
-        </script>
-      <body>
-    <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

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