v1.0.1

.babelrc

@@ -0,0 +1,7 @@
+{
+  "presets": ["react", "es2015"],
+  "env": {
+    "development": {
+    }
+  }
+}

.eslintrc

@@ -0,0 +1,27 @@
+{
+  "ecmaFeatures": {
+    "jsx": true,
+    "modules": true
+  },
+  "env": {
+    "browser": true,
+    "node": true
+  },
+  "parser": "babel-eslint",
+  "rules": {
+    "quotes": [2, "single"],
+    "strict": [2, "never"],
+    "babel/generator-star-spacing": 1,
+    "babel/new-cap": 1,
+    "babel/object-shorthand": 1,
+    "babel/arrow-parens": 1,
+    "babel/no-await-in-loop": 1,
+    "react/jsx-uses-react": 2,
+    "react/jsx-uses-vars": 2,
+    "react/react-in-jsx-scope": 2
+  },
+  "plugins": [
+    "babel",
+    "react"
+  ]
+}

.gitignore

@@ -0,0 +1,2 @@
+node_modules/
+npm-debug.*

LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) hustcc
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,81 @@
+# echart-for-react
+
+A very simple echarts(v3.0) wrapper for react.
+
+[![npm](https://img.shields.io/npm/v/echarts-for-react.svg?style=flat-square)](https://www.npmjs.com/package/echarts-for-react) [![npm](https://img.shields.io/npm/dt/echarts-for-react.svg?style=flat-square)](https://www.npmjs.com/package/echarts-for-react) [![npm](https://img.shields.io/npm/l/echarts-for-react.svg?style=flat-square)](https://www.npmjs.com/package/echarts-for-react)
+
+# install
+
+```
+npm install echart-for-react
+```
+
+How to run the demo:
+
+```
+git clone git@github.com:hustcc/echarts-for-react.git
+
+npm install
+
+npm start
+```
+
+then open [http://127.0.0.1:8080/](http://127.0.0.1:8080/) in your browser. or see [http://hustcc.github.io/echarts-for-react/](http://hustcc.github.io/echarts-for-react/)
+
+
+# usage
+
+Simple demo code: more can see: [http://hustcc.github.io/echarts-for-react/](http://hustcc.github.io/echarts-for-react/)
+
+```js
+import React from 'react';
+import ReactEcharts from '../src/echarts-for-react';
+
+<ReactEcharts
+    option={this.getOtion()} 
+    height={300} 
+    onEvents={onEvents} />
+```
+
+
+# component props
+
+ - **`option`** 
+
+the echart option config, can see [http://echarts.baidu.com/option.html#title](http://echarts.baidu.com/option.html#title).
+
+ - **`height`**
+
+the `height` of echart. number, with `px` as it's unit.
+
+ - **`onChartReady`**
+
+when chart is ready, will callback the function with the echart object as it's paramter.
+
+ - **`onEvents`**
+
+binding the echarts event, will callback the function with the echart event parameter, and `the echart object`. e.g: 
+
+```js
+let onEvents = {
+    'click': this.onChartClick,
+    'legendselectchanged': this.onChartLegendselectchanged
+}
+...
+<ReactEcharts
+    option={this.getOtion()} 
+    height={300} 
+    onEvents={onEvents} />
+```
+for more event name, see: [http://echarts.baidu.com/api.html#events](http://echarts.baidu.com/api.html#events)
+
+
+# TODO
+
+1. theme props
+2. echart API
+
+
+# LICENSE
+
+MIT

demo/ChartWithEventComponent.jsx

@@ -0,0 +1,93 @@
+import React from 'react';
+import ReactEcharts from '../src/echarts-for-react';
+
+const ChartWithEventComponent = React.createClass({
+    propTypes: {
+    },
+    getOtion: function() {
+        const option = {
+            title : {
+                text: '某站点用户访问来源',
+                subtext: '纯属虚构',
+                x:'center'
+            },
+            tooltip : {
+                trigger: 'item',
+                formatter: "{a} <br/>{b} : {c} ({d}%)"
+            },
+            legend: {
+                orient: 'vertical',
+                left: 'left',
+                data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
+            },
+            series : [
+                {
+                    name: '访问来源',
+                    type: 'pie',
+                    radius : '55%',
+                    center: ['50%', '60%'],
+                    data:[
+                        {value:335, name:'直接访问'},
+                        {value:310, name:'邮件营销'},
+                        {value:234, name:'联盟广告'},
+                        {value:135, name:'视频广告'},
+                        {value:1548, name:'搜索引擎'}
+                    ],
+                    itemStyle: {
+                        emphasis: {
+                            shadowBlur: 10,
+                            shadowOffsetX: 0,
+                            shadowColor: 'rgba(0, 0, 0, 0.5)'
+                        }
+                    }
+                }
+            ]
+        };
+        return option;
+    },
+    onChartClick: function(param, echart) {
+        console.log(param, echart);
+        alert('chart click');
+    },
+    onChartLegendselectchanged: function(param, echart) {
+        console.log(param, echart);
+        alert('chart legendselectchanged');
+    },
+    onChartReady: function(echart) {
+        console.log('echart is ready', echart);
+    },
+    render: function() {
+        let onEvents = {
+            'click': this.onChartClick,
+            'legendselectchanged': this.onChartLegendselectchanged
+        };
+        let code = "let onEvents = {\n" + 
+                   "  'click': this.onChartClick,\n" +
+                   "  'legendselectchanged': this.onChartLegendselectchanged\n" +
+                   "}\n\n" +
+                   "<ReactEcharts \n" +
+                    "    option={this.getOtion()} \n" +
+                    "    height={300} \n" +
+                    "    onChartReady={this.onChartReady} \n" +
+                    "    onEvents={onEvents} />";
+
+        return (
+            <div className='examples'>
+                <div className='parent'>
+                    <label> Chart With event <strong> onEvents </strong>: </label>
+                    <ReactEcharts
+                        option={this.getOtion()} 
+                        height={300} 
+                        onChartReady={this.onChartReady} 
+                        onEvents={onEvents} />
+                    <label> code below: </label>
+                    <pre>
+                        <code>{code}</code>
+                    </pre>
+                </div>
+            </div>
+        );
+    }
+});
+
+export default ChartWithEventComponent;

demo/MainPageComponent.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import SimpleChartComponent from './SimpleChartComponent.jsx';
+import ChartWithEventComponent from './ChartWithEventComponent.jsx';
+
+const MainPageComponent = React.createClass({
+    propTypes: {
+    },
+    render: function() {
+        return (
+            <div>
+                <h1> echarts-for-react </h1>
+                <h3> A very simple echarts(v3.0) wrapper for react. </h3>
+                <SimpleChartComponent />
+                <ChartWithEventComponent />
+                {false ?
+                    <h3>Get it on GitHub! <a href='https://github.com/hustcc/echarts-for-react'>hustcc/echarts-for-react</a></h3>
+                    :
+                    <div />
+                }
+            </div>
+        );
+    }
+});
+
+export default MainPageComponent;

demo/SimpleChartComponent.jsx

@@ -0,0 +1,86 @@
+import React from 'react';
+import ReactEcharts from '../src/echarts-for-react';
+
+const SimpleChartComponent = React.createClass({
+    propTypes: {
+    },
+    getOtion: function() {
+        const option = {
+            title: {
+                text: '堆叠区域图'
+            },
+            tooltip : {
+                trigger: 'axis'
+            },
+            legend: {
+                data:['邮件营销','联盟广告','视频广告']
+            },
+            toolbox: {
+                feature: {
+                    saveAsImage: {}
+                }
+            },
+            grid: {
+                left: '3%',
+                right: '4%',
+                bottom: '3%',
+                containLabel: true
+            },
+            xAxis : [
+                {
+                    type : 'category',
+                    boundaryGap : false,
+                    data : ['周一','周二','周三','周四','周五','周六','周日']
+                }
+            ],
+            yAxis : [
+                {
+                    type : 'value'
+                }
+            ],
+            series : [
+                {
+                    name:'邮件营销',
+                    type:'line',
+                    stack: '总量',
+                    areaStyle: {normal: {}},
+                    data:[120, 132, 101, 134, 90, 230, 210]
+                },
+                {
+                    name:'联盟广告',
+                    type:'line',
+                    stack: '总量',
+                    areaStyle: {normal: {}},
+                    data:[220, 182, 191, 234, 290, 330, 310]
+                },
+                {
+                    name:'视频广告',
+                    type:'line',
+                    stack: '总量',
+                    areaStyle: {normal: {}},
+                    data:[150, 232, 201, 154, 190, 330, 410]
+                }
+            ]
+        };
+        return option;
+    },
+    render: function() {
+        return (
+            <div className='examples'>
+                <div className='parent'>
+                    <label> render a Simple echart With <strong>option and height</strong>: </label>
+                    <ReactEcharts
+                        option={this.getOtion()} height={300}/>
+                    <label> code below: </label>
+                    <pre>
+                        <code>
+    {'<ReactEcharts option={this.getOtion()} height={300}/>'}
+                        </code>
+                    </pre>
+                </div>
+            </div>
+        );
+    }
+});
+
+export default SimpleChartComponent;