Skip to content

I
incubator-echarts

x649585723 / incubator-echarts
与 Fork 源项目一致

从无法访问的项目Fork

通知 1
Star 0
Fork 0
I
incubator-echarts

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 67f7a37c 编写于 作者: P pah100
浏览文件
操作

plain textStyle and enable rich.

上级 785d6b4d
隐藏空白更改
内联 并排
Showing with 668 addition and 433 deletion
src/chart/funnel/FunnelSeries.js
浏览文件 @ 67f7a37c
......@@ -78,7 +78,6 @@ define(function(require) {
show: true,
position: 'outer'
// formatter: 标签文本格式器，同Tooltip.formatter，不支持异步回调
// textStyle: null // 默认使用全局文本样式，详见TEXTSTYLE
},
emphasis: {
show: true
......
src/chart/funnel/FunnelView.js
浏览文件 @ 67f7a37c
......@@ -38,19 +38,17 @@ define(function (require) {
var funnelPieceProto = FunnelPiece.prototype;
function getLabelStyle(data, idx, state, labelModel) {
var textStyleModel = labelModel.getModel('textStyle');
function setLabelStyle(style, data, idx, state, labelModel, specifiedStyle) {
var position = labelModel.get('position');
var isLabelInside = position === 'inside' || position === 'inner' || position === 'center';
return {
textFill: textStyleModel.getTextColor()
return graphic.setTextStyle(style, labelModel, zrUtil.extend({
textFill: labelModel.getTextColor()
|| (isLabelInside ? '#fff' : data.getItemVisual(idx, 'color')),
textFont: textStyleModel.getFont(),
text: zrUtil.retrieve(
data.hostModel.getFormattedLabel(idx, state),
data.getName(idx)
)
};
}, specifiedStyle), {mergeMode: true});
}
var opacityAccessPath = ['itemStyle', 'normal', 'opacity'];
......@@ -133,11 +131,6 @@ define(function (require) {
}
}, seriesModel, idx);
labelText.attr({
style: {
textAlign: labelLayout.textAlign,
textVerticalAlign: labelLayout.verticalAlign,
textFont: labelLayout.font
},
rotation: labelLayout.rotation,
origin: [labelLayout.x, labelLayout.y],
z2: 10
......@@ -148,7 +141,11 @@ define(function (require) {
var labelLineModel = itemModel.getModel('labelLine.normal');
var labelLineHoverModel = itemModel.getModel('labelLine.emphasis');
labelText.setStyle(getLabelStyle(data, idx, 'normal', labelModel));
setLabelStyle(labelText.style, data, idx, 'normal', labelModel, {
textAlign: labelLayout.textAlign,
textVerticalAlign: labelLayout.verticalAlign,
textFont: labelLayout.font
});
labelText.ignore = labelText.normalIgnore = !labelModel.get('show');
labelText.hoverIgnore = !labelHoverModel.get('show');
......@@ -162,7 +159,7 @@ define(function (require) {
});
labelLine.setStyle(labelLineModel.getModel('lineStyle').getLineStyle());
labelText.hoverStyle = getLabelStyle(data, idx, 'emphasis', labelHoverModel);
labelText.hoverStyle = setLabelStyle({}, data, idx, 'emphasis', labelHoverModel);
labelLine.hoverStyle = labelLineHoverModel.getModel('lineStyle').getLineStyle();
};
......
src/chart/gauge/GaugeSeries.js
浏览文件 @ 67f7a37c
......@@ -76,9 +76,7 @@ define(function (require) {
show: true,
distance: 5,
// formatter: null,
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
color: 'auto'
}
color: 'auto'
},
pointer: {
show: true,
......@@ -95,10 +93,8 @@ define(function (require) {
// x, y，单位px
offsetCenter: [0, '-40%'],
// 其余属性默认使用全局文本样式，详见TEXTSTYLE
textStyle: {
color: '#333',
fontSize: 15
}
color: '#333',
fontSize: 15
},
detail: {
show: true,
......@@ -106,15 +102,14 @@ define(function (require) {
borderWidth: 0,
borderColor: '#ccc',
width: 100,
height: 40,
height: null, // self-adaption
padding: [5, 10],
// x, y，单位px
offsetCenter: [0, '40%'],
// formatter: null,
// 其余属性默认使用全局文本样式，详见TEXTSTYLE
textStyle: {
color: 'auto',
fontSize: 30
}
color: 'auto',
fontSize: 30
}
}
});
......
src/chart/gauge/GaugeView.js
浏览文件 @ 67f7a37c
......@@ -174,7 +174,6 @@ define(function (require) {
var splitLineStyle = splitLineModel.getModel('lineStyle').getLineStyle();
var tickLineStyle = tickModel.getModel('lineStyle').getLineStyle();
var textStyleModel = labelModel.getModel('textStyle');
for (var i = 0; i <= splitNumber; i++) {
var unitX = Math.cos(angle);
......@@ -207,26 +206,18 @@ define(function (require) {
labelModel.get('formatter')
);
var distance = labelModel.get('distance');
var autoColor = getColor(i / splitNumber);
var text = new graphic.Text({
style: {
group.add(new graphic.Text({
style: graphic.setTextStyle({}, labelModel, {
text: label,
x: unitX * (r - splitLineLen - distance) + cx,
y: unitY * (r - splitLineLen - distance) + cy,
textFill: textStyleModel.getTextColor(),
textFont: textStyleModel.getFont(),
textVerticalAlign: unitY < -0.4 ? 'top' : (unitY > 0.4 ? 'bottom' : 'middle'),
textAlign: unitX < -0.4 ? 'left' : (unitX > 0.4 ? 'right' : 'center')
},
}, {autoColor: autoColor}),
silent: true
});
if (text.style.textFill === 'auto') {
text.setStyle({
textFill: getColor(i / splitNumber)
});
}
group.add(text);
}));
}
// Axis tick
......@@ -352,34 +343,28 @@ define(function (require) {
) {
var titleModel = seriesModel.getModel('title');
if (titleModel.get('show')) {
var textStyleModel = titleModel.getModel('textStyle');
var offsetCenter = titleModel.get('offsetCenter');
var x = posInfo.cx + parsePercent(offsetCenter[0], posInfo.r);
var y = posInfo.cy + parsePercent(offsetCenter[1], posInfo.r);
var text = new graphic.Text({
style: {
var minVal = +seriesModel.get('min');
var maxVal = +seriesModel.get('max');
var value = seriesModel.getData().get('value', 0);
var autoColor = getColor(
numberUtil.linearMap(value, [minVal, maxVal], [0, 1], true)
);
this.group.add(new graphic.Text({
silent: true,
style: graphic.setTextStyle({}, titleModel, {
x: x,
y: y,
// FIXME First data name ?
text: seriesModel.getData().getName(0),
textFill: textStyleModel.getTextColor(),
textFont: textStyleModel.getFont(),
textAlign: 'center',
textVerticalAlign: 'middle'
}
});
if (text.style.textFill === 'auto') {
var minVal = +seriesModel.get('min');
var maxVal = +seriesModel.get('max');
var value = seriesModel.getData().get('value', 0);
text.setStyle('textFill', getColor(
numberUtil.linearMap(value, [minVal, maxVal], [0, 1], true)
));
}
this.group.add(text);
}, {autoColor: autoColor, forceRich: true})
}));
}
},
......@@ -390,37 +375,31 @@ define(function (require) {
var minVal = +seriesModel.get('min');
var maxVal = +seriesModel.get('max');
if (detailModel.get('show')) {
var textStyleModel = detailModel.getModel('textStyle');
var offsetCenter = detailModel.get('offsetCenter');
var x = posInfo.cx + parsePercent(offsetCenter[0], posInfo.r);
var y = posInfo.cy + parsePercent(offsetCenter[1], posInfo.r);
var width = parsePercent(detailModel.get('width'), posInfo.r);
var height = parsePercent(detailModel.get('height'), posInfo.r);
var value = seriesModel.getData().get('value', 0);
var rect = new graphic.Rect({
shape: {
x: x - width / 2,
y: y - height / 2,
width: width,
height: height
},
style: {
var autoColor = getColor(
numberUtil.linearMap(value, [minVal, maxVal], [0, 1], true)
);
this.group.add(new graphic.Text({
silent: true,
style: graphic.setTextStyle({}, detailModel, {
x: x,
y: y,
text: formatLabel(
// FIXME First data name ?
value, detailModel.get('formatter')
),
fill: detailModel.get('backgroundColor'),
textFill: textStyleModel.getTextColor(),
textFont: textStyleModel.getFont()
}
});
if (rect.style.textFill === 'auto') {
rect.setStyle('textFill', getColor(
numberUtil.linearMap(value, [minVal, maxVal], [0, 1], true)
));
}
rect.setStyle(detailModel.getItemStyle(['color']));
this.group.add(rect);
textWidth: isNaN(width) ? null : width,
textHeight: isNaN(height) ? null : height,
textAlign: 'center',
textVerticalAlign: 'middle'
}, {autoColor: autoColor, forceRich: true})
}));
}
}
});
......
src/chart/graph/GraphSeries.js
浏览文件 @ 67f7a37c
......@@ -37,7 +37,7 @@ define(function (require) {
mergeDefaultAndTheme: function (option) {
GraphSeries.superApply(this, 'mergeDefaultAndTheme', arguments);
modelUtil.defaultEmphasis(option.edgeLabel, modelUtil.LABEL_OPTIONS);
modelUtil.defaultEmphasis(option.edgeLabel, ['show']);
},
getInitialData: function (option, ecModel) {
......
src/chart/helper/Line.js
浏览文件 @ 67f7a37c
......@@ -311,33 +311,29 @@ define(function (require) {
// label.afterUpdate = lineAfterUpdate;
if (showLabel) {
var textStyleModel = labelModel.getModel('textStyle');
label.setStyle({
var labelStyle = graphic.setTextStyle(label.style, labelModel, {
text: zrUtil.retrieve(
seriesModel.getFormattedLabel(idx, 'normal', lineData.dataType),
defaultText
),
textFont: textStyleModel.getFont(),
textFill: textStyleModel.getTextColor() || defaultLabelColor
textFill: labelModel.getTextColor() || defaultLabelColor
});
label.__textAlign = textStyleModel.get('align');
label.__verticalAlign = textStyleModel.get('verticalAlign') || textStyleModel.get('baseline');
label.__position = labelModel.get('position');
label.__textAlign = labelStyle.textAlign;
label.__verticalAlign = labelStyle.textVerticalAlign;
label.__position = labelStyle.position;
}
else {
label.setStyle('text', '');
label.setStyle('text', null);
}
if (hoverShowLabel) {
var textStyleHoverModel = hoverLabelModel.getModel('textStyle');
label.hoverStyle = {
text: zrUtil.retrieve(
seriesModel.getFormattedLabel(idx, 'emphasis', lineData.dataType),
defaultText
),
textFont: textStyleHoverModel.getFont(),
textFill: textStyleHoverModel.getTextColor() || defaultLabelColor
textFont: hoverLabelModel.getFont(),
textFill: hoverLabelModel.getTextColor() || defaultLabelColor
};
}
else {
......
src/chart/helper/labelHelper.js
浏览文件 @ 67f7a37c
......@@ -41,7 +41,7 @@ define(function (require) {
);
}
else {
elStyle.text = '';
elStyle.text = null;
}
};
......
src/chart/map/MapSeries.js
浏览文件 @ 67f7a37c
......@@ -216,15 +216,11 @@ define(function (require) {
label: {
normal: {
show: false,
textStyle: {
color: '#000'
}
color: '#000'
},
emphasis: {
show: true,
textStyle: {
color: 'rgb(100,0,0)'
}
color: 'rgb(100,0,0)'
}
},
// scaleLimit: null,
......
src/chart/map/MapView.js
浏览文件 @ 67f7a37c
......@@ -112,28 +112,23 @@ define(function (require) {
var labelModel = itemModel.getModel('label.normal');
var hoverLabelModel = itemModel.getModel('label.emphasis');
var textStyleModel = labelModel.getModel('textStyle');
var hoverTextStyleModel = hoverLabelModel.getModel('textStyle');
var polygonGroups = fullData.getItemGraphicEl(fullIndex);
circle.setStyle({
textPosition: 'bottom'
});
var onEmphasis = function () {
circle.setStyle({
text: hoverLabelModel.get('show') ? labelText : '',
textFill: hoverTextStyleModel.getTextColor(),
textFont: hoverTextStyleModel.getFont()
});
graphic.setTextStyle(circle.style, hoverLabelModel, {
text: hoverLabelModel.get('show') ? labelText : null,
textFill: hoverLabelModel.getTextColor()
}, {isRectText: true});
};
var onNormal = function () {
circle.setStyle({
text: labelModel.get('show') ? labelText : '',
textFill: textStyleModel.getTextColor(),
textFont: textStyleModel.getFont()
});
graphic.setTextStyle(circle.style, labelModel, {
text: labelModel.get('show') ? labelText : null,
textFill: labelModel.getTextColor()
}, {isRectText: true});
};
polygonGroups.on('mouseover', onEmphasis)
......
src/chart/pie/PieSeries.js
浏览文件 @ 67f7a37c
......@@ -115,7 +115,7 @@ define(function(require) {
// 'outer', 'inside', 'center'
position: 'outer'
// formatter: 标签文本格式器，同Tooltip.formatter，不支持异步回调
// textStyle: null // 默认使用全局文本样式，详见TEXTSTYLE
// 默认使用全局文本样式，详见TEXTSTYLE
// distance: 当position为inner时有效，为label位置到圆心的距离与圆半径(环状图为内外半径和)的比例系数
},
emphasis: {}
......
src/chart/pie/PieView.js
浏览文件 @ 67f7a37c
......@@ -96,18 +96,16 @@ define(function (require) {
var piePieceProto = PiePiece.prototype;
function getLabelStyle(data, idx, state, labelModel, labelPosition) {
var textStyleModel = labelModel.getModel('textStyle');
function setLabelStyle(style, data, idx, state, labelModel, labelPosition, specifiedStyle) {
var isLabelInside = labelPosition === 'inside' || labelPosition === 'inner';
return {
textFill: textStyleModel.getTextColor()
return graphic.setTextStyle(style, labelModel, zrUtil.extend({
textFill: labelModel.getTextColor()
|| (isLabelInside ? '#fff' : data.getItemVisual(idx, 'color')),
opacity: data.getItemVisual(idx, 'opacity'),
textFont: textStyleModel.getFont(),
text: zrUtil.retrieve(
data.hostModel.getFormattedLabel(idx, state), data.getName(idx)
)
};
}, specifiedStyle));
}
piePieceProto.updateData = function (data, idx, firstCreate) {
......@@ -234,11 +232,6 @@ define(function (require) {
}
}, seriesModel, idx);
labelText.attr({
style: {
textVerticalAlign: labelLayout.verticalAlign,
textAlign: labelLayout.textAlign,
textFont: labelLayout.font
},
rotation: labelLayout.rotation,
origin: [labelLayout.x, labelLayout.y],
z2: 10
......@@ -250,7 +243,11 @@ define(function (require) {
var labelLineHoverModel = itemModel.getModel('labelLine.emphasis');
var labelPosition = labelModel.get('position') || labelHoverModel.get('position');
labelText.setStyle(getLabelStyle(data, idx, 'normal', labelModel, labelPosition));
setLabelStyle(labelText.style, data, idx, 'normal', labelModel, labelPosition, {
textVerticalAlign: labelLayout.verticalAlign,
textAlign: labelLayout.textAlign,
textFont: labelLayout.font
});
labelText.ignore = labelText.normalIgnore = !labelModel.get('show');
labelText.hoverIgnore = !labelHoverModel.get('show');
......@@ -265,7 +262,7 @@ define(function (require) {
});
labelLine.setStyle(labelLineModel.getModel('lineStyle').getLineStyle());
labelText.hoverStyle = getLabelStyle(data, idx, 'emphasis', labelHoverModel, labelPosition);
labelText.hoverStyle = setLabelStyle({}, data, idx, 'emphasis', labelHoverModel, labelPosition);
labelLine.hoverStyle = labelLineHoverModel.getModel('lineStyle').getLineStyle();
var smooth = labelLineModel.get('smooth');
......
src/chart/pie/labelLayout.js
浏览文件 @ 67f7a37c
......@@ -191,7 +191,7 @@ define(function (require) {
textAlign = isLabelInside ? 'center' : (dx > 0 ? 'left' : 'right');
}
var font = labelModel.getModel('textStyle').getFont();
var font = labelModel.getFont();
var labelRotate = labelModel.get('rotate')
? (dx < 0 ? -midAngle + Math.PI : -midAngle) : 0;
......
src/chart/sankey/SankeySeries.js
浏览文件 @ 67f7a37c
......@@ -92,10 +92,8 @@ define(function (require) {
normal: {
show: true,
position: 'right',
textStyle: {
color: '#000',
fontSize: 12
}
color: '#000',
fontSize: 12
},
emphasis: {
show: true
......
src/chart/sankey/SankeyView.js
浏览文件 @ 67f7a37c
......@@ -117,9 +117,7 @@ define(function (require) {
var layout = node.getLayout();
var itemModel = node.getModel();
var labelModel = itemModel.getModel('label.normal');
var textStyleModel = labelModel.getModel('textStyle');
var labelHoverModel = itemModel.getModel('label.emphasis');
var textStyleHoverModel = labelHoverModel.getModel('textStyle');
var rect = new graphic.Rect({
shape: {
......@@ -128,36 +126,29 @@ define(function (require) {
width: node.getLayout().dx,
height: node.getLayout().dy
},
style: {
// Get formatted label in label.normal option
// Use node id if it is not specified
text: labelModel.get('show')
? seriesModel.getFormattedLabel(node.dataIndex, 'normal') || node.id
// Use empty string to hide the label
: '',
textFont: textStyleModel.getFont(),
textFill: textStyleModel.getTextColor(),
textPosition: labelModel.get('position')
}
style: itemModel.getModel('itemStyle.normal').getItemStyle()
});
rect.setStyle(zrUtil.defaults(
{
fill: node.getVisual('color')
},
itemModel.getModel('itemStyle.normal').getItemStyle()
));
graphic.setTextStyle(rect.style, labelModel, {
// Get formatted label in label.normal option
// Use node id if it is not specified
text: labelModel.get('show')
? seriesModel.getFormattedLabel(node.dataIndex, 'normal') || node.id
// Use empty string to hide the label
: null,
textFill: labelModel.getTextColor()
}, {isRectText: true});
rect.setStyle('fill', node.getVisual('color'));
graphic.setHoverStyle(rect, zrUtil.extend(
node.getModel('itemStyle.emphasis'),
{
node.getModel('itemStyle.emphasis').getItemStyle(),
graphic.setTextStyle({}, labelHoverModel, {
text: labelHoverModel.get('show')
? seriesModel.getFormattedLabel(node.dataIndex, 'emphasis') || node.id
: '',
textFont: textStyleHoverModel.getFont(),
textFill: textStyleHoverModel.getTextColor(),
textPosition: labelHoverModel.get('position')
}
: null,
textFill: labelHoverModel.getTextColor()
}, {isRectText: true})
));
group.add(rect);
......
src/chart/scatter/ScatterSeries.js
浏览文件 @ 67f7a37c
......@@ -50,7 +50,7 @@ define(function (require) {
// formatter: 标签文本格式器，同Tooltip.formatter，不支持异步回调
// position: 默认自适应，水平布局为'top'，垂直布局为'right'，可选为
// 'inside'|'left'|'right'|'top'|'bottom'
// textStyle: null // 默认使用全局文本样式，详见TEXTSTYLE
// 默认使用全局文本样式，详见TEXTSTYLE
// }
// },
itemStyle: {
......
src/chart/themeRiver/ThemeRiverSeries.js
浏览文件 @ 67f7a37c
......@@ -294,10 +294,8 @@ define(function (require) {
textAlign: 'right',
show: true,
position: 'left',
textStyle: {
color: '#000',
fontSize: 11
}
color: '#000',
fontSize: 11
},
emphasis: {
show: true
......
src/chart/themeRiver/ThemeRiverView.js
浏览文件 @ 67f7a37c
......@@ -129,16 +129,13 @@ define(function (require) {
var hoverItemStyleModel = itemModel.getModel('itemStyle.emphasis');
var itemStyleModel = itemModel.getModel('itemStyle.normal');
var textStyleModel = labelModel.getModel('textStyle');
text.setStyle({
graphic.setTextStyle(text.style, labelModel, {
text: labelModel.get('show')
? seriesModel.getFormattedLabel(indices[j - 1], 'normal')
|| data.getName(indices[j - 1])
: '',
textFill: textStyleModel.getTextColor(),
textFont: textStyleModel.getFont(),
textAlign: labelModel.get('textAlign'),
: null,
textFill: labelModel.getTextColor(),
textVerticalAlign: 'middle'
});
......
src/chart/treemap/TreemapSeries.js
浏览文件 @ 67f7a37c
......@@ -85,12 +85,10 @@ define(function(require) {
show: true,
position: 'inside', // Can be [5, '5%'] or position stirng like 'insideTopLeft', ...
// formatter: null,
textStyle: {
color: '#fff',
ellipsis: true
// align
// baseline
}
color: '#fff',
ellipsis: true
// align
// verticalAlign
}
},
upperLabel: { // Label when node is parent.
......@@ -99,21 +97,17 @@ define(function(require) {
position: [0, '50%'],
height: 20,
// formatter: null,
textStyle: {
color: '#fff',
ellipsis: true,
// align: null,
baseline: 'middle'
}
color: '#fff',
ellipsis: true,
// align: null,
verticalAlign: 'middle'
},
emphasis: {
show: true,
position: [0, '50%'],
textStyle: {
color: '#fff',
ellipsis: true,
baseline: 'middle'
}
color: '#fff',
ellipsis: true,
verticalAlign: 'middle'
}
},
itemStyle: {
......
src/chart/treemap/TreemapView.js
浏览文件 @ 67f7a37c
......@@ -824,22 +824,21 @@
function setText(text, style, nodeModel, labelPath, visualColor, width, height, upperLabelRect) {
var labelModel = nodeModel.getModel(labelPath);
var labelTextStyleModel = labelModel.getModel('textStyle');
graphic.setText(style, labelModel, visualColor);
upperLabelRect && (style.textPositionRect = zrUtil.clone(upperLabelRect));
var textRect = labelTextStyleModel.getTextRect(text);
var textRect = labelModel.getTextRect(text);
if (!labelModel.getShallow('show') || textRect.height > height) {
style.text = '';
style.text = null;
}
else if (textRect.width > width) {
style.text = labelTextStyleModel.get('ellipsis')
? labelTextStyleModel.truncateText(
style.text = labelModel.get('ellipsis')
? labelModel.truncateText(
text, width, null, {minChar: 2}
)
: '';
: null;
}
else {
style.text = text;
......
src/component/axis/AngleAxisView.js
浏览文件 @ 67f7a37c
......@@ -105,8 +105,6 @@ define(function (require) {
var categoryData = angleAxisModel.get('data');
var labelModel = angleAxisModel.getModel('axisLabel');
var axisTextStyleModel = labelModel.getModel('textStyle');
var labels = angleAxisModel.getFormattedLabels();
var labelMargin = labelModel.get('margin');
......@@ -121,27 +119,23 @@ define(function (require) {
var labelTextAlign = Math.abs(p[0] - cx) / r < 0.3
? 'center' : (p[0] > cx ? 'left' : 'right');
var labelTextBaseline = Math.abs(p[1] - cy) / r < 0.3
var labelTextVerticalAlign = Math.abs(p[1] - cy) / r < 0.3
? 'middle' : (p[1] > cy ? 'top' : 'bottom');
var textStyleModel = axisTextStyleModel;
if (categoryData && categoryData[i] && categoryData[i].textStyle) {
textStyleModel = new Model(
categoryData[i].textStyle, axisTextStyleModel
);
labelModel = new Model(categoryData[i].textStyle, labelModel, labelModel.ecModel);
}
this.group.add(new graphic.Text({
style: {
x: p[0],
y: p[1],
textFill: textStyleModel.getTextColor() || angleAxisModel.get('axisLine.lineStyle.color'),
text: labels[i],
textAlign: labelTextAlign,
textVerticalAlign: labelTextBaseline,
textFont: textStyleModel.getFont()
},
silent: true
}));
var textEl = new graphic.Text({silent: true});
this.group.add(textEl);
graphic.setTextStyle(textEl.style, labelModel, {
x: p[0],
y: p[1],
textFill: labelModel.getTextColor() || angleAxisModel.get('axisLine.lineStyle.color'),
text: labels[i],
textAlign: labelTextAlign,
textVerticalAlign: labelTextVerticalAlign
});
}
},
......
src/component/axis/AxisBuilder.js
浏览文件 @ 67f7a37c
......@@ -250,7 +250,6 @@ define(function (require) {
}
var labelModel = axisModel.getModel('axisLabel');
var textStyleModel = labelModel.getModel('textStyle');
var labelMargin = labelModel.get('margin');
var ticks = axis.scale.getTicks();
var labels = axisModel.getFormattedLabels();
......@@ -272,13 +271,12 @@ define(function (require) {
return;
}
var itemTextStyleModel = textStyleModel;
if (categoryData && categoryData[tickVal] && categoryData[tickVal].textStyle) {
itemTextStyleModel = new Model(
categoryData[tickVal].textStyle, textStyleModel, axisModel.ecModel
labelModel = new Model(
categoryData[tickVal].textStyle, labelModel, axisModel.ecModel
);
}
var textColor = itemTextStyleModel.getTextColor()
var textColor = labelModel.getTextColor()
|| axisModel.get('axisLine.lineStyle.color');
var tickCoord = axis.dataToCoord(tickVal);
......@@ -289,37 +287,36 @@ define(function (require) {
var labelStr = axis.scale.getLabel(tickVal);
var textEl = new graphic.Text({
// Id for animation
anid: 'label_' + tickVal,
style: {
text: labels[index],
textAlign: itemTextStyleModel.getShallow('align', true) || labelLayout.textAlign,
textVerticalAlign: itemTextStyleModel.getShallow('verticalAlign', true)
|| itemTextStyleModel.getShallow('baseline', true)
|| labelLayout.textVerticalAlign,
textFont: itemTextStyleModel.getFont(),
textFill: typeof textColor === 'function'
? textColor(
// (1) In category axis with data zoom, tick is not the original
// index of axis.data. So tick should not be exposed to user
// in category axis.
// (2) Compatible with previous version, which always returns labelStr.
// But in interval scale labelStr is like '223,445', which maked
// user repalce ','. So we modify it to return original val but remain
// it as 'string' to avoid error in replacing.
axis.type === 'category' ? labelStr : axis.type === 'value' ? tickVal + '' : tickVal,
index
)
: textColor
},
position: pos,
rotation: labelLayout.rotation,
silent: silent,
z2: 10
});
graphic.setTextStyle(textEl.style, labelModel, {
text: labels[index],
textAlign: labelModel.getShallow('align', true)
|| labelLayout.textAlign,
textVerticalAlign: labelModel.getShallow('verticalAlign', true)
|| labelModel.getShallow('baseline', true)
|| labelLayout.textVerticalAlign,
textFill: typeof textColor === 'function'
? textColor(
// (1) In category axis with data zoom, tick is not the original
// index of axis.data. So tick should not be exposed to user
// in category axis.
// (2) Compatible with previous version, which always returns labelStr.
// But in interval scale labelStr is like '223,445', which maked
// user repalce ','. So we modify it to return original val but remain
// it as 'string' to avoid error in replacing.
axis.type === 'category' ? labelStr : axis.type === 'value' ? tickVal + '' : tickVal,
index
)
: textColor
});
// Pack data for mouse event
if (triggerEvent) {
textEl.eventData = makeAxisEventDataBase(axisModel);
......@@ -425,21 +422,12 @@ define(function (require) {
formatterParams[mainType + 'Index'] = axisModel.componentIndex;
var textEl = new graphic.Text({
// Id for animation
anid: 'name',
__fullText: name,
__truncatedText: truncatedText,
style: {
text: truncatedText,
textFont: textFont,
textFill: textStyleModel.getTextColor()
|| axisModel.get('axisLine.lineStyle.color'),
textAlign: labelLayout.textAlign,
textVerticalAlign: labelLayout.textVerticalAlign
},
position: pos,
rotation: labelLayout.rotation,
silent: isSilent(axisModel),
......@@ -455,6 +443,15 @@ define(function (require) {
: null
});
graphic.setTextStyle(textEl.style, textStyleModel, {
text: truncatedText,
textFont: textFont,
textFill: textStyleModel.getTextColor()
|| axisModel.get('axisLine.lineStyle.color'),
textAlign: labelLayout.textAlign,
textVerticalAlign: labelLayout.textVerticalAlign
});
if (axisModel.get('triggerEvent')) {
textEl.eventData = makeAxisEventDataBase(axisModel);
textEl.eventData.targetType = 'axisName';
......
src/component/axis/cartesianAxisHelper.js
浏览文件 @ 67f7a37c
......@@ -48,7 +48,7 @@ define(function (require) {
// Tick and label direction, x y is axisDim
var dirMap = {top: -1, bottom: 1, left: -1, right: 1};
layout.labelDirection = layout.tickDirection = layout.nameDirection = dirMap[idx[rawAxisPosition]];
layout.labelDirection = layout.tickDirection = layout.nameDirection = dirMap[rawAxisPosition];
layout.labelOffset = axis.onZero ? posBound[idx[rawAxisPosition]] - posBound[idx['onZero']] : 0;
if (axisModel.get('axisTick.inside')) {
......
src/component/axisPointer/AxisPointerModel.js
浏览文件 @ 67f7a37c
......@@ -59,9 +59,7 @@ define(function(require) {
formatter: null, // string | Function
precision: 'auto', // Or a number like 0, 1, 2 ...
margin: 3,
textStyle: {
color: '#fff'
},
color: '#fff',
padding: [5, 7, 5, 7],
backgroundColor: 'auto', // default: axis line color
borderColor: null,
......
src/component/axisPointer/modelHelper.js
浏览文件 @ 67f7a37c
......@@ -182,10 +182,7 @@ define(function(require) {
// (cross style is dashed by default)
if (!triggerTooltip) {
var crossStyle = volatileOption.lineStyle = tooltipAxisPointerModel.get('crossStyle');
crossStyle && zrUtil.defaults(
labelOption.textStyle || (labelOption.textStyle = {}),
crossStyle.textStyle
);
crossStyle && zrUtil.defaults(labelOption, crossStyle.textStyle);
}
}
......
src/component/axisPointer/viewHelper.js
浏览文件 @ 67f7a37c
......@@ -45,10 +45,9 @@ define(function(require) {
}
);
var labelModel = axisPointerModel.getModel('label');
var textStyleModel = labelModel.getModel('textStyle');
var paddings = formatUtil.normalizeCssArray(labelModel.get('padding') || 0);
var font = textStyleModel.getFont();
var font = labelModel.getFont();
var textRect = textContain.getBoundingRect(text, font);
var position = labelPos.position;
......@@ -74,10 +73,11 @@ define(function(require) {
elOption.label = {
shape: {x: 0, y: 0, width: width, height: height, r: labelModel.get('borderRadius')},
position: position.slice(),
// TODO: rich
style: {
text: text,
textFont: font,
textFill: textStyleModel.getTextColor(),
textFill: labelModel.getTextColor(),
textPosition: 'inside',
fill: bgColor,
stroke: labelModel.get('borderColor') || 'transparent',
......
src/component/calendar/CalendarView.js
浏览文件 @ 67f7a37c
......@@ -272,7 +272,6 @@ define(function (require) {
return;
}
var yearLabelStyleModel = calendarModel.getModel('yearLabel.textStyle');
var margin = yearLabel.get('margin');
var pos = yearLabel.get('position');
......@@ -311,15 +310,15 @@ define(function (require) {
var content = this._formatterLabel(formatter, params);
var yearText = new graphic.Text(
zrUtil.merge({
z2: 30,
style: {
text: content,
font: yearLabelStyleModel.getFont(),
textFill: yearLabelStyleModel.getTextColor()
}
}, this._yearTextPositionControl(posPoints[pos], orient, pos, margin))
zrUtil.merge(
{z2: 30},
this._yearTextPositionControl(posPoints[pos], orient, pos, margin)
)
);
graphic.setTextStyle(yearText.style, yearLabel, {
text: content,
textFill: yearLabel.getTextColor()
});
group.add(yearText);
},
......@@ -369,7 +368,6 @@ define(function (require) {
return;
}
var monthLabelStyleModel = calendarModel.getModel('monthLabel.textStyle');
var nameMap = monthLabel.get('nameMap');
var margin = monthLabel.get('margin');
var pos = monthLabel.get('position');
......@@ -408,14 +406,14 @@ define(function (require) {
var content = this._formatterLabel(formatter, params);
var monthText = new graphic.Text({
z2: 30,
style: zrUtil.extend({
var monthText = new graphic.Text({z2: 30});
zrUtil.extend(
graphic.setTextStyle(monthText.style, monthLabel, {
text: content,
font: monthLabelStyleModel.getFont(),
textFill: monthLabelStyleModel.getTextColor()
}, this._monthTextPositionControl(tmp, isCenter, orient, pos, margin))
});
textFill: monthLabel.getTextColor()
}),
this._monthTextPositionControl(tmp, isCenter, orient, pos, margin)
);
group.add(monthText);
}
......@@ -454,7 +452,6 @@ define(function (require) {
}
var coordSys = calendarModel.coordinateSystem;
var dayLabelStyleModel = calendarModel.getModel('dayLabel.textStyle');
var pos = dayLabel.get('position');
var nameMap = dayLabel.get('nameMap');
var margin = dayLabel.get('margin');
......@@ -484,14 +481,15 @@ define(function (require) {
var point = coordSys.dataToRect([tmpD.time], false).center;
var day = i;
day = Math.abs((i + firstDayOfWeek) % 7);
var weekText = new graphic.Text({
z2: 30,
style: zrUtil.extend({
var weekText = new graphic.Text({z2: 30});
zrUtil.extend(
graphic.setTextStyle(weekText.style, dayLabel, {
text: nameMap[day],
font: dayLabelStyleModel.getFont(),
textFill: dayLabelStyleModel.getTextColor()
}, this._weekTextPositionControl(point, orient, pos, margin, cellSize))
});
textFill: dayLabel.getTextColor()
}),
this._weekTextPositionControl(point, orient, pos, margin, cellSize)
);
group.add(weekText);
}
}
......
src/component/helper/MapDraw.js
浏览文件 @ 67f7a37c
......@@ -199,9 +199,6 @@ define(function (require) {
}
}
var textStyleModel = labelModel.getModel('textStyle');
var hoverTextStyleModel = hoverLabelModel.getModel('textStyle');
zrUtil.each(region.geometries, function (geometry) {
if (geometry.type !== 'polygon') {
return;
......@@ -241,26 +238,26 @@ define(function (require) {
var query = data ? dataIdx : region.name;
var formattedStr = mapOrGeoModel.getFormattedLabel(query, 'normal');
var hoverFormattedStr = mapOrGeoModel.getFormattedLabel(query, 'emphasis');
var text = new graphic.Text({
style: {
text: showLabel ? (formattedStr || region.name) : '',
textFill: textStyleModel.getTextColor(),
textFont: textStyleModel.getFont(),
textAlign: 'center',
textVerticalAlign: 'middle'
},
hoverStyle: {
text: hoverShowLabel ? (hoverFormattedStr || region.name) : '',
textFill: hoverTextStyleModel.getTextColor(),
textFont: hoverTextStyleModel.getFont()
},
var textEl = new graphic.Text({
position: region.center.slice(),
scale: [1 / scale[0], 1 / scale[1]],
z2: 10,
silent: true
});
regionGroup.add(text);
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()
});
regionGroup.add(textEl);
}
// setItemGraphicEl, setHoverStyle after all polygons and labels
......
src/component/legend/LegendView.js
浏览文件 @ 67f7a37c
......@@ -214,18 +214,16 @@ define(function (require) {
content = formatter(name);
}
var text = new graphic.Text({
style: {
itemGroup.add(new graphic.Text({
style: graphic.setTextStyle({}, textStyleModel, {
text: content,
x: textX,
y: itemHeight / 2,
textFill: isSelected ? textStyleModel.getTextColor() : inactiveColor,
textFont: textStyleModel.getFont(),
textAlign: textAlign,
textVerticalAlign: 'middle'
}
});
itemGroup.add(text);
})
}));
// Add a invisible rect to increase the area of mouse hover
var hitRect = new graphic.Rect({
......
src/component/marker/MarkerModel.js
浏览文件 @ 67f7a37c
......@@ -9,10 +9,7 @@ define(function (require) {
var encodeHTML = formatUtil.encodeHTML;
function fillLabel(opt) {
modelUtil.defaultEmphasis(
opt.label,
modelUtil.LABEL_OPTIONS
);
modelUtil.defaultEmphasis(opt.label, ['show']);
}
var MarkerModel = require('../../echarts').extendComponentModel({
......
src/component/timeline/SliderTimelineModel.js
浏览文件 @ 67f7a37c
......@@ -45,15 +45,13 @@ define(function(require) {
interval: 'auto',
rotate: 0,
// formatter: null,
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
color: '#304654'
}
// 其余属性默认使用全局文本样式，详见TEXTSTYLE
color: '#304654'
},
emphasis: {
show: true,
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
color: '#c23531'
}
// 其余属性默认使用全局文本样式，详见TEXTSTYLE
color: '#c23531'
}
},
itemStyle: {
......
src/component/timeline/SliderTimelineView.js
浏览文件 @ 67f7a37c
......@@ -199,8 +199,10 @@ define(function (require) {
rotation: rotationMap[orient],
labelRotation: labelRotation,
labelPosOpt: labelPosOpt,
labelAlign: timelineModel.get('label.normal.textStyle.align') || labelAlignMap[orient],
labelBaseline: timelineModel.get('label.normal.textStyle.baseline') || labelBaselineMap[orient],
labelAlign: timelineModel.get('label.normal.align') || labelAlignMap[orient],
labelBaseline: timelineModel.get('label.normal.verticalAlign')
|| timelineModel.get('label.normal.baseline')
|| labelBaselineMap[orient],
// Based on mainGroup.
playPosition: playPosition,
......@@ -397,17 +399,16 @@ define(function (require) {
}
var itemModel = data.getItemModel(dataIndex);
var itemTextStyleModel = itemModel.getModel('label.normal.textStyle');
var hoverTextStyleModel = itemModel.getModel('label.emphasis.textStyle');
var normalLabelModel = itemModel.getModel('label.normal');
var hoverLabelModel = itemModel.getModel('label.emphasis');
var tickCoord = axis.dataToCoord(tick);
var textEl = new graphic.Text({
style: {
style: graphic.setTextStyle({}, normalLabelModel, {
text: labels[dataIndex],
textAlign: layoutInfo.labelAlign,
textVerticalAlign: layoutInfo.labelBaseline,
textFont: itemTextStyleModel.getFont(),
textFill: itemTextStyleModel.getTextColor()
},
textFill: normalLabelModel.getTextColor()
}),
position: [tickCoord, 0],
rotation: layoutInfo.labelRotation - layoutInfo.rotation,
onclick: bind(this._changeTimeline, this, dataIndex),
......@@ -415,7 +416,9 @@ define(function (require) {
});
group.add(textEl);
graphic.setHoverStyle(textEl, hoverTextStyleModel.getItemStyle());
graphic.setHoverStyle(
textEl, graphic.setTextStyle({}, hoverLabelModel)
);
}, this);
},
......
src/component/timeline/TimelineAxis.js
浏览文件 @ 67f7a37c
......@@ -64,7 +64,7 @@ define(function (require) {
labelInterval = this._autoLabelInterval = axisHelper.getAxisLabelInterval(
zrUtil.map(this.scale.getTicks(), this.dataToCoord, this),
axisHelper.getFormattedLabels(this, labelModel.get('formatter')),
labelModel.getModel('textStyle').getFont(),
labelModel.getFont(),
timelineModel.get('orient') === 'horizontal'
);
}
......
src/component/timeline/TimelineModel.js
浏览文件 @ 67f7a37c
......@@ -49,9 +49,7 @@ define(function(require) {
},
label: {
normal: {
textStyle: {
color: '#000'
}
color: '#000'
},
emphasis: {}
},
......
src/component/title.js
浏览文件 @ 67f7a37c
......@@ -95,11 +95,10 @@ define(function(require) {
var textBaseline = titleModel.get('textBaseline');
var textEl = new graphic.Text({
style: {
style: graphic.setTextStyle({}, textStyleModel, {
text: titleModel.get('text'),
textFont: textStyleModel.getFont(),
textFill: textStyleModel.getTextColor()
},
}, {disableBox: true}),
z2: 10
});
......@@ -107,13 +106,12 @@ define(function(require) {
var subText = titleModel.get('subtext');
var subTextEl = new graphic.Text({
style: {
style: graphic.setTextStyle({}, subtextStyleModel, {
text: subText,
textFont: subtextStyleModel.getFont(),
textFill: subtextStyleModel.getTextColor(),
y: textRect.height + titleModel.get('itemGap'),
textBaseline: 'top'
},
textVerticalAlign: 'top'
}, {disableBox: true}),
z2: 10
});
......
src/coord/Axis.js
浏览文件 @ 67f7a37c
......@@ -249,7 +249,7 @@ define(function (require) {
labelInterval = axisHelper.getAxisLabelInterval(
zrUtil.map(this.scale.getTicks(), this.dataToCoord, this),
axisModel.getFormattedLabels(),
labelModel.getModel('textStyle').getFont(),
labelModel.getFont(),
this.isHorizontal()
);
}
......
src/coord/axisDefault.js
浏览文件 @ 67f7a37c
......@@ -71,9 +71,7 @@ define(function (require) {
margin: 8,
// formatter: null,
// 其余属性默认使用全局文本样式，详见TEXTSTYLE
textStyle: {
fontSize: 12
}
fontSize: 12
},
// 分隔线
splitLine: {
......
src/coord/calendar/CalendarModel.js
浏览文件 @ 67f7a37c
......@@ -56,9 +56,7 @@ define(function (require) {
position: 'start',
margin: '50%', // 50% of cellSize
nameMap: 'en',
textStyle: {
color: '#000'
}
color: '#000'
},
// month text style
......@@ -75,9 +73,7 @@ define(function (require) {
// cn en []
nameMap: 'en',
formatter: null,
textStyle: {
color: '#000'
}
color: '#000'
},
// year text style
......@@ -88,12 +84,10 @@ define(function (require) {
position: null,
margin: 30,
formatter: null,
textStyle: {
color: '#ccc',
fontFamily: 'sans-serif',
fontWeight: 'bolder',
fontSize: 20
}
color: '#ccc',
fontFamily: 'sans-serif',
fontWeight: 'bolder',
fontSize: 20
}
},
......
src/coord/cartesian/Grid.js
浏览文件 @ 67f7a37c
......@@ -31,7 +31,7 @@ define(function(require, factory) {
function getLabelUnionRect(axis) {
var axisModel = axis.model;
var labels = axisModel.getFormattedLabels();
var textStyleModel = axisModel.getModel('axisLabel.textStyle');
var axisLabelModel = axisModel.getModel('axisLabel');
var rect;
var step = 1;
var labelCount = labels.length;
......@@ -41,7 +41,7 @@ define(function(require, factory) {
}
for (var i = 0; i < labelCount; i += step) {
if (!axis.isLabelIgnored(i)) {
var singleRect = textStyleModel.getTextRect(labels[i]);
var singleRect = axisLabelModel.getTextRect(labels[i]);
// FIXME consider label rotate
rect ? rect.union(singleRect) : (rect = singleRect);
}
......
src/coord/geo/GeoModel.js
浏览文件 @ 67f7a37c
......@@ -24,10 +24,8 @@ define(function (require) {
init: function (option) {
ComponentModel.prototype.init.apply(this, arguments);
// Default label emphasis `position` and `show`
modelUtil.defaultEmphasis(
option.label, ['position', 'show', 'textStyle', 'distance', 'formatter']
);
// Default label emphasis `show`
modelUtil.defaultEmphasis(option.label, ['show']);
},
optionUpdated: function () {
......
src/model/Series.js
浏览文件 @ 67f7a37c
......@@ -98,9 +98,8 @@ define(function(require) {
);
zrUtil.merge(option, this.getDefaultOption());
// Default label emphasis `position` and `show`
// FIXME Set label in mergeOption
modelUtil.defaultEmphasis(option.label, modelUtil.LABEL_OPTIONS);
// Default label emphasis `show`
modelUtil.defaultEmphasis(option.label, ['show']);
this.fillDataTextStyle(option.data);
......@@ -127,13 +126,14 @@ define(function(require) {
},
fillDataTextStyle: function (data) {
// Default data label emphasis `position` and `show`
// Default data label emphasis `show`
// FIXME Tree structure data ?
// FIXME Performance ?
if (data) {
var props = ['show'];
for (var i = 0; i < data.length; i++) {
if (data[i] && data[i].label) {
modelUtil.defaultEmphasis(data[i].label, modelUtil.LABEL_OPTIONS);
modelUtil.defaultEmphasis(data[i].label, props);
}
}
}
......
src/model/mixin/textStyle.js
浏览文件 @ 67f7a37c
......@@ -3,6 +3,8 @@ define(function (require) {
var textContain = require('zrender/contain/text');
var graphicUtil = require('../../util/graphic');
var PATH_COLOR = ['textStyle', 'color'];
return {
/**
* Get color property or get color from option.textStyle.color
......@@ -11,7 +13,7 @@ define(function (require) {
getTextColor: function () {
var ecModel = this.ecModel;
return this.getShallow('color')
|| (ecModel && ecModel.get('textStyle.color'));
|| (ecModel && ecModel.get(PATH_COLOR));
},
/**
......
src/preprocessor/backwardCompat.js
浏览文件 @ 67f7a37c
......@@ -57,15 +57,16 @@ define(function (require) {
var each = zrUtil.each;
return function (option) {
each(option.series, function (seriesOpt) {
compatStyle(option);
var series = option.series;
each(zrUtil.isArray(series) ? series : [series], function (seriesOpt) {
if (!zrUtil.isObject(seriesOpt)) {
return;
}
var seriesType = seriesOpt.type;
compatStyle(seriesOpt);
if (seriesType === 'pie' || seriesType === 'gauge') {
if (seriesOpt.clockWise != null) {
seriesOpt.clockwise = seriesOpt.clockWise;
......
src/preprocessor/helper/compatStyle.js
浏览文件 @ 67f7a37c
define(function (require) {
var zrUtil = require('zrender/core/util');
var modelUtil = require('../../util/model');
var each = zrUtil.each;
var isObject = zrUtil.isObject;
var POSSIBLE_STYLES = [
'areaStyle', 'lineStyle', 'nodeStyle', 'linkStyle',
......@@ -9,45 +13,90 @@ define(function (require) {
function compatItemStyle(opt) {
var itemStyleOpt = opt && opt.itemStyle;
if (itemStyleOpt) {
zrUtil.each(POSSIBLE_STYLES, function (styleName) {
var normalItemStyleOpt = itemStyleOpt.normal;
var emphasisItemStyleOpt = itemStyleOpt.emphasis;
if (normalItemStyleOpt && normalItemStyleOpt[styleName]) {
opt[styleName] = opt[styleName] || {};
if (!opt[styleName].normal) {
opt[styleName].normal = normalItemStyleOpt[styleName];
}
else {
zrUtil.merge(opt[styleName].normal, normalItemStyleOpt[styleName]);
}
normalItemStyleOpt[styleName] = null;
if (!itemStyleOpt) {
return;
}
for (var i = 0, len = POSSIBLE_STYLES.length; i < len; i++) {
var styleName = POSSIBLE_STYLES[i];
var normalItemStyleOpt = itemStyleOpt.normal;
var emphasisItemStyleOpt = itemStyleOpt.emphasis;
if (normalItemStyleOpt && normalItemStyleOpt[styleName]) {
opt[styleName] = opt[styleName] || {};
if (!opt[styleName].normal) {
opt[styleName].normal = normalItemStyleOpt[styleName];
}
if (emphasisItemStyleOpt && emphasisItemStyleOpt[styleName]) {
opt[styleName] = opt[styleName] || {};
if (!opt[styleName].emphasis) {
opt[styleName].emphasis = emphasisItemStyleOpt[styleName];
}
else {
zrUtil.merge(opt[styleName].emphasis, emphasisItemStyleOpt[styleName]);
}
emphasisItemStyleOpt[styleName] = null;
else {
zrUtil.merge(opt[styleName].normal, normalItemStyleOpt[styleName]);
}
normalItemStyleOpt[styleName] = null;
}
if (emphasisItemStyleOpt && emphasisItemStyleOpt[styleName]) {
opt[styleName] = opt[styleName] || {};
if (!opt[styleName].emphasis) {
opt[styleName].emphasis = emphasisItemStyleOpt[styleName];
}
});
else {
zrUtil.merge(opt[styleName].emphasis, emphasisItemStyleOpt[styleName]);
}
emphasisItemStyleOpt[styleName] = null;
}
}
}
function compatTextStyle(opt, propName) {
compatTextStyleSingle(opt && opt[propName]);
}
function compatTextStyleSingle(labelOptSingle) {
var textStyle = isObject(labelOptSingle) && labelOptSingle.textStyle;
if (textStyle) {
for (var i = 0, len = modelUtil.TEXT_STYLE_OPTIONS.length; i < len; i++) {
var propName = modelUtil.TEXT_STYLE_OPTIONS[i];
if (textStyle.hasOwnProperty(propName)) {
labelOptSingle[propName] = textStyle[propName];
}
}
}
}
return function (seriesOpt) {
if (!seriesOpt) {
function compatLabelTextStyle(labelOpt) {
if (isObject(labelOpt)) {
compatTextStyleSingle(labelOpt.normal);
compatTextStyleSingle(labelOpt.emphasis);
}
}
function processSeries(seriesOpt) {
if (!isObject(seriesOpt)) {
return;
}
compatItemStyle(seriesOpt);
compatItemStyle(seriesOpt.markPoint);
compatLabelTextStyle(seriesOpt.label);
// treemap
compatLabelTextStyle(seriesOpt.upperLabel);
var markPoint = seriesOpt.markPoint;
compatItemStyle(markPoint);
compatLabelTextStyle(markPoint && markPoint.label);
var markLine = seriesOpt.markLine;
compatItemStyle(seriesOpt.markLine);
compatLabelTextStyle(markLine && markLine.label);
var markArea = seriesOpt.markArea;
compatLabelTextStyle(markArea && markArea.label);
// For gauge
compatTextStyle(seriesOpt, 'axisLabel');
compatTextStyle(seriesOpt, 'title');
compatTextStyle(seriesOpt, 'detail');
var data = seriesOpt.data;
if (data) {
for (var i = 0; i < data.length; i++) {
compatItemStyle(data[i]);
compatLabelTextStyle(data[i] && data[i].label);
}
// mark point data
var markPoint = seriesOpt.markPoint;
......@@ -55,6 +104,7 @@ define(function (require) {
var mpData = markPoint.data;
for (var i = 0; i < mpData.length; i++) {
compatItemStyle(mpData[i]);
compatLabelTextStyle(mpData[i] && mpData[i].label);
}
}
// mark line data
......@@ -64,13 +114,58 @@ define(function (require) {
for (var i = 0; i < mlData.length; i++) {
if (zrUtil.isArray(mlData[i])) {
compatItemStyle(mlData[i][0]);
compatLabelTextStyle(mlData[i][0] && mlData[i][0].label);
compatItemStyle(mlData[i][1]);
compatLabelTextStyle(mlData[i][1] && mlData[i][1].label);
}
else {
compatItemStyle(mlData[i]);
compatLabelTextStyle(mlData[i] && mlData[i].label);
}
}
}
}
}
function toArr(o) {
return zrUtil.isArray(o) ? o : o ? [o] : [];
}
function toObj(o) {
return (zrUtil.isArray(o) ? o[0] : o) || {};
}
return function (option) {
each(toArr(option.series), function (seriesOpt) {
isObject(seriesOpt) && processSeries(seriesOpt);
});
each(
['xAxis', 'yAxis', 'radiusAxis', 'angleAxis', 'singleAxis', 'parallelAxis', 'radar'],
function (axisName) {
each(toArr(option[axisName]), function (axisOpt) {
if (axisOpt) {
compatTextStyle(axisOpt, 'axisLabel');
compatTextStyle(axisOpt.axisPointer, 'label');
}
});
}
);
each(toArr(option.parallel), function (parallelOpt) {
var parallelAxisDefault = parallelOpt && parallelOpt.parallelAxisDefault;
compatTextStyle(parallelAxisDefault, 'axisLabel');
compatTextStyle(parallelAxisDefault && parallelAxisDefault.axisPointer, 'label');
});
each(toArr(option.calendar), function (calendarOpt) {
compatTextStyle(calendarOpt, 'dayLabel');
compatTextStyle(calendarOpt, 'monthLabel');
compatTextStyle(calendarOpt, 'yearLabel');
});
compatTextStyle(toObj(option.timeline), 'label');
compatTextStyle(toObj(option.axisPointer), 'label');
compatTextStyle(toObj(option.tooltip).axisPointer, 'label');
};
});
\ No newline at end of file
src/util/graphic.js
浏览文件 @ 67f7a37c
......@@ -249,7 +249,8 @@ define(function(require) {
el.__zr && el.__zr.addHover(el, el.__hoverStl);
}
else {
el.setStyle(el.__hoverStl);
el.style.extendFrom(el.__hoverStl, false);
el.dirty(false);
el.z2 += 1;
}
......@@ -269,7 +270,10 @@ define(function(require) {
el.__zr && el.__zr.removeHover(el);
}
else {
normalStl && el.setStyle(normalStl);
normalStl && (
el.style.extendFrom(normalStl, false),
el.dirty(false)
);
el.z2 -= 1;
}
......@@ -390,6 +394,21 @@ define(function(require) {
.on('normal', leaveEmphasis);
};
/**
* Set basic textStyle properties.
* @param {Object|module:zrender/graphic/Style} style
* @param {Object} specifiedTextStyle Can be overrided by settings in model.
* @param {module:echarts/model/Model} 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();
return style;
};
/**
* Set text option in the style
* @param {Object} textStyle
......@@ -397,26 +416,103 @@ define(function(require) {
* @param {string} color
*/
graphic.setText = function (textStyle, labelModel, color) {
var labelPosition = labelModel.getShallow('position') || 'inside';
var labelOffset = labelModel.getShallow('offset');
var labelColor = labelPosition.indexOf('inside') >= 0 ? 'white' : color;
var labelRotate = labelModel.getShallow('rotate');
labelRotate != null && (labelRotate *= Math.PI / 180);
var textStyleModel = labelModel.getModel('textStyle');
zrUtil.extend(textStyle, {
textDistance: labelModel.getShallow('distance') || 5,
textFont: textStyleModel.getFont(),
textPosition: labelPosition,
textOffset: labelOffset,
textRotation: labelRotate,
textAlign: textStyleModel.getShallow('align'),
textVerticalAlign: textStyleModel.getShallow('verticalAlign')
|| textStyleModel.getShallow('baseline'),
textFill: textStyleModel.getTextColor() || labelColor
});
setTextStyleCommon(textStyle, labelModel, {isRectText: true});
textStyle.textFill = textStyle.textFill
|| (textStyle.textPosition.indexOf('inside') >= 0 ? 'white' : color);
};
/**
* {
* disableBox: boolean,
* isRectText: boolean,
* autoColor: string, specify a color when color is 'auto',
* for textFill, textStroke, textBackgroundColor, and textBorderColor
* forceRich: boolean
* }
*/
function setTextStyleCommon(textStyle, textStyleModel, opt) {
if (opt && opt.isRectText) {
textStyle.textPosition = textStyleModel.getShallow('position') || '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') || 5;
}
var ecModel = textStyleModel.ecModel;
var globalTextStyle = ecModel && ecModel.option.textStyle;
var rich = textStyleModel.getShallow('rich');
var richResult;
if (rich) {
richResult = {};
for (var name in rich) {
if (rich.hasOwnProperty(name)) {
// Cascade is supported in rich.
var richTextStyle = textStyleModel.getModel(['rich', name]);
// In rich, never `disableBox`.
setTokenTextStyle(richResult[name] = {}, richTextStyle, globalTextStyle, opt);
}
}
}
textStyle.rich = richResult;
setTokenTextStyle(textStyle, textStyleModel, globalTextStyle, opt);
if (opt && opt.forceRich && !opt.textStyle) {
opt.textStyle = {};
}
return textStyle;
}
function setTokenTextStyle(textStyle, textStyleModel, globalTextStyle, opt) {
textStyle.textFill = getAutoColor(textStyleModel.getTextColor(), opt);
textStyle.textStroke = getAutoColor(
textStyleModel.getShallow('textBorderColor')
|| (globalTextStyle && globalTextStyle.textBorderColor)
);
textStyle.textLineWidth = textStyleModel.getShallow('textBorderWidth');
textStyle.textFont = textStyleModel.getFont();
textStyle.textAlign = textStyleModel.getShallow('align');
textStyle.textVerticalAlign = textStyleModel.getShallow('verticalAlign')
|| textStyleModel.getShallow('baseline');
textStyle.textLineHeight = textStyleModel.getShallow('lineHeight');
textStyle.textWidth = textStyleModel.getShallow('width');
textStyle.textHeight = textStyleModel.getShallow('height');
textStyle.textTag = textStyleModel.getShallow('tag');
if (!opt || !opt.disableBox) {
textStyle.textBackgroundColor = getAutoColor(textStyleModel.getShallow('backgroundColor'), opt);
textStyle.textPadding = textStyleModel.getShallow('padding');
textStyle.textBorderColor = getAutoColor(textStyleModel.getShallow('borderColor'), opt);
textStyle.textBorderWidth = textStyleModel.getShallow('borderWidth');
textStyle.textBorderRadius = textStyleModel.getShallow('borderRadius');
textStyle.textBoxShadowColor = textStyleModel.getShallow('shadowColor');
textStyle.textBoxShadowBlur = textStyleModel.getShallow('shadowBlur');
textStyle.textBoxShadowOffsetX = textStyleModel.getShallow('shadowOffsetX');
textStyle.textBoxShadowOffsetY = textStyleModel.getShallow('shadowOffsetY');
}
textStyle.textShadowColor = textStyleModel.getShallow('textShadowColor')
|| (globalTextStyle && globalTextStyle.textShadowColor);
textStyle.textShadowBlur = textStyleModel.getShallow('textShadowBlur')
|| (globalTextStyle && globalTextStyle.textShadowBlur);
textStyle.textShadowOffsetX = textStyleModel.getShallow('textShadowOffsetX')
|| (globalTextStyle && globalTextStyle.textShadowOffsetX);
textStyle.textShadowOffsetY = textStyleModel.getShallow('textShadowOffsetY')
|| (globalTextStyle && globalTextStyle.textShadowOffsetY);
}
function getAutoColor(color, opt) {
return color !== 'auto' ? color : (opt && opt.autoColor) ? opt.autoColor : null;
}
graphic.getFont = function (opt, ecModel) {
var gTextStyleModel = ecModel && ecModel.getModel('textStyle');
return [
......
src/util/model.js
浏览文件 @ 67f7a37c
......@@ -29,9 +29,7 @@ define(function(require) {
* normal: {
* show: false,
* position: 'outside',
* textStyle: {
* fontSize: 18
* }
* fontSize: 18
* },
* emphasis: {
* show: true
......@@ -46,19 +44,33 @@ define(function(require) {
var normalOpt = opt.normal = opt.normal || {};
// Default emphasis option from normal
each(subOpts, function (subOptName) {
var val = zrUtil.retrieve(emphasisOpt[subOptName], normalOpt[subOptName]);
if (val != null) {
emphasisOpt[subOptName] = val;
for (var i = 0, len = subOpts.length; i < len; i++) {
var subOptName = subOpts[i];
if (!emphasisOpt.hasOwnProperty(subOptName)
&& normalOpt.hasOwnProperty(subOptName)
) {
emphasisOpt[subOptName] = normalOpt[subOptName];
}
});
}
}
};
modelUtil.LABEL_OPTIONS = [
'position', 'offset', 'rotate', 'show', 'textStyle', 'distance', 'formatter'
modelUtil.TEXT_STYLE_OPTIONS = [
'fontStyle', 'fontWeight', 'fontSize', 'fontFamily',
'rich', 'tag', 'color', 'textBorderColor', 'textBorderWidth',
'width', 'height', 'lineHeight', 'align', 'verticalAlign', 'baseline',
'shadowColor', 'shadowBlur', 'shadowOffsetX', 'shadowOffsetY',
'textShadowColor', 'textShadowBlur', 'textShadowOffsetX', 'textShadowOffsetY',
'backgroundColor', 'borderColor', 'borderWidth', 'borderRadius', 'padding'
];
// modelUtil.LABEL_OPTIONS = modelUtil.TEXT_STYLE_OPTIONS.concat([
// 'position', 'offset', 'rotate', 'origin', 'show', 'distance', 'formatter',
// 'fontStyle', 'fontWeight', 'fontSize', 'fontFamily',
// // FIXME: deprecated, check and remove it.
// 'textStyle'
// ]);
/**
* data could be [12, 2323, {value: 223}, [1221, 23], {value: [2, 23]}]
* This helper method retieves value from data.
......
test/gauge.html
浏览文件 @ 67f7a37c
......@@ -64,16 +64,107 @@
color: 'auto'
}
},
axisLabel: {
formatter: '{a|{value}} km/h',
rich: {
a: {
color: '#222',
textBorderColor: '#fff',
textBorderWidth: 2,
backgroundColor: 'auto',
padding: [2, 4],
borderRadius: 3
}
}
},
title : {
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
textStyle: { // Test compat
fontWeight: 'bolder',
fontSize: 20,
fontStyle: 'italic'
}
fontSize: 26,
},
offsetCenter: [0, 0],
formatter: '{a|单位：}{value}',
backgroundColor: '#aabbcc',
padding: 10,
borderRadius: 5,
fontStyle: 'italic'
},
detail : {
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
fontWeight: 'bolder'
fontSize: 24,
fontWeight: 'bold',
textStyle: { // Test compat
backgroundColor: '#eeffee',
},
offsetCenter: [0, '70%'],
borderRadius: 10,
borderWidth: 2,
borderColor: '#33aa33',
shadowBlur: 2,
shadowColor: '#222',
shadowOffsetX: 5,
shadowOffsetY: 5,
width: 'auto',
rotate: 15,
textShadowBlur: 2,
textShadowColor: '#66eeaa',
textShadowOffsetX: 2,
textShadowOffsetY: 3,
formatter: [
'{a|码表}',
'{b|{value}}{c|km/h}',
'{j|width is this line is 400}',
'{d|left}{lineHeight|}{f|top}{g|bottom}middle{e|right}{e1|右边}'
].join('\n'),
rich: {
a: {
fontSize: 34,
color: 'auto',
},
b: {
fontSize: 20,
color: '#12294f',
align: 'center',
padding: [0, 5, 0, 0]
},
c: {
fontSize: 14,
color: '#aa99bb',
rotate: 30,
backgroundColor: '#223344',
borderRadius: 3,
padding: [2, 10]
},
d: {
align: 'left'
},
e: {
align: 'right'
},
e1: {
color: '#33aa99',
fontSize: 16,
align: 'right'
},
f: {
verticalAlign: 'top'
},
g: {
verticalAlign: 'bottom'
},
h: {
align: 'center'
},
i: {
align: 'center'
},
j: {
width: 400,
backgroundColor: '#aabbcc',
color: '#123'
},
lineHeight: {
lineHeight: 46
}
}
},
data:[{value: 40, name: 'km/h'}]
......@@ -113,8 +204,9 @@
},
detail : {
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
fontWeight: 'bolder'
}
fontWeight: 'bolder',
fontSize: 12
},
},
data:[{value: 1.5, name: 'x1000 r/min'}]
},
......@@ -202,7 +294,7 @@
}
},
pointer: {
width:2
width: 2
},
title : {
show: false
......
test/line.html
浏览文件 @ 67f7a37c
......@@ -112,6 +112,13 @@
symbolSize: 10,
data: data1,
itemStyle: itemStyle,
lineStyle: {
normal: {
shadowBlur: 4,
shadowOffsetX: 3,
shadowOffsetY: 3
}
},
step: 'end'
}, {
name: 'line2',
......
test/pie.html
浏览文件 @ 67f7a37c
......@@ -87,7 +87,43 @@
{value:310, name:'邮件营销'},
{value:234, name:'联盟广告'},
{value:135, name:'视频广告'},
{value:1548, name:'搜索引擎'}
{value:548, name:'搜索引擎', label: {
normal: {
textStyle: { // compat
color: 'red'
},
formatter: '{a|富文本：}\n{hr|}\n{b|{b}}{c|}',
backgroundColor: 'rgba(0,0,0,0.1)',
borderColor: '#777',
borderWidth: 2,
padding: 5,
borderRadius: 3,
rich: {
a: {
color: '#334499',
align: 'left'
},
b: {
fontSize: 20
},
hr: {
tag: 'hr',
width: '100%outer',
color: '#999',
lineWidth: 1,
lineHeight: 15
},
c: {
backgroundColor: {
image: './data/hill-Kilimanjaro.png',
},
height: 30
}
}
},
emphasis: {
}
}}
],
itemStyle: itemStyle
}]
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或