From 06c5c3fa06592cab45589c81b0919e92f784f4d5 Mon Sep 17 00:00:00 2001 From: lang Date: Tue, 8 Mar 2016 15:21:37 +0800 Subject: [PATCH] Optimize multi line label vertical align --- src/chart/funnel/FunnelView.js | 2 +- src/chart/funnel/funnelLayout.js | 2 +- src/chart/gauge/GaugeView.js | 4 ++-- src/chart/helper/Line.js | 10 ++++---- src/chart/line/LineSeries.js | 8 +++---- src/chart/pie/PieView.js | 2 +- src/chart/pie/labelLayout.js | 5 ++-- src/chart/themeRiver/ThemeRiverView.js | 2 +- src/chart/treemap/TreemapView.js | 2 +- src/component/axis/AngleAxisView.js | 2 +- src/component/axis/AxisBuilder.js | 24 ++++++++++---------- src/component/dataZoom/SliderZoomView.js | 4 ++-- src/component/helper/MapDraw.js | 2 +- src/component/legend/LegendView.js | 2 +- src/component/timeline/SliderTimelineView.js | 2 +- src/component/tooltip/TooltipView.js | 2 +- src/component/visualMap/ContinuousView.js | 4 ++-- src/component/visualMap/PiecewiseView.js | 4 ++-- src/util/symbol.js | 2 +- 19 files changed, 42 insertions(+), 43 deletions(-) diff --git a/src/chart/funnel/FunnelView.js b/src/chart/funnel/FunnelView.js index da649741f..4dcc3b568 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 b4ba8b0c1..9b972e454 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 706bcd170..09c546ce8 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 92d6f1808..995bf17b1 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 f44f23516..7bbe6e933 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 3c03adeb9..737f7ca48 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 bbb52e585..04ba46663 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 23691a0eb..fabd9a272 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 4772b1ef9..86ab1a017 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 954739f7f..f6fdca175 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 b1e52c9e4..88bfecab7 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 85107835d..c13ebcf67 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 25c863fe2..b569ab87d 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 ba26a0832..77b3bbcb2 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 5486449d1..5b3f6a3b4 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 b548293e4..4c9845f12 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 149ce8b68..b9d43b002 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 f80b98bbc..1759e11ac 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 1cc04507c..d61e26625 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'; } }, -- GitLab