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: {
@@ -70,22 +68,11 @@ cd example
 npm install
 npm start
 ```
+打开ios目录下的xcode工程，点击run
 
-### IOS
+运行截图：
 
-Open the xcode project in the ios directory and click run
+![image](https://github.com/somonus/react-native-echarts/blob/master/example/demo.png)
-
-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,17 +9,13 @@ import {
   AppRegistry,
   StyleSheet,
   Text,
-  View,
+  View
-  TouchableOpacity
 } from 'react-native';
 import Echarts from 'native-echarts';
 
 export default class app2 extends Component {
-  constructor(props) {
+  render() {
-    super(props);
+    const option = {
-  
-    this.state = {
-      option : {
       title: {
           text: 'ECharts 入门示例'
       },
@@ -36,44 +32,13 @@ export default class app2 extends Component {
           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() {
     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,17 +9,13 @@ import {
   AppRegistry,
   StyleSheet,
   Text,
-  View,
+  View
-  TouchableOpacity
 } from 'react-native';
 import Echarts from 'native-echarts';
 
 export default class app2 extends Component {
-  constructor(props) {
+  render() {
-    super(props);
+    const option = {
-  
-    this.state = {
-      option : {
       title: {
           text: 'ECharts 入门示例'
       },
@@ -36,44 +32,13 @@ export default class app2 extends Component {
           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() {
     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.1.0"
   },
   "jest": {
     "preset": "jest-react-native"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "native-echarts",
-  "version": "0.5.0",
+  "version": "0.1.1",
   "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,20 @@
 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
-          ref="chart"
         scrollEnabled = {false}
-          injectedJavaScript = {renderChart(this.props)}
         style={{
           height: this.props.height || 400,
-            backgroundColor: this.props.backgroundColor || 'transparent'
         }}
-          scalesPageToFit={Platform.OS !== 'ios'}
+        source={{html: renderChart(this.props.option)}}
-          originWhitelist={['*']}
-          source={source}
-          onMessage={event => this.props.onPress ? this.props.onPress(JSON.parse(event.nativeEvent.data)) : null}
       />
-      </View>
     );
   }
 }
+
+

src/components/Echarts/renderChart.js

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