fix(visualmap): add textShadowColor, make text shadow work on visualMap. close #14440

src/component/visualMap/ContinuousView.ts

@@ -38,6 +38,7 @@ import { setAsHighDownDispatcher } from '../../util/states';
 import { createSymbol } from '../../util/symbol';
 import ZRImage from 'zrender/src/graphic/Image';
 import { getECData } from '../../util/innerStore';
+import { createTextStyle } from '../../label/labelStyle';
 
 const linearMap = numberUtil.linearMap;
 const each = zrUtil.each;
@@ -182,17 +183,19 @@ class ContinuousView extends VisualMapView {
         );
         const orient = this._orient;
         const textStyleModel = this.visualMapModel.textStyleModel;
+        const textShadow = textStyleModel.getTextShadow();
 
         this.group.add(new graphic.Text({
-            style: {
+            style: createTextStyle(textStyleModel, {
                 x: position[0],
                 y: position[1],
                 verticalAlign: orient === 'horizontal' ? 'middle' : align as TextVerticalAlign,
                 align: orient === 'horizontal' ? align as TextAlign : 'center',
-                text: text,
+                text,
                 font: textStyleModel.getFont(),
-                fill: textStyleModel.getTextColor()
-            }
+                fill: textStyleModel.getTextColor(),
+                ...textShadow
+            })
         }));
     }
 

src/component/visualMap/PiecewiseView.ts

@@ -26,6 +26,7 @@ import * as helper from './helper';
 import PiecewiseModel from './PiecewiseModel';
 import { TextAlign } from 'zrender/src/core/types';
 import { VisualMappingOption } from '../../visual/VisualMapping';
+import { createTextStyle } from '../../label/labelStyle';
 
 class PiecewiseVisualMapView extends VisualMapView {
 
@@ -101,8 +102,6 @@ class PiecewiseVisualMapView extends VisualMapView {
         this.renderBackground(thisGroup);
 
         this.positionGroup(thisGroup);
-
-
     }
 
     private _enableHoverLink(itemGroup: graphic.Group, pieceIndex: number) {
@@ -155,17 +154,19 @@ class PiecewiseVisualMapView extends VisualMapView {
 
         const itemGroup = new graphic.Group();
         const textStyleModel = this.visualMapModel.textStyleModel;
+        const textShadow = textStyleModel.getTextShadow();
 
         itemGroup.add(new graphic.Text({
-            style: {
+            style: createTextStyle(textStyleModel, {
                 x: showLabel ? (itemAlign === 'right' ? itemSize[0] : 0) : itemSize[0] / 2,
                 y: itemSize[1] / 2,
                 verticalAlign: 'middle',
                 align: showLabel ? (itemAlign as TextAlign) : 'center',
                 text: text,
                 font: textStyleModel.getFont(),
-                fill: textStyleModel.getTextColor()
-            }
+                fill: textStyleModel.getTextColor(),
+                ...textShadow
+            })
         }));
 
         group.add(itemGroup);

src/model/mixin/textStyle.ts

@@ -35,6 +35,8 @@ const textStyleParams = [
     'fontStyle', 'fontWeight', 'fontSize', 'fontFamily', 'padding',
     'lineHeight', 'rich', 'width', 'height', 'overflow'
 ] as const;
+type LabelTextShadowOption = Pick<LabelOption,
+    'textShadowBlur' | 'textShadowColor' | 'textShadowOffsetX' | 'textShadowOffsetY'>;
 
 // TODO Performance improvement?
 const tmpText = new ZRText();
@@ -77,6 +79,15 @@ class TextStyleMixin {
         tmpText.update();
         return tmpText.getBoundingRect();
     }
+
+    getTextShadow(this: Model<LabelTextShadowOption>) {
+        return {
+            textShadowBlur: this.getShallow('textShadowBlur'),
+            textShadowColor: this.getShallow('textShadowColor'),
+            textShadowOffsetX: this.getShallow('textShadowOffsetX'),
+            textShadowOffsetY: this.getShallow('textShadowOffsetY')
+        };
+    }
 };
 
 export default TextStyleMixin;