fix(selector): modify the parameter in legend default option and the time selectorgroup be created

src/component/legend/LegendModel.js

@@ -344,9 +344,7 @@ var LegendModel = echarts.extendComponentModel({
 
         selectorItemGap: 7,
 
-        selectorLegendContentGap: 10,
-
-        selectorBorderGap: 1,
+        selectorButtonGap: 10,
 
         // Tooltip 相关配置
         tooltip: {

src/component/legend/LegendView.js

@@ -57,7 +57,7 @@ export default echarts.extendComponentView({
          * @private
          * @type {module:zrender/container/Group}
          */
-        this._selectorGroup;
+        this.group.add(this._selectorGroup = new Group());
 
         /**
          * If first rendering, `contentGroup.position` is [0, 0], which
@@ -143,7 +143,7 @@ export default echarts.extendComponentView({
     resetInner: function () {
         this.getContentGroup().removeAll();
         this._backgroundEl && this.group.remove(this._backgroundEl);
-        this._selectorGroup && this._selectorGroup.removeAll();
+        this.getSelectorGroup().removeAll();
     },
 
     /**
@@ -260,8 +260,7 @@ export default echarts.extendComponentView({
     },
 
     _createSelector: function (selector, legendModel, api, orient, selectorPosition) {
-        !this._selectorGroup && this.group.add(this._selectorGroup = new Group());
-        var selectorGroup = this._selectorGroup;
+        var selectorGroup = this.getSelectorGroup();
 
         var iconSize = legendModel.get('selectorIconSize', true);
         if (!isArray(iconSize)) {
@@ -438,7 +437,7 @@ export default echarts.extendComponentView({
      */
     layoutInner: function (legendModel, itemAlign, maxSize, isFirstRender, selector, selectorPosition) {
         var contentGroup = this.getContentGroup();
-        var selectorGroup = this._selectorGroup;
+        var selectorGroup = this.getSelectorGroup();
 
         // Place items in contentGroup.
         layoutUtil.box(
@@ -452,9 +451,9 @@ export default echarts.extendComponentView({
         var contentRect = contentGroup.getBoundingRect();
         var contentPos = [-contentRect.x, -contentRect.y];
 
-        if (selector && selectorGroup) {
+        if (selector) {
             // Place buttons in selectorGroup
-            selectorGroup && layoutUtil.box(
+            layoutUtil.box(
                 // Buttons in selectorGroup always layout horizontally
                 'horizontal',
                 selectorGroup,
@@ -463,30 +462,29 @@ export default echarts.extendComponentView({
 
             var selectorRect = selectorGroup.getBoundingRect();
             var selectorPos = [-selectorRect.x, -selectorRect.y];
-            var selectorLegendContentGap = legendModel.get('selectorLegendContentGap', true);
+            var selectorButtonGap = legendModel.get('selectorButtonGap', true);
 
             var orientIdx = legendModel.getOrient().index;
-            var WH = orientIdx === 0 ? 'width' : 'height';
-            var HW = orientIdx === 0 ? 'height' : 'width';
-            var YX = orientIdx === 0 ? 'y' : 'x';
-            var selectorBorderGap = legendModel.get('selectorBorderGap', true);
+            var wh = orientIdx === 0 ? 'width' : 'height';
+            var hw = orientIdx === 0 ? 'height' : 'width';
+            var yx = orientIdx === 0 ? 'y' : 'x';
 
             if (selectorPosition === 'end') {
-                selectorPos[orientIdx] += contentRect[WH] + selectorLegendContentGap;
+                selectorPos[orientIdx] += contentRect[wh] + selectorButtonGap;
             }
             else {
-                contentPos[orientIdx] += selectorRect[WH] + selectorLegendContentGap;
+                contentPos[orientIdx] += selectorRect[wh] + selectorButtonGap;
             }
 
             //Always align selector to content as 'middle'
-            selectorPos[1 - orientIdx] += contentRect[HW] / 2 - selectorRect[HW] / 2;
+            selectorPos[1 - orientIdx] += contentRect[hw] / 2 - selectorRect[hw] / 2;
             selectorGroup.attr('position', selectorPos);
             contentGroup.attr('position', contentPos);
 
             var mainRect = {x: 0, y: 0};
-            mainRect[WH] = contentRect[WH] + selectorLegendContentGap + selectorRect[WH] + selectorBorderGap;
-            mainRect[HW] = Math.max(contentRect[HW], selectorRect[HW]);
-            mainRect[YX] = Math.min(0, selectorRect[YX] + selectorPos[1 - orientIdx]);
+            mainRect[wh] = contentRect[wh] + selectorButtonGap + selectorRect[wh];
+            mainRect[hw] = Math.max(contentRect[hw], selectorRect[hw]);
+            mainRect[yx] = Math.min(0, selectorRect[yx] + selectorPos[1 - orientIdx]);
             return mainRect;
         }
         else {

src/component/legend/ScrollableLegendView.js

@@ -144,7 +144,6 @@ var ScrollableLegendView = LegendView.extend({
         var containerGroup = this._containerGroup;
         var controllerGroup = this._controllerGroup;
         var selectorGroup = this.getSelectorGroup();
-        var isSelector = selector && selectorGroup;
 
         var orientIdx = legendModel.getOrient().index;
         var wh = WH[orientIdx];
@@ -160,19 +159,16 @@ var ScrollableLegendView = LegendView.extend({
             orientIdx ? null : maxSize.height
         );
 
-        if (isSelector) {
-            layoutUtil.box(
-                // Buttons in selectorGroup always layout horizontally
-                'horizontal',
-                selectorGroup,
-                legendModel.get('selectorItemGap', true)
-            );
-        }
+        selector && layoutUtil.box(
+            // Buttons in selectorGroup always layout horizontally
+            'horizontal',
+            selectorGroup,
+            legendModel.get('selectorItemGap', true)
+        );
 
-        var selectorLegendContentGap = isSelector ? legendModel.get('selectorLegendContentGap', true) : 0;
+        var selectorButtonGap = selector ? legendModel.get('selectorButtonGap', true) : 0;
 
-        var selectorBorderGap = isSelector ? legendModel.get('selectorBorderGap', true) : 0;
-        var selectorRect = isSelector ? selectorGroup.getBoundingRect() : {x: 0, y: 0, width: 0, height: 0};
+        var selectorRect = selector ? selectorGroup.getBoundingRect() : {x: 0, y: 0, width: 0, height: 0};
         var selectorPos = [-selectorRect.x, -selectorRect.y];
 
         layoutUtil.box(
@@ -206,15 +202,15 @@ var ScrollableLegendView = LegendView.extend({
             var pageButtonPosition = legendModel.get('pageButtonPosition', true);
             // controller is on the right / bottom.
             if (pageButtonPosition === 'end') {
-                if (isSelector) {
+                if (selector) {
                     if (selectorPosition === 'end') {
                         selectorPos[orientIdx] += maxSize[wh] - selectorRect[wh];
                         controllerPos[orientIdx] += maxSize[wh] - selectorRect[wh]
-                            - selectorLegendContentGap - controllerRect[wh];
+                            - selectorButtonGap - controllerRect[wh];
                     }
                     else {
                         controllerPos[orientIdx] += maxSize[wh] - controllerRect[wh];
-                        containerPos[orientIdx] += selectorRect[wh] + selectorLegendContentGap;
+                        containerPos[orientIdx] += selectorRect[wh] + selectorButtonGap;
                     }
                 }
                 else {
@@ -223,10 +219,10 @@ var ScrollableLegendView = LegendView.extend({
             }
             // controller is on the left / top.
             else {
-                if (isSelector) {
+                if (selector) {
                     if (selectorPosition === 'start') {
-                        controllerPos[orientIdx] += selectorRect[wh] + selectorLegendContentGap;
-                        containerPos[orientIdx] += selectorRect[wh] + selectorLegendContentGap
+                        controllerPos[orientIdx] += selectorRect[wh] + selectorButtonGap;
+                        containerPos[orientIdx] += selectorRect[wh] + selectorButtonGap
                             + controllerRect[wh] + pageButtonGap;
                     }
                     else {
@@ -239,19 +235,19 @@ var ScrollableLegendView = LegendView.extend({
                 }
             }
         }
-        else if (isSelector) {
+        else if (selector) {
             if (selectorPosition === 'end') {
-                selectorPos[orientIdx] += contentRect[wh] + selectorLegendContentGap;
+                selectorPos[orientIdx] += contentRect[wh] + selectorButtonGap;
             }
             else {
-                containerPos[orientIdx] += selectorRect[wh] + selectorLegendContentGap;
+                containerPos[orientIdx] += selectorRect[wh] + selectorButtonGap;
             }
         }
 
         // Always align controller to content as 'middle'.
         controllerPos[1 - orientIdx] += contentRect[hw] / 2 - controllerRect[hw] / 2;
 
-        if (isSelector) {
+        if (selector) {
             selectorPos[1 - orientIdx] += contentRect[hw] / 2 - selectorRect[hw] / 2;
             selectorGroup.attr('position', selectorPos);
         }
@@ -265,7 +261,7 @@ var ScrollableLegendView = LegendView.extend({
         var mainRect = {x: 0, y: 0};
         // Consider content may be overflow (should be clipped).
         mainRect[wh] = showController ? maxSize[wh]
-            : contentRect[wh] + selectorLegendContentGap + selectorRect[wh] + selectorBorderGap;
+            : contentRect[wh] + selectorButtonGap + selectorRect[wh];
 
         mainRect[hw] = Math.max(contentRect[hw], controllerRect[hw], selectorRect[hw]);
         // `containerRect[yx] + containerPos[1 - orientIdx]` is 0.
@@ -276,7 +272,7 @@ var ScrollableLegendView = LegendView.extend({
         if (showController) {
             var clipShape = {x: 0, y: 0};
             clipShape[wh] = Math.max(maxSize[wh] - controllerRect[wh] - pageButtonGap
-                - selectorRect[wh] - selectorLegendContentGap - selectorBorderGap, 0);
+                - selectorRect[wh] - selectorButtonGap, 0);
             clipShape[hw] = mainRect[hw];
             containerGroup.setClipPath(new graphic.Rect({shape: clipShape}));
             // Consider content may be larger than container, container rect