fix bug of 100px width * height, #149 #150

Author: hustcc

demo/dist/bundle.js

@@ -42,7 +42,7 @@ var EchartsReactCore = function (_Component) {
     var _this = _possibleConstructorReturn(this, (EchartsReactCore.__proto__ || Object.getPrototypeOf(EchartsReactCore)).call(this, props));
 
     _this.getEchartsInstance = function () {
-      return _this.echartsInstance.getInstanceByDom(_this.echartsElement) || _this.echartsInstance.init(_this.echartsElement, _this.props.theme, _this.props.opts);
+      return _this.echartsLib.getInstanceByDom(_this.echartsElement) || _this.echartsLib.init(_this.echartsElement, _this.props.theme, _this.props.opts);
     };
 
     _this.dispose = function () {
@@ -51,7 +51,7 @@ var EchartsReactCore = function (_Component) {
         try {
           _elementResizeEvent2['default'].unbind(_this.echartsElement);
         } catch (_) {}
-        _this.echartsInstance.dispose(_this.echartsElement);
+        _this.echartsLib.dispose(_this.echartsElement);
       }
     };
 
@@ -63,6 +63,12 @@ var EchartsReactCore = function (_Component) {
 
       var echartObj = _this.renderEchartDom();
       _this.bindEvents(echartObj, onEvents || {});
+
+      // fix bug of 100px width * height.
+      try {
+        echartObj.resize();
+      } catch (_) {}
+
       // on chart ready
       if (typeof onChartReady === 'function') _this.props.onChartReady(echartObj);
       // on resize
@@ -104,7 +110,7 @@ var EchartsReactCore = function (_Component) {
       return echartObj;
     };
 
-    _this.echartsInstance = _this.props.echarts; // the echarts object.
+    _this.echartsLib = _this.props.echarts; // the echarts object.
     _this.echartsElement = null; // echarts div element
     return _this;
   }

lib/core.js

@@ -30,7 +30,7 @@ var EchartsReact = function (_EchartsReactCore) {
 
     var _this = _possibleConstructorReturn(this, (EchartsReact.__proto__ || Object.getPrototypeOf(EchartsReact)).call(this, props));
 
-    _this.echartsInstance = _echarts2['default'];
+    _this.echartsLib = _echarts2['default'];
     return _this;
   }
 

lib/index.js

@@ -7,7 +7,7 @@ const isEqual = (a, b) => JSON.stringify(a) === JSON.stringify(b);
 export default class EchartsReactCore extends Component {
   constructor(props) {
     super(props);
-    this.echartsInstance = this.props.echarts; // the echarts object.
+    this.echartsLib = this.props.echarts; // the echarts object.
     this.echartsElement = null; // echarts div element
   }
 
@@ -50,8 +50,8 @@ export default class EchartsReactCore extends Component {
   }
 
   // return the echart object
-  getEchartsInstance = () => this.echartsInstance.getInstanceByDom(this.echartsElement) ||
-    this.echartsInstance.init(this.echartsElement, this.props.theme, this.props.opts);
+  getEchartsInstance = () => this.echartsLib.getInstanceByDom(this.echartsElement) ||
+    this.echartsLib.init(this.echartsElement, this.props.theme, this.props.opts);
 
   // dispose echarts and element-resize-event
   dispose = () => {
@@ -60,7 +60,7 @@ export default class EchartsReactCore extends Component {
       try {
         elementResizeEvent.unbind(this.echartsElement);
       } catch (_) {}
-      this.echartsInstance.dispose(this.echartsElement);
+      this.echartsLib.dispose(this.echartsElement);
     }
   };
 
@@ -69,6 +69,12 @@ export default class EchartsReactCore extends Component {
 
     const echartObj = this.renderEchartDom();
     this.bindEvents(echartObj, onEvents || {});
+
+    // fix bug of 100px width * height.
+    try {
+      echartObj.resize();
+    } catch (_) {}
+
     // on chart ready
     if (typeof onChartReady === 'function') this.props.onChartReady(echartObj);
     // on resize

src/core.jsx

@@ -5,6 +5,6 @@ import EchartsReactCore from './core';
 export default class EchartsReact extends EchartsReactCore {
   constructor(props) {
     super(props);
-    this.echartsInstance = echarts;
+    this.echartsLib = echarts;
   }
 }