Optimize multi line label vertical align

src/chart/funnel/FunnelView.js

@@ -127,7 +127,7 @@ define(function (require) {
         labelText.attr({
             style: {
                 textAlign: labelLayout.textAlign,
-                textBaseline: labelLayout.textBaseline,
+                textVerticalAlign: labelLayout.verticalAlign,
                 textFont: labelLayout.font
             },
             rotation: labelLayout.rotation,

src/chart/funnel/funnelLayout.js

@@ -87,7 +87,7 @@ define(function (require) {
                 linePoints: linePoints,
                 x: textX,
                 y: textY,
-                textBaseline: 'middle',
+                verticalAlign: 'middle',
                 textAlign: textAlign,
                 inside: isLabelInside
             };

src/chart/gauge/GaugeView.js

@@ -210,7 +210,7 @@ define(function (require) {
                             y: unitY * (r - splitLineLen - 5) + cy,
                             fill: textStyleModel.getTextColor(),
                             textFont: textStyleModel.getFont(),
-                            textBaseline: unitY < -0.4 ? 'top' : (unitY > 0.4 ? 'bottom' : 'middle'),
+                            textVerticalAlign: unitY < -0.4 ? 'top' : (unitY > 0.4 ? 'bottom' : 'middle'),
                             textAlign: unitX < -0.4 ? 'left' : (unitX > 0.4 ? 'right' : 'center')
                         },
                         silent: true
@@ -357,7 +357,7 @@ define(function (require) {
                         fill: textStyleModel.getTextColor(),
                         textFont: textStyleModel.getFont(),
                         textAlign: 'center',
-                        textBaseline: 'middle'
+                        textVerticalAlign: 'middle'
                     }
                 });
                 this.group.add(text);

src/chart/helper/Line.js

@@ -100,23 +100,23 @@ define(function (require) {
 
         var textPosition;
         var textAlign;
-        var textBaseline;
+        var textVerticalAlign;
         // End
         if (label.__position === 'end') {
             textPosition = [d[0] * 5 + toPos[0], d[1] * 5 + toPos[1]];
             textAlign = d[0] > 0.8 ? 'left' : (d[0] < -0.8 ? 'right' : 'center');
-            textBaseline = d[1] > 0.8 ? 'top' : (d[1] < -0.8 ? 'bottom' : 'middle');
+            textVerticalAlign = d[1] > 0.8 ? 'top' : (d[1] < -0.8 ? 'bottom' : 'middle');
         }
         // Start
         else {
             textPosition = [-d[0] * 5 + fromPos[0], -d[1] * 5 + fromPos[1]];
             textAlign = d[0] > 0.8 ? 'right' : (d[0] < -0.8 ? 'left' : 'center');
-            textBaseline = d[1] > 0.8 ? 'bottom' : (d[1] < -0.8 ? 'top' : 'middle');
+            textVerticalAlign = d[1] > 0.8 ? 'bottom' : (d[1] < -0.8 ? 'top' : 'middle');
         }
         label.attr({
             style: {
                 // Use the user specified text align and baseline first
-                textBaseline: label.__textBaseline || textBaseline,
+                textVerticalAlign: label.__verticalAlign || textVerticalAlign,
                 textAlign: label.__textAlign || textAlign
             },
             position: textPosition
@@ -263,7 +263,7 @@ define(function (require) {
             fill: textStyleHoverModel.getTextColor()
         };
         label.__textAlign = textStyleModel.get('align');
-        label.__textBaseline = textStyleModel.get('baseline');
+        label.__verticalAlign = textStyleModel.get('baseline');
         label.__position = labelModel.get('position');
 
         graphic.setHoverStyle(

src/chart/line/LineSeries.js

@@ -39,15 +39,15 @@ define(function(require) {
                     // position: 默认自适应，水平布局为'top'，垂直布局为'right'，可选为
                     //           'inside'|'left'|'right'|'top'|'bottom'
                     // textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE
-                },
-                emphasis: {
+                }
+                // emphasis: {
                     // show: false,
-                    position: 'top'
+                    // position: 'top'
                     // formatter: 标签文本格式器，同Tooltip.formatter，不支持异步回调
                     // position: 默认自适应，水平布局为'top'，垂直布局为'right'，可选为
                     //           'inside'|'left'|'right'|'top'|'bottom'
                     // textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE
-                }
+                // }
             },
             // itemStyle: {
             //     normal: {

src/chart/pie/PieView.js

@@ -215,8 +215,8 @@ define(function (require) {
         }, seriesModel);
         labelText.attr({
             style: {
+                textVerticalAlign: labelLayout.verticalAlign,
                 textAlign: labelLayout.textAlign,
-                textBaseline: labelLayout.textBaseline,
                 textFont: labelLayout.font
             },
             rotation: labelLayout.rotation,

src/chart/pie/labelLayout.js

@@ -191,7 +191,6 @@ define(function (require) {
 
                 textAlign = isLabelInside ? 'center' : (dx > 0 ? 'left' : 'right');
             }
-            var textBaseline = 'middle';
             var font = labelModel.getModel('textStyle').getFont();
 
             var labelRotate = labelModel.get('rotate')
@@ -199,7 +198,7 @@ define(function (require) {
             var text = seriesModel.getFormattedLabel(idx, 'normal')
                         || data.getName(idx);
             var textRect = textContain.getBoundingRect(
-                text, font, textAlign, textBaseline
+                text, font, textAlign, 'top'
             );
             hasLabelRotate = !!labelRotate;
             layout.label = {
@@ -210,7 +209,7 @@ define(function (require) {
                 length2: labelLineLen2,
                 linePoints: linePoints,
                 textAlign: textAlign,
-                textBaseline: textBaseline,
+                verticalAlign: 'middle',
                 font: font,
                 rotation: labelRotate
             };

src/chart/themeRiver/ThemeRiverView.js

@@ -136,7 +136,7 @@ define(function (require) {
                         : '',
                     textFont: textStyleModel.getFont(),
                     textAlign: labelModel.get('textAlign'),
-                    textBaseline: 'middle'
+                    textVerticalAlign: 'middle'
                 });
 
                 polygon.setStyle(zrUtil.extend({

src/chart/treemap/TreemapView.js

@@ -325,7 +325,7 @@
                         textPosition: labelModel.get('position'),
                         textFill: textStyleModel.getTextColor(),
                         textAlign: textStyleModel.get('align'),
-                        textBaseline: textStyleModel.get('baseline'),
+                        textVerticalAlign: textStyleModel.get('baseline'),
                         textFont: textStyleModel.getFont()
                     });
                     group.add(content);

src/component/axis/AngleAxisView.js

@@ -128,7 +128,7 @@ define(function (require) {
                         fill: textStyleModel.getTextColor(),
                         text: labels[i],
                         textAlign: labelTextAlign,
-                        textBaseline: labelTextBaseline,
+                        textVerticalAlign: labelTextBaseline,
                         textFont: textStyleModel.getFont()
                     },
                     silent: true

src/component/axis/AxisBuilder.js

@@ -233,7 +233,7 @@ define(function (require) {
                     style: {
                         text: labels[i],
                         textAlign: itemTextStyleModel.get('align', true) || labelLayout.textAlign,
-                        textBaseline: itemTextStyleModel.get('baseline', true) || labelLayout.textBaseline,
+                        textVerticalAlign: itemTextStyleModel.get('baseline', true) || labelLayout.verticalAlign,
                         textFont: itemTextStyleModel.getFont(),
                         fill: itemTextStyleModel.getTextColor()
                     },
@@ -326,7 +326,7 @@ define(function (require) {
                     fill: textStyleModel.getTextColor()
                         || axisModel.get('axisLine.lineStyle.color'),
                     textAlign: labelLayout.textAlign,
-                    textBaseline: labelLayout.textBaseline
+                    textVerticalAlign: labelLayout.verticalAlign
                 },
                 position: pos,
                 rotation: labelLayout.rotation,
@@ -343,18 +343,18 @@ define(function (require) {
     function innerTextLayout(opt, textRotation, direction) {
         var rotationDiff = remRadian(textRotation - opt.rotation);
         var textAlign;
-        var textBaseline;
+        var verticalAlign;
 
         if (isRadianAroundZero(rotationDiff)) { // Label is parallel with axis line.
-            textBaseline = direction > 0 ? 'top' : 'bottom';
+            verticalAlign = direction > 0 ? 'top' : 'bottom';
             textAlign = 'center';
         }
         else if (isRadianAroundZero(rotationDiff - PI)) { // Label is inverse parallel with axis line.
-            textBaseline = direction > 0 ? 'bottom' : 'top';
+            verticalAlign = direction > 0 ? 'bottom' : 'top';
             textAlign = 'center';
         }
         else {
-            textBaseline = 'middle';
+            verticalAlign = 'middle';
 
             if (rotationDiff > 0 && rotationDiff < PI) {
                 textAlign = direction > 0 ? 'right' : 'left';
@@ -367,7 +367,7 @@ define(function (require) {
         return {
             rotation: rotationDiff,
             textAlign: textAlign,
-            textBaseline: textBaseline
+            verticalAlign: verticalAlign
         };
     }
 
@@ -377,21 +377,21 @@ define(function (require) {
     function endTextLayout(opt, textPosition, extent) {
         var rotationDiff = remRadian(-opt.rotation);
         var textAlign;
-        var textBaseline;
+        var verticalAlign;
         var inverse = extent[0] > extent[1];
         var onLeft = (textPosition === 'start' && !inverse)
             || (textPosition !== 'start' && inverse);
 
         if (isRadianAroundZero(rotationDiff - PI / 2)) {
-            textBaseline = onLeft ? 'bottom' : 'top';
+            verticalAlign = onLeft ? 'bottom' : 'top';
             textAlign = 'center';
         }
         else if (isRadianAroundZero(rotationDiff - PI * 1.5)) {
-            textBaseline = onLeft ? 'top' : 'bottom';
+            verticalAlign = onLeft ? 'top' : 'bottom';
             textAlign = 'center';
         }
         else {
-            textBaseline = 'middle';
+            verticalAlign = 'middle';
             if (rotationDiff < PI * 1.5 && rotationDiff > PI / 2) {
                 textAlign = onLeft ? 'left' : 'right';
             }
@@ -403,7 +403,7 @@ define(function (require) {
         return {
             rotation: rotationDiff,
             textAlign: textAlign,
-            textBaseline: textBaseline
+            verticalAlign: verticalAlign
         };
     }
 

src/component/dataZoom/SliderZoomView.js

@@ -418,7 +418,7 @@ define(function (require) {
                     invisible: true,
                     style: {
                         x: 0, y: 0, text: '',
-                        textBaseline: 'middle',
+                        textVerticalAlign: 'middle',
                         textAlign: 'center',
                         fill: textStyleModel.getTextColor(),
                         textFont: textStyleModel.getFont()
@@ -559,7 +559,7 @@ define(function (require) {
                 handleLabels[handleIndex].setStyle({
                     x: textPoint[0],
                     y: textPoint[1],
-                    textBaseline: orient === HORIZONTAL ? 'middle' : direction,
+                    textVerticalAlign: orient === HORIZONTAL ? 'middle' : direction,
                     textAlign: orient === HORIZONTAL ? direction : 'center',
                     text: labelTexts[handleIndex]
                 });

src/component/helper/MapDraw.js

@@ -187,7 +187,7 @@ define(function (require) {
                             fill: textStyleModel.getTextColor(),
                             textFont: textStyleModel.getFont(),
                             textAlign: 'center',
-                            textBaseline: 'middle'
+                            textVerticalAlign: 'middle'
                         },
                         hoverStyle: {
                             text: hoverShowLabel ? (hoverFormattedStr || region.name) : '',

src/component/legend/LegendView.js

@@ -197,7 +197,7 @@ define(function (require) {
                     fill: isSelected ? textStyleModel.getTextColor() : LEGEND_DISABLE_COLOR,
                     textFont: textStyleModel.getFont(),
                     textAlign: textAlign,
-                    textBaseline: 'middle'
+                    textVerticalAlign: 'middle'
                 }
             });
             itemGroup.add(text);

src/component/timeline/SliderTimelineView.js

@@ -423,7 +423,7 @@ define(function (require) {
                     style: {
                         text: labels[dataIndex],
                         textAlign: layoutInfo.labelAlign,
-                        textBaseline: layoutInfo.labelBaseline,
+                        textVerticalAlign: layoutInfo.labelBaseline,
                         textFont: itemTextStyleModel.getFont(),
                         fill: itemTextStyleModel.getTextColor()
                     },

src/component/tooltip/TooltipView.js

@@ -786,7 +786,7 @@ define(function (require) {
                 text = this._crossText = new graphic.Text({
                     style: {
                         textAlign: 'left',
-                        textBaseline: 'bottom'
+                        textVerticalAlign: 'bottom'
                     }
                 });
                 this.group.add(text);

src/component/visualMap/ContinuousView.js

@@ -136,7 +136,7 @@ define(function(require) {
                 style: {
                     x: position[0],
                     y: position[1],
-                    textBaseline: orient === 'horizontal' ? 'middle' : align,
+                    textVerticalAlign: orient === 'horizontal' ? 'middle' : align,
                     textAlign: orient === 'horizontal' ? align : 'center',
                     text: text,
                     textFont: textStyleModel.getFont(),
@@ -213,7 +213,7 @@ define(function(require) {
                 silent: true,
                 style: {
                     x: 0, y: 0, text: '',
-                    textBaseline: 'middle',
+                    textVerticalAlign: 'middle',
                     textFont: textStyleModel.getFont(),
                     fill: textStyleModel.getTextColor()
                 }

src/component/visualMap/PiecewiseView.js

@@ -58,7 +58,7 @@ define(function(require) {
                             x: itemAlign === 'right' ? -textGap : itemSize[0] + textGap,
                             y: itemSize[1] / 2,
                             text: item.piece.text,
-                            textBaseline: 'middle',
+                            textVerticalAlign: 'middle',
                             textAlign: itemAlign,
                             textFont: textFont,
                             fill: textFill
@@ -103,7 +103,7 @@ define(function(require) {
                 style: {
                     x: itemSize[0] / 2,
                     y: itemSize[1] / 2,
-                    textBaseline: 'middle',
+                    textVerticalAlign: 'middle',
                     textAlign: 'center',
                     text: text,
                     textFont: textStyleModel.getFont(),

src/util/symbol.js

@@ -255,7 +255,7 @@ define(function(require) {
             if (shape.symbolType === 'pin' && style.textPosition === 'inside') {
                 style.textPosition = ['50%', '40%'];
                 style.textAlign = 'center';
-                style.textBaseline = 'middle';
+                style.textVerticalAlign = 'middle';
             }
         },