refact: only set text props when necessary. rename setTextStyle to createTextStyle.

src/chart/custom.ts

@@ -481,11 +481,14 @@ function makeRenderItem(customSeries, data, ecModel, api) {
             ? applyExtraBefore(extra, currLabelNormalModel)
             : currLabelNormalModel;
 
-        graphicUtil.setTextStyle(itemStyle, labelModel, null, {
+        const textStyle = graphicUtil.createTextStyle(labelModel, null, {
             autoColor: currVisualColor,
             isRectText: true
         });
 
+        // TODO
+        zrUtil.extend(itemStyle, textStyle);
+
         itemStyle.text = labelModel.getShallow('show')
             ? zrUtil.retrieve2(
                 customSeries.getFormattedLabel(dataIndexInside, 'normal'),
@@ -513,9 +516,11 @@ function makeRenderItem(customSeries, data, ecModel, api) {
             ? applyExtraBefore(extra, currLabelEmphasisModel)
             : currLabelEmphasisModel;
 
-        graphicUtil.setTextStyle(itemStyle, labelModel, null, {
+        const textStyle = graphicUtil.createTextStyle(labelModel, null, {
             isRectText: true
         }, true);
+        zrUtil.extend(itemStyle, textStyle);
+
 
         itemStyle.text = labelModel.getShallow('show')
             ? zrUtil.retrieve3(

src/chart/funnel/FunnelView.ts

@@ -133,24 +133,6 @@ class FunnelPiece extends graphic.Group {
         let labelLayout = layout.label;
         // let visualColor = data.getItemVisual(idx, 'color');
 
-        graphic.updateProps(labelLine, {
-            shape: {
-                points: labelLayout.linePoints || labelLayout.linePoints
-            }
-        }, seriesModel, idx);
-
-        graphic.updateProps(labelText, {
-            style: {
-                x: labelLayout.x,
-                y: labelLayout.y
-            }
-        }, seriesModel, idx);
-        labelText.attr({
-            rotation: labelLayout.rotation,
-            origin: [labelLayout.x, labelLayout.y],
-            z2: 10
-        });
-
         let labelModel = itemModel.getModel('label');
         let labelHoverModel = itemModel.getModel(['emphasis', 'label']);
         let labelLineModel = itemModel.getModel('labelLine');
@@ -172,6 +154,26 @@ class FunnelPiece extends graphic.Group {
             }
         );
 
+        graphic.updateProps(labelLine, {
+            shape: {
+                points: labelLayout.linePoints || labelLayout.linePoints
+            }
+        }, seriesModel, idx);
+
+        // Make sure update style on labelText after setLabelStyle.
+        // Because setLabelStyle will replace a new style on it.
+        graphic.updateProps(labelText, {
+            style: {
+                x: labelLayout.x,
+                y: labelLayout.y
+            }
+        }, seriesModel, idx);
+        labelText.attr({
+            rotation: labelLayout.rotation,
+            origin: [labelLayout.x, labelLayout.y],
+            z2: 10
+        });
+
         labelText.ignore = (labelText as FunnelLabelEl).normalIgnore = !labelModel.get('show');
         (labelText as FunnelLabelEl).hoverIgnore = !labelHoverModel.get('show');
 

src/chart/gauge/GaugeView.ts

@@ -256,7 +256,7 @@ class GaugeView extends ChartView {
                 let autoColor = getColor(i / splitNumber);
 
                 group.add(new graphic.Text({
-                    style: graphic.setTextStyle({}, null, labelModel, {
+                    style: graphic.createTextStyle(labelModel, {
                         text: label,
                         x: unitX * (r - splitLineLen - distance) + cx,
                         y: unitY * (r - splitLineLen - distance) + cy,
@@ -416,7 +416,7 @@ class GaugeView extends ChartView {
 
             this.group.add(new graphic.Text({
                 silent: true,
-                style: graphic.setTextStyle({}, null, titleModel, {
+                style: graphic.createTextStyle(titleModel, {
                     x: x,
                     y: y,
                     // FIXME First data name ?
@@ -452,7 +452,7 @@ class GaugeView extends ChartView {
 
             this.group.add(new graphic.Text({
                 silent: true,
-                style: graphic.setTextStyle({}, null, detailModel, {
+                style: graphic.createTextStyle(detailModel, {
                     x: x,
                     y: y,
                     text: formatLabel(

src/chart/pie/PieView.ts

@@ -250,6 +250,30 @@ class PiePiece extends graphic.Group {
                 [labelLayout.x, labelLayout.y], [labelLayout.x, labelLayout.y], [labelLayout.x, labelLayout.y]
             ]
         };
+        let labelModel = itemModel.getModel('label');
+        let labelHoverModel = itemModel.getModel(['emphasis', 'label']);
+        let labelLineModel = itemModel.getModel('labelLine');
+        let labelLineHoverModel = itemModel.getModel(['emphasis', 'labelLine']);
+        let visualColor = data.getItemVisual(idx, 'color');
+
+        graphic.setLabelStyle(
+            labelText,
+            labelModel,
+            labelHoverModel,
+            {
+                labelFetcher: data.hostModel as PieSeriesModel,
+                labelDataIndex: idx,
+                defaultText: labelLayout.text,
+                autoColor: visualColor,
+                useInsideStyle: !!labelLayout.inside
+            },
+            {
+                align: labelLayout.textAlign,
+                verticalAlign: labelLayout.verticalAlign,
+                opacity: data.getItemVisual(idx, 'opacity')
+            }
+        );
+
         let targetTextStyle = {
             x: labelLayout.x,
             y: labelLayout.y
@@ -267,6 +291,8 @@ class PiePiece extends graphic.Group {
             labelLine.attr({
                 shape: targetLineShape
             });
+            // Make sure update style on labelText after setLabelStyle.
+            // Because setLabelStyle will replace a new style on it.
             labelText.attr({
                 style: targetTextStyle
             });
@@ -278,30 +304,6 @@ class PiePiece extends graphic.Group {
             z2: 10
         });
 
-        let labelModel = itemModel.getModel('label');
-        let labelHoverModel = itemModel.getModel(['emphasis', 'label']);
-        let labelLineModel = itemModel.getModel('labelLine');
-        let labelLineHoverModel = itemModel.getModel(['emphasis', 'labelLine']);
-        let visualColor = data.getItemVisual(idx, 'color');
-
-        graphic.setLabelStyle(
-            labelText,
-            labelModel,
-            labelHoverModel,
-            {
-                labelFetcher: data.hostModel as PieSeriesModel,
-                labelDataIndex: idx,
-                defaultText: labelLayout.text,
-                autoColor: visualColor,
-                useInsideStyle: !!labelLayout.inside
-            },
-            {
-                align: labelLayout.textAlign,
-                verticalAlign: labelLayout.verticalAlign,
-                opacity: data.getItemVisual(idx, 'opacity')
-            }
-        );
-
         labelText.ignore = labelText.normalIgnore = !labelModel.get('show');
         labelText.hoverIgnore = !labelHoverModel.get('show');
 

src/chart/themeRiver/ThemeRiverView.ts

@@ -95,6 +95,14 @@ class ThemeRiverView extends ChartView {
             let textLayout = data.getItemLayout(indices[0]);
             let labelModel = seriesModel.getModel('label');
             let margin = labelModel.get('margin');
+
+            const commonTextStyle = graphic.createTextStyle(labelModel, {
+                text: labelModel.get('show')
+                    ? seriesModel.getFormattedLabel(indices[j - 1], 'normal')
+                        || data.getName(indices[j - 1])
+                    : null,
+                verticalAlign: 'middle'
+            });
             if (status === 'add') {
                 const layerGroup = newLayersGroups[idx] = new graphic.Group();
                 polygon = new ECPolygon({
@@ -108,10 +116,10 @@ class ThemeRiverView extends ChartView {
                     z2: 0
                 });
                 text = new graphic.Text({
-                    style: {
+                    style: extend({
                         x: textLayout.x - margin,
                         y: textLayout.y0 + textLayout.y / 2
-                    }
+                    }, commonTextStyle)
                 });
                 layerGroup.add(polygon);
                 layerGroup.add(text);
@@ -137,23 +145,16 @@ class ThemeRiverView extends ChartView {
                 }, seriesModel);
 
                 graphic.updateProps(text, {
-                    style: {
+                    style: extend({
                         x: textLayout.x - margin,
                         y: textLayout.y0 + textLayout.y / 2
-                    }
+                    }, commonTextStyle)
                 }, seriesModel);
             }
 
             let hoverItemStyleModel = seriesModel.getModel(['emphasis', 'itemStyle']);
             let itemStyleModel = seriesModel.getModel('itemStyle');
 
-            graphic.setTextStyle(text.style, null, labelModel, {
-                text: labelModel.get('show')
-                    ? seriesModel.getFormattedLabel(indices[j - 1], 'normal')
-                        || data.getName(indices[j - 1])
-                    : null,
-                verticalAlign: 'middle'
-            });
 
             polygon.setStyle(extend({
                 fill: color

src/component/axis/AngleAxisView.ts

@@ -258,18 +258,18 @@ const angelAxisElementsBuilders: Record<typeof elementList[number], AngleAxisEle
             }
 
             let textEl = new graphic.Text({
-                silent: AxisBuilder.isLabelSilent(angleAxisModel)
+                silent: AxisBuilder.isLabelSilent(angleAxisModel),
+                style: graphic.createTextStyle(labelModel, {
+                    x: p[0],
+                    y: p[1],
+                    fill: labelModel.getTextColor()
+                        || angleAxisModel.get(['axisLine', 'lineStyle', 'color']) as ColorString,
+                    text: labelItem.formattedLabel,
+                    align: labelTextAlign,
+                    verticalAlign: labelTextVerticalAlign
+                })
             });
             group.add(textEl);
-            graphic.setTextStyle(textEl.style, null, labelModel, {
-                x: p[0],
-                y: p[1],
-                fill: labelModel.getTextColor()
-                    || angleAxisModel.get(['axisLine', 'lineStyle', 'color']) as ColorString,
-                text: labelItem.formattedLabel,
-                align: labelTextAlign,
-                verticalAlign: labelTextVerticalAlign
-            });
 
             // Pack data for mouse event
             if (triggerEvent) {

src/component/axis/AxisBuilder.ts

@@ -428,6 +428,19 @@ const builders: Record<'axisLine' | 'axisTickLabel' | 'axisName', AxisElementsBu
             position: pos,
             rotation: labelLayout.rotation,
             silent: AxisBuilder.isLabelSilent(axisModel),
+            style: graphic.createTextStyle(textStyleModel, {
+                text: name,
+                font: textFont,
+                overflow: 'truncate',
+                width: maxWidth,
+                ellipsis,
+                fill: textStyleModel.getTextColor()
+                    || axisModel.get(['axisLine', 'lineStyle', 'color']) as ColorString,
+                align: textStyleModel.get('align')
+                    || labelLayout.textAlign,
+                verticalAlign: textStyleModel.get('verticalAlign')
+                    || labelLayout.textVerticalAlign
+            }),
             z2: 1
         }) as AxisLabelText;
         textEl.tooltip = (tooltipOpt && tooltipOpt.show)
@@ -443,20 +456,6 @@ const builders: Record<'axisLine' | 'axisTickLabel' | 'axisName', AxisElementsBu
         // Id for animation
         textEl.anid = 'name';
 
-        graphic.setTextStyle(textEl.style, null, textStyleModel, {
-            text: name,
-            font: textFont,
-            overflow: 'truncate',
-            width: maxWidth,
-            ellipsis,
-            fill: textStyleModel.getTextColor()
-                || axisModel.get(['axisLine', 'lineStyle', 'color']) as ColorString,
-            align: textStyleModel.get('align')
-                || labelLayout.textAlign,
-            verticalAlign: textStyleModel.get('verticalAlign')
-                || labelLayout.textVerticalAlign
-        });
-
         if (axisModel.get('triggerEvent')) {
             let eventData = AxisBuilder.makeAxisEventDataBase(axisModel);
             eventData.targetType = 'axisName';
@@ -777,35 +776,35 @@ function buildAxisLabel(
             position: pos,
             rotation: labelLayout.rotation,
             silent: silent,
-            z2: 10
+            z2: 10,
+            style: graphic.createTextStyle(itemLabelModel, {
+                text: formattedLabel,
+                align: itemLabelModel.getShallow('align', true)
+                    || labelLayout.textAlign,
+                verticalAlign: itemLabelModel.getShallow('verticalAlign', true)
+                    || itemLabelModel.getShallow('baseline', true)
+                    || labelLayout.textVerticalAlign,
+                fill: typeof textColor === 'function'
+                    ? textColor(
+                        // (1) In category axis with data zoom, tick is not the original
+                        // index of axis.data. So tick should not be exposed to user
+                        // in category axis.
+                        // (2) Compatible with previous version, which always use formatted label as
+                        // input. But in interval scale the formatted label is like '223,445', which
+                        // maked user repalce ','. So we modify it to return original val but remain
+                        // it as 'string' to avoid error in replacing.
+                        axis.type === 'category'
+                            ? rawLabel
+                            : axis.type === 'value'
+                            ? tickValue + ''
+                            : tickValue,
+                        index
+                    )
+                    : textColor as string
+            })
         });
         textEl.anid = 'label_' + tickValue;
 
-        graphic.setTextStyle(textEl.style, null, itemLabelModel, {
-            text: formattedLabel,
-            align: itemLabelModel.getShallow('align', true)
-                || labelLayout.textAlign,
-            verticalAlign: itemLabelModel.getShallow('verticalAlign', true)
-                || itemLabelModel.getShallow('baseline', true)
-                || labelLayout.textVerticalAlign,
-            fill: typeof textColor === 'function'
-                ? textColor(
-                    // (1) In category axis with data zoom, tick is not the original
-                    // index of axis.data. So tick should not be exposed to user
-                    // in category axis.
-                    // (2) Compatible with previous version, which always use formatted label as
-                    // input. But in interval scale the formatted label is like '223,445', which
-                    // maked user repalce ','. So we modify it to return original val but remain
-                    // it as 'string' to avoid error in replacing.
-                    axis.type === 'category'
-                        ? rawLabel
-                        : axis.type === 'value'
-                        ? tickValue + ''
-                        : tickValue,
-                    index
-                )
-                : textColor as string
-        });
 
         // Pack data for mouse event
         if (triggerEvent) {

src/component/axisPointer/viewHelper.ts

@@ -131,10 +131,10 @@ export function buildLabelElOption(
             borderColor: labelModel.get('borderColor') || 'transparent',
             borderRadius: labelModel.get('borderRadius'),
             borderWidth: labelModel.get('borderWidth') || 0,
-            boxShadowBlur: labelModel.get('shadowBlur'),
-            boxShadowColor: labelModel.get('shadowColor'),
-            boxShadowOffsetX: labelModel.get('shadowOffsetX'),
-            boxShadowOffsetY: labelModel.get('shadowOffsetY')
+            shadowBlur: labelModel.get('shadowBlur'),
+            shadowColor: labelModel.get('shadowColor'),
+            shadowOffsetX: labelModel.get('shadowOffsetX'),
+            shadowOffsetY: labelModel.get('shadowOffsetY')
         },
         // Lable should be over axisPointer.
         z2: 10

src/component/calendar/CalendarView.ts

@@ -345,8 +345,12 @@ class CalendarView extends ComponentView {
 
         let content = this._formatterLabel(formatter, params);
 
-        let yearText = new graphic.Text({z2: 30});
-        graphic.setTextStyle(yearText.style, null, yearLabel, {text: content}),
+        let yearText = new graphic.Text({
+            z2: 30,
+            style: graphic.createTextStyle(yearLabel, {
+                text: content
+            })
+        });
         yearText.attr(this._yearTextPositionControl(yearText, posPoints[pos], orient, pos, margin));
 
         group.add(yearText);
@@ -441,11 +445,13 @@ class CalendarView extends ComponentView {
 
             let content = this._formatterLabel(formatter, params);
 
-            let monthText = new graphic.Text({z2: 30});
-            zrUtil.extend(
-                graphic.setTextStyle(monthText.style, null, monthLabel, {text: content}),
-                this._monthTextPositionControl(tmp, isCenter, orient, pos, margin)
-            );
+            let monthText = new graphic.Text({
+                z2: 30,
+                style: zrUtil.extend(
+                    graphic.createTextStyle(monthLabel, {text: content}),
+                    this._monthTextPositionControl(tmp, isCenter, orient, pos, margin)
+                )
+            });
 
             group.add(monthText);
         }
@@ -524,12 +530,14 @@ class CalendarView extends ComponentView {
             let point = coordSys.dataToRect([tmpD.time], false).center;
             let day = i;
             day = Math.abs((i + firstDayOfWeek) % 7);
-            let weekText = new graphic.Text({z2: 30});
+            let weekText = new graphic.Text({
+                z2: 30,
+                style: zrUtil.extend(
+                    graphic.createTextStyle(dayLabel, {text: nameMap[day]}),
+                    this._weekTextPositionControl(point, orient, pos, margin, cellSize)
+                )
+            });
 
-            zrUtil.extend(
-                graphic.setTextStyle(weekText.style, null, dayLabel, {text: nameMap[day]}),
-                this._weekTextPositionControl(point, orient, pos, margin, cellSize)
-            );
             group.add(weekText);
         }
     }

src/component/legend/LegendView.ts

@@ -410,7 +410,7 @@ class LegendView extends ComponentView {
         }
 
         itemGroup.add(new graphic.Text({
-            style: graphic.setTextStyle({}, null, textStyleModel, {
+            style: graphic.createTextStyle(textStyleModel, {
                 text: content,
                 x: textX,
                 y: itemHeight / 2,

src/component/timeline/SliderTimelineView.ts

@@ -446,17 +446,17 @@ class SliderTimelineView extends TimelineView {
                 position: [tickCoord, 0],
                 rotation: layoutInfo.labelRotation - layoutInfo.rotation,
                 onclick: bind(this._changeTimeline, this, dataIndex),
-                silent: false
-            });
-            graphic.setTextStyle(textEl.style, null, normalLabelModel, {
-                text: labelItem.formattedLabel,
-                align: layoutInfo.labelAlign,
-                verticalAlign: layoutInfo.labelBaseline
+                silent: false,
+                style: graphic.createTextStyle(normalLabelModel, {
+                    text: labelItem.formattedLabel,
+                    align: layoutInfo.labelAlign,
+                    verticalAlign: layoutInfo.labelBaseline
+                })
             });
 
             group.add(textEl);
             graphic.enableHoverEmphasis(
-                textEl, graphic.setTextStyle({}, null, hoverLabelModel)
+                textEl, graphic.createTextStyle(hoverLabelModel)
             );
 
         }, this);

src/component/title.ts

@@ -150,7 +150,7 @@ class TitleView extends ComponentView {
         );
 
         let textEl = new graphic.Text({
-            style: graphic.setTextStyle({}, null, textStyleModel, {
+            style: graphic.createTextStyle(textStyleModel, {
                 text: titleModel.get('text'),
                 fill: textStyleModel.getTextColor()
             }, {disableBox: true}),
@@ -161,7 +161,7 @@ class TitleView extends ComponentView {
 
         let subText = titleModel.get('subtext');
         let subTextEl = new graphic.Text({
-            style: graphic.setTextStyle({}, null, subtextStyleModel, {
+            style: graphic.createTextStyle(subtextStyleModel, {
                 text: subText,
                 fill: subtextStyleModel.getTextColor(),
                 y: textRect.height + titleModel.get('itemGap'),

src/echarts.ts

@@ -1670,7 +1670,7 @@ class ECharts extends Eventful {
                     if (chartView.__alive) {
                         chartView.group.traverse(function (el: ECElement) {
                             // Don't switch back.
-                            el.useHoverLayer = true;
+                            // el.useHoverLayer = true;
                         });
                     }
                 });

src/export.ts

@@ -66,7 +66,7 @@ export {ecUtil as util};
 const GRAPHIC_KEYS = [
     'extendShape', 'extendPath', 'makePath', 'makeImage',
     'mergePath', 'resizePath', 'createIcon',
-    'setHoverStyle', 'setLabelStyle', 'setTextStyle', 'setText',
+    'setHoverStyle', 'setLabelStyle', 'createTextStyle',
     'getFont', 'updateProps', 'initProps', 'getTransform',
     'clipPointsByRect', 'clipRectByRect',
     'registerShape', 'getShapeClass',