Add the loading option (#46)

* Add the loading option

* Modify the loading option

README.md

@@ -90,6 +90,10 @@ echarts.registerTheme('my_theme', {
 
 when the chart is ready, will callback the function with the `echarts object` as it's paramter.
 
+ - **`loadingOption`** (optional, object)
+
+the echarts loading option config, can see [http://echarts.baidu.com/api.html#echartsInstance.showLoading](http://echarts.baidu.com/api.html#echartsInstance.showLoading).
+
  - **`showLoading`** (optional, bool, default: false)
 
 `bool`, when the chart is rendering, show the loading mask.

demo/ChartShowLoadingComponent.jsx

@@ -47,13 +47,24 @@ const ChartShowLoadingComponent = React.createClass({
             chart.hideLoading();
         }, 3000);
     },
+    getLoadingOption: function() {
+        const option = {
+            text: '加载中...',
+            color: '#4413c2',
+            textColor: '#270240',
+            maskColor: 'rgba(194, 88, 86, 0.3)',
+            zlevel: 0
+        };
+        return option;
+    },
     render: function() {
-        let code = "onChartReady: function(chart) {\n" + 
+        let code = "onChartReady: function(chart) {\n" +
                    "  'chart.hideLoading();\n" +
                    "}\n\n" +
                    "<ReactEcharts \n" +
                     "    option={this.getOtion()} \n" +
                     "    onChartReady={this.onChartReady} \n" +
+                    "    loadingOption={this.getLoadingOption()} \n" +
                     "    showLoading={true} />";
 
         return (
@@ -62,7 +73,8 @@ const ChartShowLoadingComponent = React.createClass({
                     <label> Chart loading With <strong> showLoading </strong>: (when chart ready, hide the loading mask.)</label>
                     <ReactEcharts
                         option={this.getOtion()} 
-                        onChartReady={this.onChartReady} 
+                        onChartReady={this.onChartReady}
+                        loadingOption={this.getLoadingOption()}
                         showLoading={true} />
                     <label> code below: </label>
                     <pre>

lib/echarts-for-react.js

@@ -26,6 +26,7 @@ var ReactEcharts = _react2['default'].createClass({
         theme: _react2['default'].PropTypes.string,
         onChartReady: _react2['default'].PropTypes.func,
         showLoading: _react2['default'].PropTypes.bool,
+        loadingOption: _react2['default'].PropTypes.object,
         onEvents: _react2['default'].PropTypes.object
     },
     // first add
@@ -80,7 +81,7 @@ var ReactEcharts = _react2['default'].createClass({
         // set the echart option
         echartObj.setOption(this.props.option, this.props.notMerge || false, this.props.lazyUpdate || false);
         // set loading mask
-        if (this.props.showLoading) echartObj.showLoading();else echartObj.hideLoading();
+        if (this.props.showLoading) echartObj.showLoading(this.props.loadingOption || null);else echartObj.hideLoading();
 
         return echartObj;
     },

src/echarts-for-react.js

@@ -13,6 +13,7 @@ const ReactEcharts = React.createClass({
         theme: React.PropTypes.string,
         onChartReady: React.PropTypes.func,
         showLoading: React.PropTypes.bool,
+        loadingOption: React.PropTypes.object,
         onEvents: React.PropTypes.object
     },
     // first add
@@ -64,7 +65,7 @@ const ReactEcharts = React.createClass({
         // set the echart option
         echartObj.setOption(this.props.option, this.props.notMerge || false, this.props.lazyUpdate || false);
         // set loading mask
-        if (this.props.showLoading) echartObj.showLoading();
+        if (this.props.showLoading) echartObj.showLoading(this.props.loadingOption || null);
         else echartObj.hideLoading();
 
         return echartObj;