README.md

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

example/index.android.js

@@ -9,71 +9,36 @@ import {
   AppRegistry,
   StyleSheet,
   Text,
-  View,
+  View
-  TouchableOpacity
 } from 'react-native';
 import Echarts from 'native-echarts';
 
 export default class app2 extends Component {
-  constructor(props) {
-    super(props);
-  
-    this.state = {
-      option : {
-        title: {
-            text: 'ECharts 入门示例'
-        },
-        tooltip: {},
-        legend: {
-            data:['销量']
-        },
-        xAxis: {
-            data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
-        },
-        yAxis: {},
-        series: [{
-            name: '销量',
-            type: 'bar',
-            data: [5, 20, 36, 10, 10, 20]
-        }]
-      },
-      text: 'test'
-    };
-  }
-
-  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() {
+    const option = {
+      title: {
+          text: 'ECharts 入门示例'
+      },
+      tooltip: {},
+      legend: {
+          data:['销量']
+      },
+      xAxis: {
+          data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
+      },
+      yAxis: {},
+      series: [{
+          name: '销量',
+          type: 'bar',
+          data: [5, 20, 36, 10, 10, 20]
+      }]
+    };
     return (
       <View style={styles.container}>
         <Text style={styles.welcome}>
           Welcome to React Native Echarts!
         </Text>
-        <TouchableOpacity style={styles.button} onPress={this.changeOption.bind(this)}>
+        <Echarts option={option} height={300} />
-          <Text style={{color: '#fff'}}>change state</Text>
-        </TouchableOpacity>
-        <Echarts option={this.state.option}  height={300} />
       </View>
     );
   }
@@ -91,12 +56,6 @@ 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,71 +9,36 @@ import {
   AppRegistry,
   StyleSheet,
   Text,
-  View,
+  View
-  TouchableOpacity
 } from 'react-native';
 import Echarts from 'native-echarts';
 
 export default class app2 extends Component {
-  constructor(props) {
-    super(props);
-  
-    this.state = {
-      option : {
-        title: {
-            text: 'ECharts 入门示例'
-        },
-        tooltip: {},
-        legend: {
-            data:['销量']
-        },
-        xAxis: {
-            data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
-        },
-        yAxis: {},
-        series: [{
-            name: '销量',
-            type: 'bar',
-            data: [5, 20, 36, 10, 10, 20]
-        }]
-      },
-      text: 'test'
-    };
-  }
-
-  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() {
+    const option = {
+      title: {
+          text: 'ECharts 入门示例'
+      },
+      tooltip: {},
+      legend: {
+          data:['销量']
+      },
+      xAxis: {
+          data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
+      },
+      yAxis: {},
+      series: [{
+          name: '销量',
+          type: 'bar',
+          data: [5, 20, 36, 10, 10, 20]
+      }]
+    };
     return (
       <View style={styles.container}>
         <Text style={styles.welcome}>
           Welcome to React Native Echarts!
         </Text>
-        <TouchableOpacity style={styles.button} onPress={this.changeOption.bind(this)}>
+        <Echarts option={option} height={300} />
-          <Text style={{color: '#fff'}}>change state</Text>
-        </TouchableOpacity>
-        <Echarts option={this.state.option}  height={300} />
       </View>
     );
   }
@@ -91,12 +56,6 @@ 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": "file:../"
+    "native-echarts": "0.2.0"
   },
   "jest": {
     "preset": "jest-react-native"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "native-echarts",
-  "version": "0.5.0",
+  "version": "0.2.0",
   "description": "echarts for react-native",
   "main": "src/index.js",
   "directories": {
@@ -15,9 +15,7 @@
   },
   "keywords": [
     "react-native",
-    "echarts",
+    "echarts"
-    "chart",
-    "charts"
   ],
   "author": "somonus",
   "license": "MIT",
@@ -26,7 +24,6 @@
   },
   "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,48 +1,21 @@
 import React, { Component } from 'react';
-import { View, StyleSheet, Platform } from 'react-native';
+import { WebView } 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 (
-      <View style={{flex: 1, height: this.props.height || 400,}}>
+      <WebView
-        <WebView
+        scrollEnabled = {false}
-          ref="chart"
+        injectedJavaScript = {renderChart(this.props)}
-          scrollEnabled = {false}
+        style={{
-          injectedJavaScript = {renderChart(this.props)}
+          height: this.props.height || 400,
-          style={{
+        }}
-            height: this.props.height || 400,
+        source={require('./tpl.html')}
-            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

@@ -2,29 +2,10 @@ import echarts from './echarts.min';
 import toString from '../../util/toString';
 
 export default function renderChart(props) {
-  const height = `${props.height || 400}px`;
+  const height = props.height || 400;
-  const width = props.width ? `${props.width}px` : 'auto';
   return `
-    document.getElementById('main').style.height = "${height}";
+    document.getElementById('main').style.height = "${height}px";
-    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,10 +1,8 @@
 <!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%;
@@ -59,5 +57,9 @@ 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,19 +1,12 @@
 import React, { Component } from 'react';
-import { View } from 'react-native';
+import { WebView, 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} ref={e => this.chart = e}/>
+        <Echarts {...this.props} />
       </Container>
     );
   }

src/util/toString.js

@@ -1,13 +1,8 @@
 export default function toString(obj) {
-  let result = JSON.stringify(obj, function(key, val) {
+  return 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;
 }