Merge pull request #20961 from apache/fix/visualMap-textStyle

fix(visualMap): fix some text style can't work on visualMap

Author: Ovilia

src/component/visualMap/ContinuousView.ts

@@ -191,8 +191,10 @@ class ContinuousView extends VisualMapView {
             style: createTextStyle(textStyleModel, {
                 x: position[0],
                 y: position[1],
-                verticalAlign: orient === 'horizontal' ? 'middle' : align as TextVerticalAlign,
-                align: orient === 'horizontal' ? align as TextAlign : 'center',
+                verticalAlign: textStyleModel.get('verticalAlign')
+                    || (orient === 'horizontal' ? 'middle' : align as TextVerticalAlign),
+                align: textStyleModel.get('align')
+                    || (orient === 'horizontal' ? align as TextAlign : 'center'),
                 text
             })
         }));

src/component/visualMap/PiecewiseView.ts

@@ -44,8 +44,6 @@ class PiecewiseVisualMapView extends VisualMapView {
         const visualMapModel = this.visualMapModel;
         const textGap = visualMapModel.get('textGap');
         const textStyleModel = visualMapModel.textStyleModel;
-        const textFont = textStyleModel.getFont();
-        const textFill = textStyleModel.getTextColor();
         const itemAlign = this._getItemAlign();
         const itemSize = visualMapModel.itemSize;
         const viewData = this._getViewData();
@@ -74,17 +72,19 @@ class PiecewiseVisualMapView extends VisualMapView {
 
             if (showLabel) {
                 const visualState = this.visualMapModel.getValueState(representValue);
+                const align = textStyleModel.get('align') || itemAlign as TextAlign;
                 itemGroup.add(new graphic.Text({
-                    style: {
-                        x: itemAlign === 'right' ? -textGap : itemSize[0] + textGap,
+                    style: createTextStyle(textStyleModel, {
+                        x: align === 'right' ? -textGap : itemSize[0] + textGap,
                         y: itemSize[1] / 2,
                         text: piece.text,
-                        verticalAlign: 'middle',
-                        align: itemAlign as TextAlign,
-                        font: textFont,
-                        fill: textFill,
-                        opacity: visualState === 'outOfRange' ? 0.5 : 1,
-                    },
+                        verticalAlign: textStyleModel.get('verticalAlign') || 'middle',
+                        align,
+                        opacity: zrUtil.retrieve2(
+                            textStyleModel.get('opacity'),
+                            visualState === 'outOfRange' ? 0.5 : 1
+                        ),
+                    }),
                     silent
                 }));
             }