refact: put label as textContent in pie and funnel. fix inside text color issue.

src/chart/funnel/FunnelView.ts

@@ -46,7 +46,7 @@ class FunnelPiece extends graphic.Group {
         let text = new graphic.Text();
         this.add(polygon);
         this.add(labelLine);
-        this.add(text);
+        polygon.setTextContent(text);
 
         this.updateData(data, idx, true);
     }
@@ -123,9 +123,9 @@ class FunnelPiece extends graphic.Group {
     }
 
     _updateLabel(data: List, idx: number) {
-
+        let polygon = this.childAt(0);
         let labelLine = this.childAt(1) as graphic.Polyline;
-        let labelText = this.childAt(2) as graphic.Text;
+        let labelText = polygon.getTextContent();
 
         let seriesModel = data.hostModel;
         let itemModel = data.getItemModel<FunnelDataItemOption>(idx);
@@ -144,9 +144,7 @@ class FunnelPiece extends graphic.Group {
             {
                 labelFetcher: data.hostModel as FunnelSeriesModel,
                 labelDataIndex: idx,
-                defaultText: data.getName(idx),
-                autoColor: visualColor,
-                useInsideStyle: !!labelLayout.inside
+                defaultText: data.getName(idx)
             },
             {
                 align: labelLayout.textAlign,
@@ -154,6 +152,14 @@ class FunnelPiece extends graphic.Group {
             }
         );
 
+        polygon.setTextConfig({
+            local: true,
+            inside: !!labelLayout.inside,
+            insideStroke: visualColor,
+            insideFill: 'auto',
+            outsideFill: visualColor
+        });
+
         graphic.updateProps(labelLine, {
             shape: {
                 points: labelLayout.linePoints || labelLayout.linePoints
@@ -168,6 +174,7 @@ class FunnelPiece extends graphic.Group {
                 y: labelLayout.y
             }
         }, seriesModel, idx);
+
         labelText.attr({
             rotation: labelLayout.rotation,
             origin: [labelLayout.x, labelLayout.y],

src/chart/pie/PieView.ts

@@ -29,7 +29,6 @@ import List from '../../data/List';
 import PieSeriesModel, {PieDataItemOption} from './PieSeries';
 import { Dictionary } from 'zrender/src/core/types';
 import Element from 'zrender/src/Element';
-import Displayable from 'zrender/src/graphic/Displayable';
 
 function updateDataSelected(
     this: PiePiece,
@@ -86,11 +85,6 @@ function toggleItemSelected(
         : el.attr('position', position);
 }
 
-interface PieceElementExtension extends Displayable {
-    hoverIgnore?: boolean
-    normalIgnore?: boolean
-};
-
 /**
  * Piece of pie including Sector, Label, LabelLine
  */
@@ -107,15 +101,14 @@ class PiePiece extends graphic.Group {
         let text = new graphic.Text();
         this.add(sector);
         this.add(polyline);
-        this.add(text);
+
+        sector.setTextContent(text);
 
         this.updateData(data, idx, true);
     }
 
     updateData(data: List, idx: number, firstCreate?: boolean): void {
         let sector = this.childAt(0) as graphic.Sector;
-        let labelLine = this.childAt(1) as PieceElementExtension;
-        let labelText = this.childAt(2) as PieceElementExtension;
 
         let seriesModel = data.hostModel as PieSeriesModel;
         let itemModel = data.getItemModel<PieDataItemOption>(idx);
@@ -197,8 +190,6 @@ class PiePiece extends graphic.Group {
         (this as ECElement).highDownOnUpdate = (itemModel.get('hoverAnimation') && seriesModel.isAnimationEnabled())
             ? function (fromState: DisplayState, toState: DisplayState): void {
                 if (toState === 'emphasis') {
-                    labelLine.ignore = labelLine.hoverIgnore;
-                    labelText.ignore = labelText.hoverIgnore;
 
                     // Sector may has animation of updating data. Force to move to the last frame
                     // Or it may stopped on the wrong shape
@@ -210,9 +201,6 @@ class PiePiece extends graphic.Group {
                     }, { duration: 300, easing: 'elasticOut' });
                 }
                 else {
-                    labelLine.ignore = labelLine.normalIgnore;
-                    labelText.ignore = labelText.normalIgnore;
-
                     sector.stopAnimation(true);
                     sector.animateTo({
                         shape: {
@@ -227,19 +215,22 @@ class PiePiece extends graphic.Group {
     }
 
     private _updateLabel(data: List, idx: number, withAnimation: boolean): void {
-
-        let labelLine = this.childAt(1) as (PieceElementExtension & graphic.Polyline);
-        let labelText = this.childAt(2) as (PieceElementExtension & graphic.Text);
-
-        let seriesModel = data.hostModel;
-        let itemModel = data.getItemModel<PieDataItemOption>(idx);
-        let layout = data.getItemLayout(idx);
-        let labelLayout = layout.label;
+        const sector = this.childAt(0);
+        const labelLine = this.childAt(1) as graphic.Polyline;
+        const labelText = sector.getTextContent() as graphic.Text;
+
+        const seriesModel = data.hostModel;
+        const itemModel = data.getItemModel<PieDataItemOption>(idx);
+        const layout = data.getItemLayout(idx);
+        const labelLayout = layout.label;
         // let visualColor = data.getItemVisual(idx, 'color');
 
+        const labelTextEmphasisState = labelText.ensureState('emphasis');
+        const labelLineEmphasisState = labelLine.ensureState('emphasis');
+
         if (!labelLayout || isNaN(labelLayout.x) || isNaN(labelLayout.y)) {
-            labelText.ignore = labelText.normalIgnore = labelText.hoverIgnore =
-            labelLine.ignore = labelLine.normalIgnore = labelLine.hoverIgnore = true;
+            labelText.ignore = labelTextEmphasisState.ignore = true;
+            labelLine.ignore = labelLineEmphasisState.ignore = true;
             return;
         }
 
@@ -263,9 +254,7 @@ class PiePiece extends graphic.Group {
             {
                 labelFetcher: data.hostModel as PieSeriesModel,
                 labelDataIndex: idx,
-                defaultText: labelLayout.text,
-                autoColor: visualColor,
-                useInsideStyle: !!labelLayout.inside
+                defaultText: labelLayout.text
             },
             {
                 align: labelLayout.textAlign,
@@ -274,6 +263,15 @@ class PiePiece extends graphic.Group {
             }
         );
 
+        // Set textConfig on sector.
+        sector.setTextConfig({
+            local: true,
+            inside: !!labelLayout.inside,
+            insideStroke: visualColor,
+            insideFill: 'auto',
+            outsideFill: visualColor
+        });
+
         let targetTextStyle = {
             x: labelLayout.x,
             y: labelLayout.y
@@ -304,11 +302,11 @@ class PiePiece extends graphic.Group {
             z2: 10
         });
 
-        labelText.ignore = labelText.normalIgnore = !labelModel.get('show');
-        labelText.hoverIgnore = !labelHoverModel.get('show');
+        labelText.ignore = !labelModel.get('show');
+        labelTextEmphasisState.ignore = !labelHoverModel.get('show');
 
-        labelLine.ignore = labelLine.normalIgnore = !labelLineModel.get('show');
-        labelLine.hoverIgnore = !labelLineHoverModel.get('show');
+        labelLine.ignore = !labelLineModel.get('show');
+        labelLineEmphasisState.ignore = !labelLineHoverModel.get('show');
 
         // Default use item visual color
         labelLine.setStyle({

src/chart/sunburst/SunburstPiece.ts

@@ -52,16 +52,19 @@ class SunburstPiece extends graphic.Group {
         super();
 
         let sector = new graphic.Sector({
-            z2: DEFAULT_SECTOR_Z
+            z2: DEFAULT_SECTOR_Z,
+            textConfig: {
+                inside: true
+            }
         });
+        this.add(sector);
         graphic.getECData(sector).seriesIndex = seriesModel.seriesIndex;
 
         let text = new graphic.Text({
             z2: DEFAULT_TEXT_Z,
             silent: node.getModel<SunburstSeriesNodeOption>().get(['label', 'silent'])
         });
-        this.add(sector);
-        this.add(text);
+        sector.setTextContent(text);
 
         this.updateData(true, node, 'normal', seriesModel, ecModel);
 
@@ -238,16 +241,22 @@ class SunburstPiece extends graphic.Group {
             text = '';
         }
 
-        let label = this.childAt(1) as graphic.Text;
+        let sector = this.childAt(0);
+        let label = sector.getTextContent();
 
         graphic.setLabelStyle(
             label, normalModel, labelHoverModel,
             {
                 defaultText: labelModel.getShallow('show') ? text : null,
-                autoColor: visualColor,
-                useInsideStyle: true
+                autoColor: visualColor
             }
         );
+        sector.setTextConfig({
+            inside: true,
+            insideStroke: visualColor,
+            insideFill: 'auto',
+            outsideFill: visualColor
+        });
 
         let midAngle = (layout.startAngle + layout.endAngle) / 2;
         let dx = Math.cos(midAngle);

src/component/helper/MapDraw.ts

@@ -274,8 +274,7 @@ class MapDraw {
                     {
                         labelFetcher: labelFetcher,
                         labelDataIndex: query,
-                        defaultText: region.name,
-                        useInsideStyle: false
+                        defaultText: region.name
                     },
                     {
                         align: 'center',

src/util/graphic.ts

@@ -114,14 +114,6 @@ type TextCommonParams = {
      * for textFill, textStroke, textBackgroundColor, and textBorderColor. If autoColor specified, it is used as default textFill.
      */
     autoColor?: ColorString
-    /**
-     * `true`: Use inside style (textFill, textStroke, textStrokeWidth)
-     *     if `textFill` is not specified.
-     * `false`: Do not use inside style.
-     * `null/undefined`: use inside style if `isRectText` is true and
-     *     `textFill` is not specified and textPosition contains `'inside'`.
-     */
-    useInsideStyle?: boolean
 
     forceRich?: boolean
 
@@ -592,7 +584,7 @@ interface SetLabelStyleOpt<LDI> extends TextCommonParams {
  * If target is other Element. It will create or reuse RichText which is attached on the target.
  * And create a new style object.
  *
- * NOTICE: Because the style on RichText will be replaced with new.
+ * NOTICE: Because the style on RichText will be replaced with new(only x, y are keeped).
  * So please use the style on RichText after use this method.
  */
 export function setLabelStyle<LDI>(
@@ -692,6 +684,14 @@ export function setLabelStyle<LDI>(
         normalStyle.text = normalStyleText;
         emphasisState.style.text = emphasisStyleText;
 
+        // Keep x and y
+        if (richText.style.x != null) {
+            normalStyle.x = richText.style.x;
+        }
+        if (richText.style.y != null) {
+            normalStyle.y = richText.style.y;
+        }
+
         // Always create new style.
         richText.useStyle(normalStyle);