Merge remote-tracking branch 'upstream/master'

src/component/graphic.js

@@ -24,6 +24,7 @@ import * as zrUtil from 'zrender/src/core/util';
 import * as modelUtil from '../util/model';
 import * as graphicUtil from '../util/graphic';
 import * as layoutUtil from '../util/layout';
+import {parsePercent} from '../util/number';
 
 // -------------
 // Preprocessor
@@ -338,8 +339,8 @@ echarts.extendComponentView({
 
             var el = elMap.get(id);
             if (el) {
-                el.__ecGraphicWidth = elOption.width;
-                el.__ecGraphicHeight = elOption.height;
+                el.__ecGraphicWidthOption = elOption.width;
+                el.__ecGraphicHeightOption = elOption.height;
                 setEventData(el, graphicModel, elOption);
             }
         });
@@ -356,6 +357,29 @@ echarts.extendComponentView({
         var elOptions = graphicModel.option.elements;
         var rootGroup = this.group;
         var elMap = this._elMap;
+        var apiWidth = api.getWidth();
+        var apiHeight = api.getHeight();
+
+        // Top-down to calculate percentage width/height of group
+        for (var i = 0; i < elOptions.length; i++) {
+            var elOption = elOptions[i];
+            var el = elMap.get(elOption.id);
+
+            if (!el || !el.isGroup) {
+                continue;
+            }
+            var parentEl = el.parent;
+            var isParentRoot = parentEl === rootGroup;
+            // Like 'position:absolut' in css, default 0.
+            el.__ecGraphicWidth = parsePercent(
+                el.__ecGraphicWidthOption,
+                isParentRoot ? apiWidth : parentEl.__ecGraphicWidth
+            ) || 0;
+            el.__ecGraphicHeight = parsePercent(
+                el.__ecGraphicHeightOption,
+                isParentRoot ? apiHeight : parentEl.__ecGraphicHeight
+            ) || 0;
+        }
 
         // Bottom-up tranvese all elements (consider ec resize) to locate elements.
         for (var i = elOptions.length - 1; i >= 0; i--) {
@@ -369,14 +393,18 @@ echarts.extendComponentView({
             var parentEl = el.parent;
             var containerInfo = parentEl === rootGroup
                 ? {
-                    width: api.getWidth(),
-                    height: api.getHeight()
+                    width: apiWidth,
+                    height: apiHeight
                 }
-                : { // Like 'position:absolut' in css, default 0.
-                    width: parentEl.__ecGraphicWidth || 0,
-                    height: parentEl.__ecGraphicHeight || 0
+                : {
+                    width: parentEl.__ecGraphicWidth,
+                    height: parentEl.__ecGraphicHeight
                 };
 
+            // PENDING
+            // Currently, when `bounding: 'all'`, the union bounding rect of the group 
+            // does not include the rect of [0, 0, group.width, group.height], which
+            // is probably weird for users. Should we make a break change for it?
             layoutUtil.positionElement(
                 el, elOption, containerInfo, null,
                 {hv: elOption.hv, boundingMode: elOption.bounding}
@@ -548,4 +576,4 @@ function setEventData(el, graphicModel, elOption) {
     if (eventData) {
         eventData.info = el.info;
     }
-}
\ No newline at end of file
+}

src/component/marker/MarkerModel.js

@@ -40,7 +40,7 @@ var MarkerModel = echarts.extendComponentModel({
     /**
      * @overrite
      */
-    init: function (option, parentModel, ecModel, extraOpt) {
+    init: function (option, parentModel, ecModel) {
 
         if (__DEV__) {
             if (this.type === 'marker') {
@@ -48,7 +48,7 @@ var MarkerModel = echarts.extendComponentModel({
             }
         }
         this.mergeDefaultAndTheme(option, ecModel);
-        this.mergeOption(option, ecModel, extraOpt.createdBySelf, true);
+        this._mergeOption(option, ecModel, false, true);
     },
 
     /**
@@ -63,7 +63,14 @@ var MarkerModel = echarts.extendComponentModel({
         return this.getShallow('animation') && hostSeries && hostSeries.isAnimationEnabled();
     },
 
-    mergeOption: function (newOpt, ecModel, createdBySelf, isInit) {
+    /**
+     * @overrite
+     */
+    mergeOption: function (newOpt, ecModel) {
+        this._mergeOption(newOpt, ecModel, false, false);
+    },
+
+    _mergeOption: function (newOpt, ecModel, createdBySelf, isInit) {
         var MarkerModel = this.constructor;
         var modelPropName = this.mainType + 'Model';
         if (!createdBySelf) {
@@ -107,7 +114,7 @@ var MarkerModel = echarts.extendComponentModel({
                     markerModel.__hostSeries = seriesModel;
                 }
                 else {
-                    markerModel.mergeOption(markerOpt, ecModel, true);
+                    markerModel._mergeOption(markerOpt, ecModel, true);
                 }
                 seriesModel[modelPropName] = markerModel;
             }, this);

test/graphicOption.html

@@ -204,6 +204,99 @@ under the License.
             },
             z: 100
         }]
+    }, {
+        type: 'group',
+        id: 'bl',
+        width: '100%',
+        height: '100%',
+        children: [{
+            type: 'rect',
+            right: 0,
+            bottom: 0,
+            shape: {
+                width: 200,
+                height: 100
+            },
+            style: {
+                stroke: 'blue',
+                fill: 'blue',
+                lineWidth: 2
+            }
+        }, {
+            type: 'rect',
+            position: [10, 20],
+            shape: {
+                width: 50,
+                height: 150
+            },
+            style: {
+                stroke: 'blue',
+                fill: 'blue',
+                lineWidth: 2
+            }
+        }, {
+            type: 'group',
+            width: '50%',
+            height: '50%',
+            children: [{
+                type: 'rect',
+                shape: {
+                    width: 100,
+                    height: 100
+                },
+                style: {
+                    stroke: 'blue',
+                    fill: 'blue',
+                    lineWidth: 2
+                },
+                right: 0,
+                bottom: 0
+            }]
+        }]
+    }, {
+        type: 'rect',
+        right: 0,
+        bottom: 0,
+        shape: {
+            width: 200,
+            height: 100
+        },
+        style: {
+            stroke: 'orange',
+            fill: 'transparent',
+            lineWidth: 2
+        }
+    }, {
+        type: 'rect',
+        position: [10, 20],
+        shape: {
+            width: 50,
+            height: 150
+        },
+        style: {
+            stroke: 'orange',
+            fill: 'transparent',
+            lineWidth: 2
+        }
+    }, {
+        type: 'rect',
+        shape: {
+            width: 100,
+            height: 100
+        },
+        style: {
+            stroke: 'orange',
+            fill: 'transparent',
+            lineWidth: 2
+        },
+        right: '50%',
+        bottom: '50%'
+    }, {
+        type: 'text',
+        position: [220, 20],
+        style: {
+            text: '蓝色矩形应与橙色矩形同一位置'
+        }
     }]
 }
             </textarea>