[visualMap] Fix #4845 (support end text and label at the same time)

src/component/visualMap/PiecewiseModel.js

@@ -61,7 +61,10 @@ define(function(require) {
                                         // compatibility, see echarts/component/visualMap/typeDefaulter)
             selectedMode: 'multiple',   // Can be 'multiple' or 'single'.
             itemGap: 10,                // The gap between two items, in px.
-            hoverLink: true             // Enable hover highlight.
+            hoverLink: true,            // Enable hover highlight.
+
+            showLabel: null             // By default, when text is used, label will hide (the logic
+                                        // is remained for compatibility reason)
         },
 
         /**
@@ -104,6 +107,8 @@ define(function(require) {
                     mappingOption.pieceList = zrUtil.map(this._pieceList, function (piece) {
                         var piece = zrUtil.clone(piece);
                         if (state !== 'inRange') {
+                            // FIXME
+                            // outOfRange do not support special visual in pieces.
                             piece.visual = null;
                         }
                         return piece;

src/component/visualMap/PiecewiseView.js

@@ -27,16 +27,19 @@ define(function(require) {
             var textFill = textStyleModel.getTextColor();
             var itemAlign = this._getItemAlign();
             var itemSize = visualMapModel.itemSize;
-
             var viewData = this._getViewData();
-            var showLabel = !viewData.endsText;
-            var showEndsText = !showLabel;
+            var endsText = viewData.endsText;
+            var showLabel = zrUtil.retrieve(visualMapModel.get('showLabel', true), !endsText);
 
-            showEndsText && this._renderEndsText(thisGroup, viewData.endsText[0], itemSize);
+            endsText && this._renderEndsText(
+                thisGroup, endsText[0], itemSize, showLabel, itemAlign
+            );
 
             zrUtil.each(viewData.viewPieceList, renderItem, this);
 
-            showEndsText && this._renderEndsText(thisGroup, viewData.endsText[1], itemSize);
+            endsText && this._renderEndsText(
+                thisGroup, endsText[1], itemSize, showLabel, itemAlign
+            );
 
             layout.box(
                 visualMapModel.get('orient'), thisGroup, visualMapModel.get('itemGap')
@@ -125,7 +128,7 @@ define(function(require) {
         /**
          * @private
          */
-        _renderEndsText: function (group, text, itemSize) {
+        _renderEndsText: function (group, text, itemSize, showLabel, itemAlign) {
             if (!text) {
                 return;
             }
@@ -135,10 +138,10 @@ define(function(require) {
 
             itemGroup.add(new graphic.Text({
                 style: {
-                    x: itemSize[0] / 2,
+                    x: showLabel ? (itemAlign === 'right' ? itemSize[0] : 0) : itemSize[0] / 2,
                     y: itemSize[1] / 2,
                     textVerticalAlign: 'middle',
-                    textAlign: 'center',
+                    textAlign: showLabel ? itemAlign : 'center',
                     text: text,
                     textFont: textStyleModel.getFont(),
                     fill: textStyleModel.getTextColor()

test/visualMap-pieces.html

@@ -43,6 +43,9 @@ option = {
     },
     visualMap: {
         // selectedMode: 'single',
+        text: ['Map Result'],
+        showLabel: true,
+        right: 20,
         pieces: [
             {min: 1500},
             {min: 900, max: 1500},