diff --git a/src/chart/map/MapSeries.js b/src/chart/map/MapSeries.js index f0a0a6c848313be79f439cf6806869cede823fad..f2376da5058e81d492ec4ecd0baece89e760f306 100644 --- a/src/chart/map/MapSeries.js +++ b/src/chart/map/MapSeries.js @@ -131,7 +131,7 @@ var MapSeries = SeriesModel.extend({ * * @param {number} dataIndex */ - formatTooltip: function (dataIndex) { + formatTooltip: function (dataIndex, multipleSeries, dataType, renderMode) { // FIXME orignalData and data is a bit confusing var data = this.getData(); var formattedValue = addCommas(this.getRawValue(dataIndex)); @@ -149,7 +149,8 @@ var MapSeries = SeriesModel.extend({ } } - return seriesNames.join(', ') + '
' + var newLine = renderMode === 'html' ? '
' : '\n'; + return seriesNames.join(', ') + newLine + encodeHTML(name + ' : ' + formattedValue); }, diff --git a/src/chart/radar/RadarSeries.js b/src/chart/radar/RadarSeries.js index ba713d0f451664b23e4a2e72e8acb9dbabd72059..9533b2379f347368800b411c5fc634b62fe277dc 100644 --- a/src/chart/radar/RadarSeries.js +++ b/src/chart/radar/RadarSeries.js @@ -49,16 +49,17 @@ var RadarSeries = SeriesModel.extend({ }); }, - formatTooltip: function (dataIndex) { + formatTooltip: function (dataIndex, multipleSeries, dataType, renderMode) { var data = this.getData(); var coordSys = this.coordinateSystem; var indicatorAxes = coordSys.getIndicatorAxes(); var name = this.getData().getName(dataIndex); - return encodeHTML(name === '' ? this.name : name) + '
' + var newLine = renderMode === 'html' ? '
' : '\n'; + return encodeHTML(name === '' ? this.name : name) + newLine + zrUtil.map(indicatorAxes, function (axis, idx) { var val = data.get(data.mapDimension(axis.dim), dataIndex); return encodeHTML(axis.name + ' : ' + val); - }).join('
'); + }).join(newLine); }, /** diff --git a/src/component/marker/MarkerModel.js b/src/component/marker/MarkerModel.js index 8c3a3140c456b96dbf23ce5af73d83d38942c05d..f89c52d848a98072beb7665dfaf59d0e657f481e 100644 --- a/src/component/marker/MarkerModel.js +++ b/src/component/marker/MarkerModel.js @@ -121,15 +121,16 @@ var MarkerModel = echarts.extendComponentModel({ } }, - formatTooltip: function (dataIndex) { + formatTooltip: function (dataIndex, multipleSeries, dataType, renderMode) { var data = this.getData(); var value = this.getRawValue(dataIndex); var formattedValue = zrUtil.isArray(value) ? zrUtil.map(value, addCommas).join(', ') : addCommas(value); var name = data.getName(dataIndex); var html = encodeHTML(this.name); + var newLine = renderMode === 'html' ? '
' : '\n'; if (value != null || name) { - html += '
'; + html += newLine; } if (name) { html += encodeHTML(name); diff --git a/src/component/tooltip/TooltipContent.js b/src/component/tooltip/TooltipContent.js index 3dbd9058165aac2cd24a8ce7e6d43f1bf09e8e70..14326170a8215f7eaf29e5dc9fe27dbf6db0d01e 100644 --- a/src/component/tooltip/TooltipContent.js +++ b/src/component/tooltip/TooltipContent.js @@ -60,8 +60,21 @@ function assembleFont(textStyleModel) { cssText.push('font:' + textStyleModel.getFont()); + var lineHeight = textStyleModel.get('lineHeight'); + if (lineHeight == null) { + lineHeight = Math.round(fontSize * 3 / 2); + } + fontSize - && cssText.push('line-height:' + Math.round(fontSize * 3 / 2) + 'px'); + && cssText.push('line-height:' + lineHeight + 'px'); + + var shadowColor = textStyleModel.get('textShadowColor'); + var shadowBlur = textStyleModel.get('textShadowBlur') || 0; + var shadowOffsetX = textStyleModel.get('textShadowOffsetX') || 0; + var shadowOffsetY = textStyleModel.get('textShadowOffsetY') || 0; + shadowBlur + && cssText.push('text-shadow:' + shadowOffsetX + 'px ' + shadowOffsetY + 'px ' + + shadowBlur + 'px ' + shadowColor); each(['decoration', 'align'], function (name) { var val = textStyleModel.get(name); diff --git a/src/component/tooltip/TooltipRichContent.js b/src/component/tooltip/TooltipRichContent.js index 1c5743343fd5a4f47dabb25a0064809ce4acd7cd..8fc708465121190519a497757bccaedb17647faf 100644 --- a/src/component/tooltip/TooltipRichContent.js +++ b/src/component/tooltip/TooltipRichContent.js @@ -20,6 +20,7 @@ import * as zrUtil from 'zrender/src/core/util'; // import Group from 'zrender/src/container/Group'; import Text from 'zrender/src/graphic/Text'; +import * as graphicUtil from '../../util/graphic'; function makeStyleCoord(out, zr, zrX, zrY) { @@ -131,16 +132,23 @@ TooltipRichContent.prototype = { startId = text.indexOf('{marker'); } + var textStyleModel = tooltipModel.getModel('textStyle'); + var fontSize = textStyleModel.get('fontSize'); + var lineHeight = tooltipModel.get('textLineHeight'); + if (lineHeight == null) { + lineHeight = Math.round(fontSize * 3 / 2); + } + this.el = new Text({ - style: { + style: graphicUtil.setTextStyle({}, textStyleModel, { rich: markers, text: content, - textLineHeight: 20, textBackgroundColor: tooltipModel.get('backgroundColor'), textBorderRadius: tooltipModel.get('borderRadius'), textFill: tooltipModel.get('textStyle.color'), - textPadding: tooltipModel.get('padding') - }, + textPadding: tooltipModel.get('padding'), + textLineHeight: lineHeight + }), z: tooltipModel.get('z') }); this._zr.add(this.el); diff --git a/test/tooltip-textStyle.html b/test/tooltip-textStyle.html new file mode 100644 index 0000000000000000000000000000000000000000..e11101348d74f1f73f1aeeda59a78316c461c772 --- /dev/null +++ b/test/tooltip-textStyle.html @@ -0,0 +1,455 @@ + + + + + + + + + + + + + + + + + + + + + +
+ + +
+ + +
+ + +
+ + +
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +