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 @@
+
+
+
+
+
+