diff --git a/src/chart/funnel/FunnelView.js b/src/chart/funnel/FunnelView.js index da649741fdfdb3b0876c2da79b262758b92b06da..4dcc3b568bc615797b565d3209e8c96cdef9cdd9 100644 --- a/src/chart/funnel/FunnelView.js +++ b/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, diff --git a/src/chart/funnel/funnelLayout.js b/src/chart/funnel/funnelLayout.js index b4ba8b0c12ecc6b3e91b1c9f2daf3e57499bd871..9b972e4540d1d327c7a9268a6c82260797d00042 100644 --- a/src/chart/funnel/funnelLayout.js +++ b/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 }; diff --git a/src/chart/gauge/GaugeView.js b/src/chart/gauge/GaugeView.js index 706bcd17011a3a185d0b57815add82e2a23dc62b..09c546ce8578b637270ac44be6319947aa374821 100644 --- a/src/chart/gauge/GaugeView.js +++ b/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); diff --git a/src/chart/helper/Line.js b/src/chart/helper/Line.js index 92d6f1808e8f4a02fb4b060c57bcc1fffb64cea0..995bf17b19f0ce57d69b9a0ab1311c658ef1515a 100644 --- a/src/chart/helper/Line.js +++ b/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( diff --git a/src/chart/line/LineSeries.js b/src/chart/line/LineSeries.js index f44f235162cb0ca88746631125caa846835bbc5a..7bbe6e933e443026645bff330438512ccf4559a8 100644 --- a/src/chart/line/LineSeries.js +++ b/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: { diff --git a/src/chart/pie/PieView.js b/src/chart/pie/PieView.js index 3c03adeb973649d48f7d460e57a9a5f24795d5dc..737f7ca4821da7268f98d735fd5a9c92ad13e8f0 100644 --- a/src/chart/pie/PieView.js +++ b/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, diff --git a/src/chart/pie/labelLayout.js b/src/chart/pie/labelLayout.js index bbb52e585d8d99beb4f8acc725082310d024599b..04ba466635340ab2c1b2f4cb03a933ac09ff08fc 100644 --- a/src/chart/pie/labelLayout.js +++ b/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 }; diff --git a/src/chart/themeRiver/ThemeRiverView.js b/src/chart/themeRiver/ThemeRiverView.js index 23691a0ebdc3a6d86144c44399a66e0c94eab9e2..fabd9a2723ecbceeb6f2f76d7c749c40cb015385 100644 --- a/src/chart/themeRiver/ThemeRiverView.js +++ b/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({ diff --git a/src/chart/treemap/TreemapView.js b/src/chart/treemap/TreemapView.js index 4772b1ef903876eb3933bc8d5609f4eb51f087f0..86ab1a0176950370d2a69c07702030e2784cb553 100644 --- a/src/chart/treemap/TreemapView.js +++ b/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); diff --git a/src/component/axis/AngleAxisView.js b/src/component/axis/AngleAxisView.js index 954739f7fb21f00bf9d2f383fe4f3ef401f9324b..f6fdca1753e963f06f8e52bcadb99090cd1fb2a0 100644 --- a/src/component/axis/AngleAxisView.js +++ b/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 diff --git a/src/component/axis/AxisBuilder.js b/src/component/axis/AxisBuilder.js index b1e52c9e41671f9ee4e43321eadc05655c5c97d6..88bfecab750d6a9f7c1e62b862d2a8464e0d6a54 100644 --- a/src/component/axis/AxisBuilder.js +++ b/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 }; } diff --git a/src/component/dataZoom/SliderZoomView.js b/src/component/dataZoom/SliderZoomView.js index 85107835de0915f2092810bfbc3172fc0d7680cf..c13ebcf67dc00d10ad2cadcf859de1a27b1a2739 100644 --- a/src/component/dataZoom/SliderZoomView.js +++ b/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] }); diff --git a/src/component/helper/MapDraw.js b/src/component/helper/MapDraw.js index 25c863fe2d201e3fcdc61b687af6e42adfd94293..b569ab87d075a9ab9d31fbd38f73eea9a4a9db8e 100644 --- a/src/component/helper/MapDraw.js +++ b/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) : '', diff --git a/src/component/legend/LegendView.js b/src/component/legend/LegendView.js index ba26a08328422ac20997716352d7f3492b449260..77b3bbcb254c9064b5d65741b1519d3238896a1f 100644 --- a/src/component/legend/LegendView.js +++ b/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); diff --git a/src/component/timeline/SliderTimelineView.js b/src/component/timeline/SliderTimelineView.js index 5486449d100fb34a957c431bb884c2e69aece8be..5b3f6a3b4ecac0343f5d852305da9ba979e97de2 100644 --- a/src/component/timeline/SliderTimelineView.js +++ b/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() }, diff --git a/src/component/tooltip/TooltipView.js b/src/component/tooltip/TooltipView.js index b548293e402f263c08192f895c7b1d88544f9bfb..4c9845f128b871cb2e6e403c604117f8e60634f0 100644 --- a/src/component/tooltip/TooltipView.js +++ b/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); diff --git a/src/component/visualMap/ContinuousView.js b/src/component/visualMap/ContinuousView.js index 149ce8b6823b0411c47abcaf1c58c6d085bb07ff..b9d43b00236dbf2a69f3e97342d7c9d0ba06faca 100644 --- a/src/component/visualMap/ContinuousView.js +++ b/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() } diff --git a/src/component/visualMap/PiecewiseView.js b/src/component/visualMap/PiecewiseView.js index f80b98bbc6443b65e689514674baa6120c0e6aa4..1759e11acce5cee2f0cb83bbf19d3427c54d63c0 100644 --- a/src/component/visualMap/PiecewiseView.js +++ b/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(), diff --git a/src/util/symbol.js b/src/util/symbol.js index 1cc04507c55e58e022517e2453dc498acc6c61d1..d61e26625a9be7203e736f9f529946a9ecd1f30d 100644 --- a/src/util/symbol.js +++ b/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'; } },