release 0.1.0

README.md

@@ -0,0 +1,75 @@
+# native-echarts
+
+## install
+
+$ npm install native-echarts --save
+
+## Usage
+
+###用法
+
+用法完全和echarts一致，将echarts的option传给组件。option详细属性详见[文档](http://echarts.baidu.com/option.html#title)
+
+native-echarts共暴露了三个属性:
+
+* *option* (object): echarts图表的配置项，无默认值。 
+* *width* (number): 图表的宽度，默认值为其外层容器的宽度。 
+* *height* (number): 图表的高度，默认值为400。 
+
+
+```js
+import React, { Component } from 'react';
+import {
+  AppRegistry,
+  StyleSheet,
+  Text,
+  View
+} from 'react-native';
+import Echarts from 'native-echarts';
+
+export default class app extends Component {
+  render() {
+    const option = {
+      title: {
+          text: 'ECharts 入门示例'
+      },
+      tooltip: {},
+      legend: {
+          data:['销量']
+      },
+      xAxis: {
+          data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
+      },
+      yAxis: {},
+      series: [{
+          name: '销量',
+          type: 'bar',
+          data: [5, 20, 36, 10, 10, 20]
+      }]
+    };
+    return (
+      <Echarts option={option} height={300} />
+    );
+  }
+}
+
+AppRegistry.registerComponent('app', () => app);
+
+```
+
+
+
+##Example
+
+*run demo*
+
+```
+cd example
+npm install
+npm start
+```
+打开ios目录下的xcode工程，点击run
+
+## License
+
+native-echarts is released under the MIT license.

example/index.android.js

@@ -11,21 +11,34 @@ import {
   Text,
   View
 } from 'react-native';
+import Echarts from 'native-echarts';
 
 export default class app2 extends Component {
   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!
+          Welcome to React Native Echarts!
-        </Text>
-        <Text style={styles.instructions}>
-          To get started, edit index.android.js
-        </Text>
-        <Text style={styles.instructions}>
-          Double tap R on your keyboard to reload,{'\n'}
-          Shake or press menu button for dev menu
         </Text>
+        <Echarts option={option} height={300} />
       </View>
     );
   }
@@ -41,12 +54,7 @@ const styles = StyleSheet.create({
   welcome: {
     fontSize: 20,
     textAlign: 'center',
-    margin: 10,
+    margin: 30,
-  },
-  instructions: {
-    textAlign: 'center',
-    color: '#333333',
-    marginBottom: 5,
   },
 });
 

example/index.ios.js

@@ -11,16 +11,34 @@ import {
   Text,
   View
 } from 'react-native';
-import Echarts from './src';
+import Echarts from 'native-echarts';
 
 export default class app2 extends Component {
   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!
+          Welcome to React Native Echarts!
         </Text>
-        <Echarts />
+        <Echarts option={option} height={300} />
       </View>
     );
   }
@@ -36,12 +54,7 @@ const styles = StyleSheet.create({
   welcome: {
     fontSize: 20,
     textAlign: 'center',
-    margin: 10,
+    margin: 30,
-  },
-  instructions: {
-    textAlign: 'center',
-    color: '#333333',
-    marginBottom: 5,
   },
 });
 

example/package.json

@@ -8,7 +8,8 @@
   },
   "dependencies": {
     "react": "15.3.2",
-    "react-native": "0.35.0"
+    "react-native": "0.35.0",
+    "native-echarts": "0.1.0"
   },
   "jest": {
     "preset": "jest-react-native"

example/src/components/Echarts/tpl.js

@@ -1,31 +0,0 @@
-import echarts from './echarts.min';
-console.log(echarts)
-export default `
-<!DOCTYPE html>\n
-<html>
-  <head>
-    <title>Hello Static World</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>
-      alert(1)
-      ${echarts}
-    </script>
-  </head>
-  
-  <body>
-    <div id="main" ></div>
-  <body>
-<html>
-`

example/src/index.js

@@ -1,13 +0,0 @@
-import React, { Component } from 'react';
-import { WebView, View } from 'react-native';
-import { Container, Echarts } from './components'
-
-export default class App extends Component {
-  render() {
-    return (
-      <Container width={this.props.width}>
-        <Echarts {...this.props} />
-      </Container>
-    );
-  }
-}

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "rn-echarts",
+  "name": "native-echarts",
   "version": "0.1.0",
   "description": "echarts for react-native",
   "main": "src/index.js",

src/components/Echarts/index.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import { WebView } from 'react-native';
-import tpl from './tpl';
+import renderChart from './renderChart';
 import echarts from './echarts.min';
 
 export default class App extends Component {
@@ -10,7 +10,7 @@ export default class App extends Component {
         style={{
           height: this.props.height || 400,
         }}
-        source={{html: tpl}}
+        source={{html: renderChart(this.props.option)}}
       />
     );
   }

src/components/Echarts/renderChart.js

@@ -0,0 +1,38 @@
+import echarts from './echarts.min';
+
+export default function renderChart(option) {
+  return `
+    <!DOCTYPE html>\n
+    <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(${JSON.stringify(option)});
+        </script>
+      <body>
+    <html>
+    `
+}

src/index.js

@@ -1,12 +1,13 @@
 import React, { Component } from 'react';
-import { View, WebView } from 'react-native';
+import { WebView, View } from 'react-native';
+import { Container, Echarts } from './components'
 
 export default class App extends Component {
   render() {
     return (
-        <WebView
+      <Container width={this.props.width}>
-          source = {{html: `<div>test</div>`}}
+        <Echarts {...this.props} />
-        />
+      </Container>
     );
   }
 }