Optimize legend layout. Legend and Toolbox support width and height configuration. Fix #2621

src/component/helper/listComponent.js

@@ -24,12 +24,16 @@ define(function (require) {
          * @param {module:echarts/ExtensionAPI}
          */
         layout: function (group, componentModel, api) {
+            var rect = layout.getLayoutRect(componentModel.getBoxLayoutParams(), {
+                width: api.getWidth(),
+                height: api.getHeight()
+            }, componentModel.get('padding'));
             layout.box(
                 componentModel.get('orient'),
                 group,
                 componentModel.get('itemGap'),
-                api.getWidth(),
-                api.getHeight()
+                rect.width,
+                rect.height
             );
 
             positionGroup(group, componentModel, api);

src/component/legend/LegendModel.js

@@ -11,7 +11,9 @@ define(function(require) {
 
         dependencies: ['series'],
 
-        layoutMode: {type: 'box', ignoreSize: true},
+        layoutMode: {
+            type: 'box'
+        },
 
         init: function (option, parentModel, ecModel) {
             this.mergeDefaultAndTheme(option, ecModel);

src/component/toolbox/ToolboxModel.js

@@ -7,7 +7,7 @@ define(function (require) {
 
         type: 'toolbox',
 
-        layoutMode: {type: 'box', ignoreSize: true},
+        layoutMode: {type: 'box'},
 
         mergeDefaultAndTheme: function (option) {
             this.$superApply('mergeDefaultAndTheme', arguments);

src/coord/single/SingleAxis.js

@@ -34,7 +34,7 @@ define(function (require) {
          *  - 'left'
          *  - 'right'
          *  @type {string}
-         */ 
+         */
         this.position = position || 'bottom';
 
         /**
@@ -49,7 +49,7 @@ define(function (require) {
          * @type {number}
          */
         this._labelInterval = null;
-        
+
     };
 
     SingleAxis.prototype = {
@@ -64,7 +64,7 @@ define(function (require) {
 
         /**
          * Judge the orient of the axis.
-         * @return {boolean} 
+         * @return {boolean}
          */
         isHorizontal: function () {
             var position = this.position;
@@ -74,7 +74,7 @@ define(function (require) {
 
         /**
          * Get interval of the axis label.
-         * @return {number} 
+         * @return {number}
          */
         getLabelInterval: function () {
             var labelInterval = this._labelInterval;
@@ -89,16 +89,17 @@ define(function (require) {
                 }
                 labelInterval = this._labelInterval =
                     axisHelper.getAxisLabelInterval(
-                    zrUtil.map(this.scale.getTicks(), this.dataToCoord, this),
-                    axisModel.getFormattedLabels(),
-                    labelModel.getModel('textStyle').getFont(),
-                    this.isHorizontal());
+                        zrUtil.map(this.scale.getTicks(), this.dataToCoord, this),
+                        axisModel.getFormattedLabels(),
+                        labelModel.getModel('textStyle').getFont(),
+                        this.isHorizontal()
+                    );
             }
             return labelInterval;
         },
 
         /**
-         * Convert the local coord(processed by dataToCoord()) 
+         * Convert the local coord(processed by dataToCoord())
          * to global coord(concrete pixel coord).
          * designated by module:echarts/coord/single/Single.
          * @type {Function}

src/util/layout.js

@@ -227,6 +227,17 @@ define(function(require) {
                 top = containerHeight - height - verticalMargin;
                 break;
         }
+        // If something is wrong and left, top, width, height are calculated as NaN
+        left = left || 0;
+        top = top || 0;
+        if (isNaN(width)) {
+            // Width may be NaN if only one value is given except width
+            width = containerWidth - left - (right || 0);
+        }
+        if (isNaN(height)) {
+            // Height may be NaN if only one value is given except height
+            height = containerHeight - top - (bottom || 0);
+        }
 
         var rect = new BoundingRect(left + margin[3], top + margin[0], width, height);
         rect.margin = margin;