diff --git a/src/chart/bar/helper.js b/src/chart/bar/helper.js index 506bb48d95aed0b05763abb88c206e495caa373a..20a0aee59274d2c694d73488fa0192154a3e856b 100644 --- a/src/chart/bar/helper.js +++ b/src/chart/bar/helper.js @@ -14,7 +14,7 @@ define(function (require) { if (labelModel.get('show')) { setLabel( normalStyle, labelModel, color, - zrUtil.retrieve( + zrUtil.retrieve2( seriesModel.getFormattedLabel(dataIndex, 'normal'), seriesModel.getRawValue(dataIndex) ), @@ -27,13 +27,9 @@ define(function (require) { if (hoverLabelModel.get('show')) { setLabel( - hoverStyle, hoverLabelModel, color, - zrUtil.retrieve( - seriesModel.getFormattedLabel(dataIndex, 'emphasis'), - seriesModel.getRawValue(dataIndex) - ), - labelPositionOutside, - true + hoverStyle, hoverLabelModel, false, + seriesModel.getFormattedLabel(dataIndex, 'emphasis'), + labelPositionOutside ); } else { @@ -41,8 +37,8 @@ define(function (require) { } }; - function setLabel(style, model, color, labelText, labelPositionOutside, isEmphasis) { - graphic.setText(style, model, color, isEmphasis); + function setLabel(style, model, defaultColor, labelText, labelPositionOutside) { + graphic.setText(style, model, defaultColor); style.text = labelText; if (style.textPosition === 'outside') { style.textPosition = labelPositionOutside; diff --git a/src/chart/custom.js b/src/chart/custom.js index 84fb20828341ac11005f278a5229f54cc5ec2105..94760dae7afe46f3abba668585ff977703d3d479 100644 --- a/src/chart/custom.js +++ b/src/chart/custom.js @@ -340,10 +340,15 @@ define(function (require) { var opacity = data.getItemVisual(dataIndexInside, 'opacity'); opacity != null && (itemStyle.opacity = opacity); - labelHelper.setTextToStyle( - data, dataIndexInside, currLabelValueDim, itemStyle, - customSeries, currLabelNormalModel, currVisualColor - ); + if (currLabelValueDim != null) { + graphicUtil.setText(itemStyle, currLabelNormalModel, currVisualColor); + itemStyle.text = currLabelNormalModel.getShallow('show') + ? zrUtil.retrieve2( + customSeries.getFormattedLabel(dataIndexInside, 'normal'), + data.get(currLabelValueDim, dataIndexInside) + ) + : null; + } extra && zrUtil.extend(itemStyle, extra); return itemStyle; @@ -360,10 +365,12 @@ define(function (require) { var itemStyle = currItemModel.getModel(ITEM_STYLE_EMPHASIS_PATH).getItemStyle(); - labelHelper.setTextToStyle( - data, dataIndexInside, currLabelValueDim, itemStyle, - customSeries, currLabelEmphasisModel, currVisualColor, true - ); + if (currLabelValueDim != null) { + graphicUtil.setText(itemStyle, currLabelEmphasisModel, false); + itemStyle.text = currLabelEmphasisModel.getShallow('show') + ? customSeries.getFormattedLabel(dataIndexInside, 'emphasis') + : null; + } extra && zrUtil.extend(itemStyle, extra); return itemStyle; diff --git a/src/chart/funnel/FunnelView.js b/src/chart/funnel/FunnelView.js index 55e23492526aff2fee041a80658ef860f940a5ad..8e52960d8dab7d7fe357f80fccc8997c5d90a89a 100644 --- a/src/chart/funnel/FunnelView.js +++ b/src/chart/funnel/FunnelView.js @@ -38,19 +38,6 @@ define(function (require) { var funnelPieceProto = FunnelPiece.prototype; - function setLabelStyle(style, data, idx, state, labelModel, specifiedStyle, isEmphasis) { - var position = labelModel.get('position'); - var isLabelInside = position === 'inside' || position === 'inner' || position === 'center'; - return graphic.setTextStyle(style, labelModel, zrUtil.extend({ - textFill: labelModel.getTextColor() - || (isLabelInside ? '#fff' : data.getItemVisual(idx, 'color')), - text: zrUtil.retrieve( - data.hostModel.getFormattedLabel(idx, state), - data.getName(idx) - ) - }, specifiedStyle), {forMerge: isEmphasis}); - } - var opacityAccessPath = ['itemStyle', 'normal', 'opacity']; funnelPieceProto.updateData = function (data, idx, firstCreate) { @@ -141,10 +128,15 @@ define(function (require) { var labelLineModel = itemModel.getModel('labelLine.normal'); var labelLineHoverModel = itemModel.getModel('labelLine.emphasis'); - setLabelStyle(labelText.style, data, idx, 'normal', labelModel, { + graphic.setTextStyle(labelText.style, labelModel, { textAlign: labelLayout.textAlign, textVerticalAlign: labelLayout.verticalAlign, - textFont: labelLayout.font + text: zrUtil.retrieve(data.hostModel.getFormattedLabel(idx, 'normal'), data.getName(idx)) + }, { + defaultTextColor: data.getItemVisual(idx, 'color'), + getDefaultTextColor: function (model, opt) { + return labelLayout.inside ? '#fff' : opt.defaultTextColor; + } }); labelText.ignore = labelText.normalIgnore = !labelModel.get('show'); @@ -159,7 +151,10 @@ define(function (require) { }); labelLine.setStyle(labelLineModel.getModel('lineStyle').getLineStyle()); - labelText.hoverStyle = setLabelStyle({}, data, idx, 'emphasis', labelHoverModel, true); + labelText.hoverStyle = graphic.setTextStyle({}, labelHoverModel, { + text: data.hostModel.getFormattedLabel(idx, 'emphasis') + }, {forMerge: true}); + labelLine.hoverStyle = labelLineHoverModel.getModel('lineStyle').getLineStyle(); }; diff --git a/src/chart/funnel/funnelLayout.js b/src/chart/funnel/funnelLayout.js index 8e9825a767e8c105a025064c755e8ce2f312bb7a..8ba2caed0f549a5b3cdc0b755719196935d7fa69 100644 --- a/src/chart/funnel/funnelLayout.js +++ b/src/chart/funnel/funnelLayout.js @@ -35,7 +35,7 @@ define(function (require) { return indices; } - function labelLayout (data) { + function labelLayout(data) { data.each(function (idx) { var itemModel = data.getItemModel(idx); var labelModel = itemModel.getModel('label.normal'); diff --git a/src/chart/heatmap/HeatmapView.js b/src/chart/heatmap/HeatmapView.js index 489b1bfe34a0065b14a7f0447a95cf7762c2245e..70beeaca606ba883b69246fba40d777141810e4b 100644 --- a/src/chart/heatmap/HeatmapView.js +++ b/src/chart/heatmap/HeatmapView.js @@ -191,14 +191,16 @@ define(function (require) { if (rawValue && rawValue[2] != null) { defaultText = rawValue[2]; } - if (labelModel.getShallow('show')) { - graphic.setText(style, labelModel); - style.text = seriesModel.getFormattedLabel(idx, 'normal') || defaultText; - } - if (hoverLabelModel.getShallow('show')) { - graphic.setText(hoverStl, hoverLabelModel, null, true); - hoverStl.text = seriesModel.getFormattedLabel(idx, 'emphasis') || defaultText; - } + + graphic.setText(style, labelModel); + style.text = labelModel.getShallow('show') + ? seriesModel.getFormattedLabel(idx, 'normal') || defaultText + : null; + + graphic.setText(hoverStl, hoverLabelModel, false); + hoverStl.text = hoverLabelModel.getShallow('show') + ? seriesModel.getFormattedLabel(idx, 'emphasis') + : null; rect.setStyle(style); diff --git a/src/chart/helper/Line.js b/src/chart/helper/Line.js index 2c93c38872234763909af3ebcbdc118e39f2c48a..ad5880d4a0d01cbefa53e1d83bc9d4ef5e4f288b 100644 --- a/src/chart/helper/Line.js +++ b/src/chart/helper/Line.js @@ -264,7 +264,7 @@ define(function (require) { } var visualColor = lineData.getItemVisual(idx, 'color'); - var visualOpacity = zrUtil.retrieve( + var visualOpacity = zrUtil.retrieve3( lineData.getItemVisual(idx, 'opacity'), lineStyle.opacity, 1 @@ -312,12 +312,11 @@ define(function (require) { // label.afterUpdate = lineAfterUpdate; if (showLabel) { var labelStyle = graphic.setTextStyle(label.style, labelModel, { - text: zrUtil.retrieve( + text: zrUtil.retrieve2( seriesModel.getFormattedLabel(idx, 'normal', lineData.dataType), defaultText - ), - textFill: labelModel.getTextColor() || defaultLabelColor - }); + ) + }, {defaultTextColor: defaultLabelColor}); label.__textAlign = labelStyle.textAlign; label.__verticalAlign = labelStyle.textVerticalAlign; @@ -327,13 +326,19 @@ define(function (require) { label.setStyle('text', null); } if (hoverShowLabel) { + // Only these properties supported in this emphasis style here. label.hoverStyle = { - text: zrUtil.retrieve( + text: zrUtil.retrieve2( seriesModel.getFormattedLabel(idx, 'emphasis', lineData.dataType), defaultText ), - textFont: hoverLabelModel.getFont(), - textFill: hoverLabelModel.getTextColor() || defaultLabelColor + textFill: hoverLabelModel.getTextColor(true), + // For merging hover style to normal style, do not use + // `hoverLabelModel.getFont()` here. + fontStyle: hoverLabelModel.getShallow('fontStyle'), + fontWeight: hoverLabelModel.getShallow('fontWeight'), + fontSize: hoverLabelModel.getShallow('fontSize'), + fontFamily: hoverLabelModel.getShallow('fontFamily') }; } else { diff --git a/src/chart/helper/Symbol.js b/src/chart/helper/Symbol.js index 6964e2147b8aba80342048d4571b944c7ef5edec..00c00304f9153319a93ece568da8531fc63af968 100644 --- a/src/chart/helper/Symbol.js +++ b/src/chart/helper/Symbol.js @@ -224,12 +224,21 @@ define(function (require) { } var valueDim = labelHelper.findLabelValueDim(data); - labelHelper.setTextToStyle( - data, idx, valueDim, elStyle, seriesModel, labelModel, color - ); - labelHelper.setTextToStyle( - data, idx, valueDim, hoverItemStyle, seriesModel, hoverLabelModel, color, true - ); + + if (valueDim != null) { + graphic.setText(elStyle, labelModel, color); + elStyle.text = labelModel.getShallow('show') + ? zrUtil.retrieve2( + seriesModel.getFormattedLabel(idx, 'normal'), + data.get(valueDim, idx) + ) + : null; + + graphic.setText(hoverItemStyle, hoverLabelModel, false); + hoverItemStyle.text = hoverLabelModel.getShallow('show') + ? seriesModel.getFormattedLabel(idx, 'emphasis') + : null; + } symbolPath.off('mouseover') .off('mouseout') diff --git a/src/chart/helper/labelHelper.js b/src/chart/helper/labelHelper.js index 23bdc6d6f064bdb2df2b1e6b09e7249a82a5d867..d7015f8f49688ecfab9bcde7a6be2deb60c7e415 100644 --- a/src/chart/helper/labelHelper.js +++ b/src/chart/helper/labelHelper.js @@ -4,7 +4,6 @@ define(function (require) { var graphic = require('../../util/graphic'); - var zrUtil = require('zrender/core/util'); var modelUtil = require('../../util/model'); var helper = {}; @@ -30,20 +29,5 @@ define(function (require) { return valueDim; }; - helper.setTextToStyle = function ( - data, dataIndex, valueDim, elStyle, seriesModel, labelModel, color, isEmphasis - ) { - if (valueDim != null && labelModel.getShallow('show')) { - graphic.setText(elStyle, labelModel, color, isEmphasis); - elStyle.text = zrUtil.retrieve( - seriesModel.getFormattedLabel(dataIndex, 'normal'), - data.get(valueDim, dataIndex) - ); - } - else { - elStyle.text = null; - } - }; - return helper; }); \ No newline at end of file diff --git a/src/chart/map/MapView.js b/src/chart/map/MapView.js index a084c844001dc13be865047f2271a9d0c84af244..8dd4dcb63904681afe68b89570b419685c1cbc60 100644 --- a/src/chart/map/MapView.js +++ b/src/chart/map/MapView.js @@ -119,15 +119,13 @@ define(function (require) { var onEmphasis = function () { graphic.setTextStyle(circle.style, hoverLabelModel, { - text: hoverLabelModel.get('show') ? labelText : null, - textFill: hoverLabelModel.getTextColor() + text: hoverLabelModel.get('show') ? labelText : null }, {isRectText: true, forMerge: true}); }; var onNormal = function () { graphic.setTextStyle(circle.style, labelModel, { - text: labelModel.get('show') ? labelText : null, - textFill: labelModel.getTextColor() + text: labelModel.get('show') ? labelText : null }, {isRectText: true}); }; diff --git a/src/chart/pie/PieView.js b/src/chart/pie/PieView.js index c2c6226e847a8909d8fbd637d0167c183e495b27..e26c33437ee7b1270273c5b824c06dae6bf012ab 100644 --- a/src/chart/pie/PieView.js +++ b/src/chart/pie/PieView.js @@ -96,18 +96,6 @@ define(function (require) { var piePieceProto = PiePiece.prototype; - function setLabelStyle(style, data, idx, state, labelModel, labelPosition, specifiedStyle, isEmphasis) { - var isLabelInside = labelPosition === 'inside' || labelPosition === 'inner'; - return graphic.setTextStyle(style, labelModel, zrUtil.extend({ - textFill: labelModel.getTextColor() - || (isLabelInside ? '#fff' : data.getItemVisual(idx, 'color')), - opacity: data.getItemVisual(idx, 'opacity'), - text: zrUtil.retrieve( - data.hostModel.getFormattedLabel(idx, state), data.getName(idx) - ) - }, specifiedStyle), {forMerge: isEmphasis}); - } - piePieceProto.updateData = function (data, idx, firstCreate) { var sector = this.childAt(0); @@ -241,12 +229,17 @@ define(function (require) { var labelHoverModel = itemModel.getModel('label.emphasis'); var labelLineModel = itemModel.getModel('labelLine.normal'); var labelLineHoverModel = itemModel.getModel('labelLine.emphasis'); - var labelPosition = labelModel.get('position') || labelHoverModel.get('position'); - setLabelStyle(labelText.style, data, idx, 'normal', labelModel, labelPosition, { + graphic.setTextStyle(labelText.style, labelModel, { textVerticalAlign: labelLayout.verticalAlign, textAlign: labelLayout.textAlign, - textFont: labelLayout.font + opacity: data.getItemVisual(idx, 'opacity'), + text: zrUtil.retrieve(data.hostModel.getFormattedLabel(idx, 'normal'), data.getName(idx)) + }, { + defaultTextColor: data.getItemVisual(idx, 'color'), + getDefaultTextColor: function (model, opt) { + return labelLayout.inside ? '#fff' : opt.defaultTextColor; + } }); labelText.ignore = labelText.normalIgnore = !labelModel.get('show'); @@ -262,7 +255,10 @@ define(function (require) { }); labelLine.setStyle(labelLineModel.getModel('lineStyle').getLineStyle()); - labelText.hoverStyle = setLabelStyle({}, data, idx, 'emphasis', labelHoverModel, labelPosition, true); + labelText.hoverStyle = graphic.setTextStyle({}, labelHoverModel, { + text: data.hostModel.getFormattedLabel(idx, 'emphasis') + }, {forMerge: true}); + labelLine.hoverStyle = labelLineHoverModel.getModel('lineStyle').getLineStyle(); var smooth = labelLineModel.get('smooth'); diff --git a/src/chart/pie/labelLayout.js b/src/chart/pie/labelLayout.js index a688931d2a3094872026cf8ee35d11245715c679..1b4a186eec3a9f056866a9760c0f4268a1d57b78 100644 --- a/src/chart/pie/labelLayout.js +++ b/src/chart/pie/labelLayout.js @@ -211,8 +211,8 @@ define(function (require) { linePoints: linePoints, textAlign: textAlign, verticalAlign: 'middle', - font: font, - rotation: labelRotate + rotation: labelRotate, + inside: isLabelInside }; // Not layout the inside label diff --git a/src/chart/radar/RadarView.js b/src/chart/radar/RadarView.js index f37aa594947ad9abe2ae265ebec9381137a2ca05..5ff37b0278b5c0e2e8d6637d1ffbb246ca314c9c 100644 --- a/src/chart/radar/RadarView.js +++ b/src/chart/radar/RadarView.js @@ -187,13 +187,10 @@ define(function (require) { : null }); - graphic.setText(symbolPath.hoverStyle, labelHoverModel, color, true); + graphic.setText(symbolPath.hoverStyle, labelHoverModel, true); symbolPath.hoverStyle.text = labelHoverModel.get('show') - ? zrUtil.retrieve( - seriesModel.getFormattedLabel( - idx, 'emphasis', null, symbolPath.__dimIdx - ), - defaultText + ? seriesModel.getFormattedLabel( + idx, 'emphasis', null, symbolPath.__dimIdx ) : null; }); diff --git a/src/chart/sankey/SankeyView.js b/src/chart/sankey/SankeyView.js index d1d43360868122e5adbb0133bd8b84c2c7902e0e..00295a021ef829c9bfd373cf99a9ceab7350d21c 100644 --- a/src/chart/sankey/SankeyView.js +++ b/src/chart/sankey/SankeyView.js @@ -135,19 +135,17 @@ define(function (require) { text: labelModel.get('show') ? seriesModel.getFormattedLabel(node.dataIndex, 'normal') || node.id // Use empty string to hide the label - : null, - textFill: labelModel.getTextColor() + : null }, {isRectText: true}); rect.setStyle('fill', node.getVisual('color')); + var hoverStyle = node.getModel('itemStyle.emphasis').getItemStyle(); graphic.setHoverStyle(rect, zrUtil.extend( - node.getModel('itemStyle.emphasis').getItemStyle(), - graphic.setTextStyle({}, labelHoverModel, { + graphic.setTextStyle(hoverStyle, labelHoverModel, { text: labelHoverModel.get('show') - ? seriesModel.getFormattedLabel(node.dataIndex, 'emphasis') || node.id - : null, - textFill: labelHoverModel.getTextColor() + ? seriesModel.getFormattedLabel(node.dataIndex, 'emphasis') + : null }, {isRectText: true, forMerge: true}) )); diff --git a/src/chart/themeRiver/ThemeRiverView.js b/src/chart/themeRiver/ThemeRiverView.js index ae27d5e21ba7fcac10aab252f968d421b1cec8ef..24eb3c344023483d45cba3b8e7a4d51dc2925bf7 100644 --- a/src/chart/themeRiver/ThemeRiverView.js +++ b/src/chart/themeRiver/ThemeRiverView.js @@ -135,7 +135,6 @@ define(function (require) { ? seriesModel.getFormattedLabel(indices[j - 1], 'normal') || data.getName(indices[j - 1]) : null, - textFill: labelModel.getTextColor(), textVerticalAlign: 'middle' }); diff --git a/src/chart/treemap/TreemapView.js b/src/chart/treemap/TreemapView.js index 8cbee971b0972b18508fcfe1c8022207903db77e..61f8daba6f1b95f8e2176b3f25579dd14745a75b 100644 --- a/src/chart/treemap/TreemapView.js +++ b/src/chart/treemap/TreemapView.js @@ -812,37 +812,32 @@ text = iconChar ? iconChar + ' ' + text : text; } - setText( - text, normalStyle, nodeModel, upperLabelRect ? PATH_UPPERLABEL_NORMAL : PATH_LABEL_NOAMAL, - visualColor, width, height, upperLabelRect + var normalLabelModel = nodeModel.getModel( + upperLabelRect ? PATH_UPPERLABEL_NORMAL : PATH_LABEL_NOAMAL ); - setText( - text, emphasisStyle, nodeModel, upperLabelRect ? PATH_UPPERLABEL_EMPHASIS : PATH_LABEL_EMPHASIS, - visualColor, width, height, upperLabelRect, true - ); - } - - function setText(text, style, nodeModel, labelPath, visualColor, width, height, upperLabelRect, isEmphasis) { - var labelModel = nodeModel.getModel(labelPath); + graphic.setText(normalStyle, normalLabelModel, visualColor); - graphic.setText(style, labelModel, visualColor, isEmphasis); + upperLabelRect && (normalStyle.textPositionRect = zrUtil.clone(upperLabelRect)); - upperLabelRect && (style.textPositionRect = zrUtil.clone(upperLabelRect)); - - var textRect = labelModel.getTextRect(text); - if (!labelModel.getShallow('show') || textRect.height > height) { - style.text = null; + var textRect = normalLabelModel.getTextRect(text); + if (!normalLabelModel.getShallow('show') || textRect.height > height) { + normalStyle.text = null; } else if (textRect.width > width) { - style.text = labelModel.get('ellipsis') - ? labelModel.truncateText( + normalStyle.text = normalLabelModel.get('ellipsis') + ? normalLabelModel.truncateText( text, width, null, {minChar: 2} ) : null; } else { - style.text = text; + normalStyle.text = text; } + + var emphasisLabelModel = nodeModel.getModel( + upperLabelRect ? PATH_UPPERLABEL_EMPHASIS : PATH_UPPERLABEL_EMPHASIS + ); + graphic.setText(emphasisStyle, emphasisLabelModel, false); } function giveGraphic(storageName, Ctor, depth, z) { diff --git a/src/component/calendar/CalendarView.js b/src/component/calendar/CalendarView.js index 100f3f9a059e42f687f5768517b34d89dcac0dbe..903470a5be0c3bd0cf75067baddc960643cfd3c7 100644 --- a/src/component/calendar/CalendarView.js +++ b/src/component/calendar/CalendarView.js @@ -315,10 +315,7 @@ define(function (require) { this._yearTextPositionControl(posPoints[pos], orient, pos, margin) ) ); - graphic.setTextStyle(yearText.style, yearLabel, { - text: content, - textFill: yearLabel.getTextColor() - }); + graphic.setTextStyle(yearText.style, yearLabel, {text: content}); group.add(yearText); }, @@ -408,10 +405,7 @@ define(function (require) { var monthText = new graphic.Text({z2: 30}); zrUtil.extend( - graphic.setTextStyle(monthText.style, monthLabel, { - text: content, - textFill: monthLabel.getTextColor() - }), + graphic.setTextStyle(monthText.style, monthLabel, {text: content}), this._monthTextPositionControl(tmp, isCenter, orient, pos, margin) ); @@ -484,10 +478,7 @@ define(function (require) { var weekText = new graphic.Text({z2: 30}); zrUtil.extend( - graphic.setTextStyle(weekText.style, dayLabel, { - text: nameMap[day], - textFill: dayLabel.getTextColor() - }), + graphic.setTextStyle(weekText.style, dayLabel, {text: nameMap[day]}), this._weekTextPositionControl(point, orient, pos, margin, cellSize) ); group.add(weekText); diff --git a/src/component/helper/MapDraw.js b/src/component/helper/MapDraw.js index 882adc6d8f86fc18fd2f6db59d3ab252f41cce74..daa1ee62983cefe3adc18253fd8da3c40b5183b0 100644 --- a/src/component/helper/MapDraw.js +++ b/src/component/helper/MapDraw.js @@ -247,14 +247,12 @@ define(function (require) { graphic.setTextStyle(textEl.style, labelModel, { text: showLabel ? (formattedStr || region.name) : null, - textFill: labelModel.getTextColor(), textAlign: 'center', textVerticalAlign: 'middle' }); graphic.setTextStyle(textEl.hoverStyle = {}, hoverLabelModel, { - text: hoverShowLabel ? (hoverFormattedStr || region.name) : null, - textFill: hoverLabelModel.getTextColor() + text: hoverShowLabel ? (hoverFormattedStr || region.name) : null }, {forMerge: true}); regionGroup.add(textEl); diff --git a/src/component/marker/MarkAreaView.js b/src/component/marker/MarkAreaView.js index 27b5a768595f54bb0ec4dbd0245c0835bbfb851c..2325bbdbe0ffcdfc71b4df80d36543bdcc31e3f3 100644 --- a/src/component/marker/MarkAreaView.js +++ b/src/component/marker/MarkAreaView.js @@ -226,27 +226,18 @@ define(function (require) { var defaultValue = areaData.getName(idx) || ''; var textColor = color || polygon.style.fill; - if (labelModel.getShallow('show')) { - graphic.setText(polygon.style, labelModel, textColor); - polygon.style.text = zrUtil.retrieve( + graphic.setText(polygon.style, labelModel, textColor); + polygon.style.text = labelModel.getShallow('show') + ? zrUtil.retrieve( maModel.getFormattedLabel(idx, 'normal'), defaultValue - ); - } - else { - polygon.style.text = null; - } + ) + : null; - if (labelHoverModel.getShallow('show')) { - graphic.setTextStyle(polygon.hoverStyle, labelHoverModel, textColor, true); - polygon.hoverStyle.text = zrUtil.retrieve( - maModel.getFormattedLabel(idx, 'emphasis'), - defaultValue - ); - } - else { - polygon.hoverStyle.text = null; - } + graphic.setText(polygon.hoverStyle, labelHoverModel, false); + polygon.hoverStyle.text = labelHoverModel.getShallow('show') + ? maModel.getFormattedLabel(idx, 'emphasis') + : null; graphic.setHoverStyle(polygon, {}); diff --git a/src/component/timeline/SliderTimelineView.js b/src/component/timeline/SliderTimelineView.js index 686865695e6b0206e1975cdb2fed65ac954f311d..48ce1011bea70737540cefe1ccb44639ea2e5df0 100644 --- a/src/component/timeline/SliderTimelineView.js +++ b/src/component/timeline/SliderTimelineView.js @@ -403,17 +403,16 @@ define(function (require) { var hoverLabelModel = itemModel.getModel('label.emphasis'); var tickCoord = axis.dataToCoord(tick); var textEl = new graphic.Text({ - style: graphic.setTextStyle({}, normalLabelModel, { - text: labels[dataIndex], - textAlign: layoutInfo.labelAlign, - textVerticalAlign: layoutInfo.labelBaseline, - textFill: normalLabelModel.getTextColor() - }), position: [tickCoord, 0], rotation: layoutInfo.labelRotation - layoutInfo.rotation, onclick: bind(this._changeTimeline, this, dataIndex), silent: false }); + graphic.setTextStyle(textEl.style, normalLabelModel, { + text: labels[dataIndex], + textAlign: layoutInfo.labelAlign, + textVerticalAlign: layoutInfo.labelBaseline + }); group.add(textEl); graphic.setHoverStyle( diff --git a/src/component/toolbox/ToolboxView.js b/src/component/toolbox/ToolboxView.js index 2ddd7f55148cff135a6e3a94b1ab7dd3872899fa..10491a322ca74518ab59ab746710db4a2326bf35 100644 --- a/src/component/toolbox/ToolboxView.js +++ b/src/component/toolbox/ToolboxView.js @@ -133,7 +133,7 @@ define(function (require) { y: -itemSize / 2, width: itemSize, height: itemSize - } + } ); path.setStyle(iconStyleModel.getModel('normal').getItemStyle()); path.hoverStyle = iconStyleModel.getModel('emphasis').getItemStyle(); @@ -181,7 +181,7 @@ define(function (require) { // May be background element if (hoverStyle && titleText) { var rect = textContain.getBoundingRect( - titleText, hoverStyle.font + titleText, textContain.makeFont(hoverStyle) ); var offsetX = icon.position[0] + group.position[0]; var offsetY = icon.position[1] + group.position[1] + itemSize; diff --git a/src/model/mixin/textStyle.js b/src/model/mixin/textStyle.js index cec72aa618f3364a5aaa5c463a9d2b79324d9984..4c8509cf094a3a65718b0eac7e43d6da2bd457cb 100644 --- a/src/model/mixin/textStyle.js +++ b/src/model/mixin/textStyle.js @@ -8,12 +8,13 @@ define(function (require) { return { /** * Get color property or get color from option.textStyle.color + * @param {boolean} [noDefault] * @return {string} */ - getTextColor: function () { + getTextColor: function (noDefault) { var ecModel = this.ecModel; return this.getShallow('color') - || (ecModel && ecModel.get(PATH_COLOR)); + || (!noDefault && ecModel && ecModel.get(PATH_COLOR)); }, /** diff --git a/src/util/graphic.js b/src/util/graphic.js index 78bf8f02522db87e8318021f1d3aa6ab5879597d..6703eac42c2ea86b5d3f45154ac80c617abc3962 100644 --- a/src/util/graphic.js +++ b/src/util/graphic.js @@ -16,6 +16,8 @@ define(function(require) { var mathMax = Math.max; var mathMin = Math.min; + var EMPTY_OBJ = {}; + var graphic = {}; graphic.Group = require('zrender/container/Group'); @@ -265,10 +267,10 @@ define(function(require) { // }, // where properties of `emphasis` may not appear in `normal`. We previously use // module:echarts/util/model#defaultEmphasis to merge `normal` to `emphasis`. - // But consider rich text, it is impossible to cover all properties in merge. - // So we use merge mode when setting style here, where only properties that - // is not `null/undefined` can be set. The disadventage: null/undefined can not - // be used to remove style any more in `emphasis`. + // But consider rich text and setOption in merge mode, it is impossible to cover + // all properties in merge. So we use merge mode when setting style here, where + // only properties that is not `null/undefined` can be set. The disadventage: + // null/undefined can not be used to remove style any more in `emphasis`. el.style.extendFrom(el.__hoverStl); el.dirty(false); el.z2 += 1; @@ -415,56 +417,68 @@ define(function(require) { /** * Set basic textStyle properties. - * @param {Object|module:zrender/graphic/Style} style + * @param {Object|module:zrender/graphic/Style} textStyle * @param {module:echarts/model/Model} model * @param {Object} [specifiedTextStyle] Can be overrided by settings in model. * @param {Object} [opt] See `opt` of `setTextStyleCommon`. */ - graphic.setTextStyle = function (style, textStyleModel, specifiedTextStyle, opt) { - setTextStyleCommon(style, textStyleModel, opt); - specifiedTextStyle && zrUtil.extend(style, specifiedTextStyle); - style.dirty && style.dirty(); + graphic.setTextStyle = function (textStyle, textStyleModel, specifiedTextStyle, opt) { + setTextStyleCommon(textStyle, textStyleModel, opt); + specifiedTextStyle && zrUtil.extend(textStyle, specifiedTextStyle); + textStyle.host && textStyle.host.dirty && textStyle.host.dirty(false); - return style; + return textStyle; }; /** * Set text option in the style * @param {Object} textStyle * @param {module:echarts/model/Model} labelModel - * @param {string} color - * @param {boolean} isEmphasis + * @param {string|boolean} defaultColor Default text color. + * If set as false, it will be processed as a emphasis style. */ - graphic.setText = function (textStyle, labelModel, color, isEmphasis) { - setTextStyleCommon(textStyle, labelModel, { - isRectText: true, - forMerge: isEmphasis, - defaultTextColor: color - }); + graphic.setText = function (textStyle, labelModel, defaultColor) { + var opt = {isRectText: true}; + if (defaultColor === false) { + opt.forMerge = true; + } + else { + opt.defaultTextColor = defaultColor; + opt.getDefaultTextColor = getDefaultTextColorForSetText; + } + setTextStyleCommon(textStyle, labelModel, opt); + textStyle.host && textStyle.host.dirty && textStyle.host.dirty(false); }; + function getDefaultTextColorForSetText(labelModel, opt, textPosition) { + return (textPosition && textPosition.indexOf('inside') >= 0) + ? '#fff' + : opt.defaultTextColor; + } + /** * { * disableBox: boolean, Whether diable drawing box of block (outer most). * isRectText: boolean, * autoColor: string, specify a color when color is 'auto', * for textFill, textStroke, textBackgroundColor, and textBorderColor, - * defaultTextColor: defaultTextColor, + * defaultTextColor: string, + * getDefaultTextColor: function, higher priority than `defaultTextColor`. * forceRich: boolean, * forMerge: boolean * } */ function setTextStyleCommon(textStyle, textStyleModel, opt) { // Consider there will be abnormal when merge hover style to normal style if given default value. - var forMerge = opt && opt.forMerge; + opt = opt || EMPTY_OBJ; - if (opt && opt.isRectText) { - textStyle.textPosition = textStyleModel.getShallow('position') || (forMerge ? null : 'inside'); + if (opt.isRectText) { + textStyle.textPosition = textStyleModel.getShallow('position') || (opt.forMerge ? null : 'inside'); textStyle.textOffset = textStyleModel.getShallow('offset'); var labelRotate = textStyleModel.getShallow('rotate'); labelRotate != null && (labelRotate *= Math.PI / 180); textStyle.textRotation = labelRotate; - textStyle.textDistance = textStyleModel.getShallow('distance') || (forMerge ? null : 5); + textStyle.textDistance = textStyleModel.getShallow('distance') || (opt.forMerge ? null : 5); } var ecModel = textStyleModel.ecModel; @@ -487,29 +501,38 @@ define(function(require) { setTokenTextStyle(textStyle, textStyleModel, globalTextStyle, opt, true); - if (opt && opt.forceRich && !opt.textStyle) { + if (opt.forceRich && !opt.textStyle) { opt.textStyle = {}; } return textStyle; } - function setTokenTextStyle(textStyle, textStyleModel, globalTextStyle, opt, isBlock) { + function setTokenTextStyle(textStyle, textStyleModel, defaultTextStyle, opt, isBlock) { var textPosition = textStyle.textPosition; - textStyle.textFill = getAutoColor(textStyleModel.getTextColor(), opt) || ( - (opt && opt.forMerge) + // In merge mode, default value should not be given. + defaultTextStyle = !opt.forMerge && defaultTextStyle || EMPTY_OBJ; + + textStyle.textFill = getAutoColor(textStyleModel.getTextColor(opt.forMerge), opt) || ( + opt.forMerge ? null - : (textPosition && textPosition.indexOf('inside') >= 0) - ? '#fff' - : (opt && opt.defaultTextColor) + : opt.getDefaultTextColor + ? opt.getDefaultTextColor(textStyleModel, opt, textPosition) + : opt.defaultTextColor ); textStyle.textStroke = getAutoColor( - textStyleModel.getShallow('textBorderColor') - || (globalTextStyle && globalTextStyle.textBorderColor) + textStyleModel.getShallow('textBorderColor') || defaultTextStyle.textBorderColor ); textStyle.textLineWidth = textStyleModel.getShallow('textBorderWidth'); - textStyle.textFont = textStyleModel.getFont(); + + // Do not use `getFont` here, because merge should be supported, where + // part of these properties may be changed in emphasis style, and the + // others should remain their original value got from normal style. + textStyle.fontStyle = textStyleModel.getShallow('fontStyle') || defaultTextStyle.fontStyle; + textStyle.fontWeight = textStyleModel.getShallow('fontWeight') || defaultTextStyle.fontWeight; + textStyle.fontSize = textStyleModel.getShallow('fontSize') || defaultTextStyle.fontSize; + textStyle.fontFamily = textStyleModel.getShallow('fontFamily') || defaultTextStyle.fontFamily; textStyle.textAlign = textStyleModel.getShallow('align'); textStyle.textVerticalAlign = textStyleModel.getShallow('verticalAlign') @@ -520,7 +543,7 @@ define(function(require) { textStyle.textHeight = textStyleModel.getShallow('height'); textStyle.textTag = textStyleModel.getShallow('tag'); - if (!opt || !isBlock || !opt.disableBox) { + if (!isBlock || !opt.disableBox) { textStyle.textBackgroundColor = getAutoColor(textStyleModel.getShallow('backgroundColor'), opt); textStyle.textPadding = textStyleModel.getShallow('padding'); textStyle.textBorderColor = getAutoColor(textStyleModel.getShallow('borderColor'), opt); @@ -534,13 +557,13 @@ define(function(require) { } textStyle.textShadowColor = textStyleModel.getShallow('textShadowColor') - || (globalTextStyle && globalTextStyle.textShadowColor); + || defaultTextStyle.textShadowColor; textStyle.textShadowBlur = textStyleModel.getShallow('textShadowBlur') - || (globalTextStyle && globalTextStyle.textShadowBlur); + || defaultTextStyle.textShadowBlur; textStyle.textShadowOffsetX = textStyleModel.getShallow('textShadowOffsetX') - || (globalTextStyle && globalTextStyle.textShadowOffsetX); + || defaultTextStyle.textShadowOffsetX; textStyle.textShadowOffsetY = textStyleModel.getShallow('textShadowOffsetY') - || (globalTextStyle && globalTextStyle.textShadowOffsetY); + || defaultTextStyle.textShadowOffsetY; } function getAutoColor(color, opt) { @@ -548,7 +571,8 @@ define(function(require) { } graphic.getFont = function (opt, ecModel) { - var gTextStyleModel = ecModel && ecModel.getModel('textStyle'); + // ecModel or default text style model. + var gTextStyleModel = ecModel || ecModel.getModel('textStyle'); return [ // FIXME in node-canvas fontWeight is before fontStyle opt.fontStyle || gTextStyleModel && gTextStyleModel.getShallow('fontStyle') || '',