diff --git a/README.md b/README.md
index 624ab9b..af311c7 100644
--- a/README.md
+++ b/README.md
@@ -97,9 +97,36 @@ let onEvents = {
for more event key name, see: [http://echarts.baidu.com/api.html#events](http://echarts.baidu.com/api.html#events)
-# TODO
+# Component API & Echarts API
+
+the Component only has `one API` named `getEchartsInstance`.
+
+ - **`getEchartsInstance()`** : get the echarts instance object, then you can use any `API of echarts`.
+
+for example:
+
+```js
+// render the echarts component below with rel
+
+
+// then get the `ReactEcharts` use this.refs.echarts_react
+
+let echarts_instance = this.refs.echarts_react.getEchartsInstance();
+// then you can use any API of echarts.
+let base64 = echarts_instance.getDataURL();
+```
+
+**About API of echarts, can see** [http://echarts.baidu.com/api.html#echartsInstance](http://echarts.baidu.com/api.html#echartsInstance).
+
+you can use the API to do:
+
+1. `binding / unbinding` event.
+2. `dynamic charts` with dynamic data.
+3. get the echarts dom / dataURL / base64, save the chart to png.
+4. `release` the charts.
-1. echart API
# LICENSE
diff --git a/demo/ChartAPIComponent.jsx b/demo/ChartAPIComponent.jsx
new file mode 100644
index 0000000..d44672d
--- /dev/null
+++ b/demo/ChartAPIComponent.jsx
@@ -0,0 +1,129 @@
+import React from 'react';
+import ReactEcharts from '../src/echarts-for-react';
+
+const ChartAPIComponent = React.createClass({
+ propTypes: {
+ },
+ getOtion: function() {
+ const option = {
+ title: {
+ text: '漏斗图',
+ subtext: '纯属虚构'
+ },
+ tooltip: {
+ trigger: 'item',
+ formatter: "{a}
{b} : {c}%"
+ },
+ toolbox: {
+ feature: {
+ dataView: {readOnly: false},
+ restore: {},
+ saveAsImage: {}
+ }
+ },
+ legend: {
+ data: ['展现','点击','访问','咨询','订单']
+ },
+ series: [
+ {
+ name: '预期',
+ type: 'funnel',
+ left: '10%',
+ width: '80%',
+ label: {
+ normal: {
+ formatter: '{b}预期'
+ },
+ emphasis: {
+ position:'inside',
+ formatter: '{b}预期: {c}%'
+ }
+ },
+ labelLine: {
+ normal: {
+ show: false
+ }
+ },
+ itemStyle: {
+ normal: {
+ opacity: 0.7
+ }
+ },
+ data: [
+ {value: 60, name: '访问'},
+ {value: 40, name: '咨询'},
+ {value: 20, name: '订单'},
+ {value: 80, name: '点击'},
+ {value: 100, name: '展现'}
+ ]
+ },
+ {
+ name: '实际',
+ type: 'funnel',
+ left: '10%',
+ width: '80%',
+ maxSize: '80%',
+ label: {
+ normal: {
+ position: 'inside',
+ formatter: '{c}%',
+ textStyle: {
+ color: '#fff'
+ }
+ },
+ emphasis: {
+ position:'inside',
+ formatter: '{b}实际: {c}%'
+ }
+ },
+ itemStyle: {
+ normal: {
+ opacity: 0.5,
+ borderColor: '#fff',
+ borderWidth: 2
+ }
+ },
+ data: [
+ {value: 30, name: '访问'},
+ {value: 10, name: '咨询'},
+ {value: 5, name: '订单'},
+ {value: 50, name: '点击'},
+ {value: 80, name: '展现'}
+ ]
+ }
+ ]
+ };
+
+ return option;
+ },
+ clickBtn: function() {
+ window.open(this.refs.echarts_react.getEchartsInstance().getDataURL(), '_blank');
+ },
+ render: function() {
+ let code = " \n" +
+ "\n" +
+ "// use echarts API: http://echarts.baidu.com/api.html#echartsInstance" +
+ "this.refs.echarts_react.getEchartsInstance().getDataURL();";
+ return (
+
+
+
+
+
+
+
+
+
+ {code}
+
+
+
+ );
+ }
+});
+
+export default ChartAPIComponent;
\ No newline at end of file
diff --git a/demo/MainPageComponent.jsx b/demo/MainPageComponent.jsx
index ebc1221..8007058 100644
--- a/demo/MainPageComponent.jsx
+++ b/demo/MainPageComponent.jsx
@@ -4,6 +4,8 @@ import SimpleChartComponent from './SimpleChartComponent.jsx';
import ChartWithEventComponent from './ChartWithEventComponent.jsx';
import ThemeChartComponent from './ThemeChartComponent.jsx';
import ChartShowLoadingComponent from './ChartShowLoadingComponent.jsx';
+import ChartAPIComponent from './ChartAPIComponent.jsx';
+
const MainPageComponent = React.createClass({
propTypes: {
@@ -15,6 +17,7 @@ const MainPageComponent = React.createClass({
+
diff --git a/demo/demo.css b/demo/demo.css
index b62e46b..e9500d2 100644
--- a/demo/demo.css
+++ b/demo/demo.css
@@ -100,6 +100,11 @@ button:hover {
color: #ecf0f1;
}
+.a_line {
+ display: block;
+ width: 100%;
+}
+
.nsg-tag {
border-color: #14204f;
}
diff --git a/demo/dist/bundle.js b/demo/dist/bundle.js
index 0849fbd..9202778 100644
--- a/demo/dist/bundle.js
+++ b/demo/dist/bundle.js
@@ -1,5 +1,5 @@
-!function(e){function t(i){if(n[i])return n[i].exports;var o=n[i]={exports:{},id:i,loaded:!1};return e[i].call(o.exports,o,o.exports,t),o.loaded=!0,o.exports}var n={};return t.m=e,t.c=n,t.p="",t(0)}([function(e,t,n){"use strict";function i(e){return e&&e.__esModule?e:{"default":e}}var o=n(1),r=i(o);n(517);var a=n(2),s=n(521);s.render(a.createElement(r["default"],null),document.querySelector("#wrapper"))},function(e,t,n){"use strict";function i(e){return e&&e.__esModule?e:{"default":e}}Object.defineProperty(t,"__esModule",{value:!0});var o=n(2),r=i(o),a=n(159),s=i(a),l=n(514),u=i(l),c=n(515),d=i(c),h=n(516),p=i(h),f=r["default"].createClass({displayName:"MainPageComponent",propTypes:{},render:function(){return r["default"].createElement("div",null,r["default"].createElement("h1",null," echarts-for-react "),r["default"].createElement("h3",null," A very simple echarts(v3.0) wrapper for React. ",r["default"].createElement("a",{href:"https://github.com/hustcc/echarts-for-react"},"hustcc/echarts-for-react")),r["default"].createElement(s["default"],null),r["default"].createElement(p["default"],null),r["default"].createElement(u["default"],null),r["default"].createElement(d["default"],null),r["default"].createElement("h3",null,"Get it on GitHub! ",r["default"].createElement("a",{href:"https://github.com/hustcc/echarts-for-react"},"hustcc/echarts-for-react")))}});t["default"]=f},function(e,t,n){"use strict";e.exports=n(3)},function(e,t,n){"use strict";var i=n(4),o=n(149),r=n(153),a=n(40),s=n(158),l={};a(l,r),a(l,{findDOMNode:s("findDOMNode","ReactDOM","react-dom",i,i.findDOMNode),render:s("render","ReactDOM","react-dom",i,i.render),unmountComponentAtNode:s("unmountComponentAtNode","ReactDOM","react-dom",i,i.unmountComponentAtNode),renderToString:s("renderToString","ReactDOMServer","react-dom/server",o,o.renderToString),renderToStaticMarkup:s("renderToStaticMarkup","ReactDOMServer","react-dom/server",o,o.renderToStaticMarkup)}),l.__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED=i,l.__SECRET_DOM_SERVER_DO_NOT_USE_OR_YOU_WILL_BE_FIRED=o,e.exports=l},function(e,t,n){(function(t){"use strict";var i=n(6),o=n(7),r=n(72),a=n(46),s=n(29),l=n(19),u=n(51),c=n(55),d=n(147),h=n(92),p=n(148),f=n(26);r.inject();var g=l.measure("React","render",s.render),m={findDOMNode:h,render:g,unmountComponentAtNode:s.unmountComponentAtNode,version:d,unstable_batchedUpdates:c.batchedUpdates,unstable_renderSubtreeIntoContainer:p};if("undefined"!=typeof __REACT_DEVTOOLS_GLOBAL_HOOK__&&"function"==typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.inject&&__REACT_DEVTOOLS_GLOBAL_HOOK__.inject({CurrentOwner:i,InstanceHandles:a,Mount:s,Reconciler:u,TextComponent:o}),"production"!==t.env.NODE_ENV){var v=n(10);if(v.canUseDOM&&window.top===window.self){"undefined"==typeof __REACT_DEVTOOLS_GLOBAL_HOOK__&&(navigator.userAgent.indexOf("Chrome")>-1&&-1===navigator.userAgent.indexOf("Edge")||navigator.userAgent.indexOf("Firefox")>-1)&&console.debug("Download the React DevTools for a better development experience: https://fb.me/react-devtools");var y=document.documentMode&&document.documentMode<8;"production"!==t.env.NODE_ENV?f(!y,'Internet Explorer is running in compatibility mode; please add the following tag to your HTML to prevent this from happening: '):void 0;for(var x=[Array.isArray,Array.prototype.every,Array.prototype.forEach,Array.prototype.indexOf,Array.prototype.map,Date.now,Function.prototype.bind,Object.keys,String.prototype.split,String.prototype.trim,Object.create,Object.freeze],_=0;_1)for(var n=1;n"+d+""},receiveComponent:function(e,t){if(e!==this._currentElement){this._currentElement=e;var n=""+e;if(n!==this._stringText){this._stringText=n;var o=a.getNode(this._rootNodeID);i.updateTextContent(o,n)}}},unmountComponent:function(){r.unmountIDFromEnvironment(this._rootNodeID)}}),e.exports=d}).call(t,n(5))},function(e,t,n){(function(t){"use strict";function i(e,t,n){var i=n>=e.childNodes.length?null:e.childNodes.item(n);e.insertBefore(t,i)}var o=n(9),r=n(17),a=n(19),s=n(20),l=n(21),u=n(14),c={dangerouslyReplaceNodeWithMarkup:o.dangerouslyReplaceNodeWithMarkup,updateTextContent:l,processUpdates:function(e,n){for(var a,c=null,d=null,h=0;h when using tables, nesting tags like