Skip to content

I
incubator-echarts

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

从无法访问的项目Fork

通知 1
Star 0
Fork 0
I
incubator-echarts

体验新版 GitCode，发现更多精彩内容 >>

提交 babf3c98 编写于 作者: S sushuang
浏览文件
操作

tweak ...

上级 318f207e
隐藏空白更改
内联 并排
Showing with 144 addition and 91 deletion
src/chart/funnel/FunnelView.js
浏览文件 @ babf3c98
...@@ -136,9 +136,7 @@ define(function (require) { ...@@ -136,9 +136,7 @@ define(function (require) {
labelDataIndex: idx, labelDataIndex: idx,
defaultText: data.getName(idx), defaultText: data.getName(idx),
autoColor: visualColor, autoColor: visualColor,
checkInside: function (model, opt) { useInsideStyle: !!labelLayout.inside
return labelLayout.inside;
}
}, },
{ {
textAlign: labelLayout.textAlign, textAlign: labelLayout.textAlign,
......
src/chart/helper/Line.js
浏览文件 @ babf3c98
...@@ -321,7 +321,7 @@ define(function (require) { ...@@ -321,7 +321,7 @@ define(function (require) {
} }
// label.afterUpdate = lineAfterUpdate; // label.afterUpdate = lineAfterUpdate;
if (showLabel || hoverShowLabel) { if (showLabel) {
var labelStyle = graphic.setTextStyle(label.style, labelModel, { var labelStyle = graphic.setTextStyle(label.style, labelModel, {
text: normalText text: normalText
}, { }, {
......
src/chart/map/MapView.js
浏览文件 @ babf3c98
...@@ -128,7 +128,7 @@ define(function (require) { ...@@ -128,7 +128,7 @@ define(function (require) {
var onEmphasis = function () { var onEmphasis = function () {
var hoverStyle = graphic.setTextStyle({}, hoverLabelModel, { var hoverStyle = graphic.setTextStyle({}, hoverLabelModel, {
text: hoverLabelModel.get('show') ? emphasisText : null text: hoverLabelModel.get('show') ? emphasisText : null
}, {isRectText: true, checkInside: false}, true); }, {isRectText: true, useInsideStyle: false}, true);
circle.style.extendFrom(hoverStyle); circle.style.extendFrom(hoverStyle);
// Make label upper than others if overlaps. // Make label upper than others if overlaps.
circle.__mapOriginalZ2 = circle.z2; circle.__mapOriginalZ2 = circle.z2;
...@@ -139,7 +139,7 @@ define(function (require) { ...@@ -139,7 +139,7 @@ define(function (require) {
graphic.setTextStyle(circle.style, labelModel, { graphic.setTextStyle(circle.style, labelModel, {
text: labelModel.get('show') ? normalText : null, text: labelModel.get('show') ? normalText : null,
textPosition: labelModel.getShallow('position') || 'bottom' textPosition: labelModel.getShallow('position') || 'bottom'
}, {isRectText: true, checkInside: false}); }, {isRectText: true, useInsideStyle: false});
if (circle.__mapOriginalZ2 != null) { if (circle.__mapOriginalZ2 != null) {
circle.z2 = circle.__mapOriginalZ2; circle.z2 = circle.__mapOriginalZ2;
......
src/chart/pie/PieView.js
浏览文件 @ babf3c98
...@@ -238,9 +238,7 @@ define(function (require) { ...@@ -238,9 +238,7 @@ define(function (require) {
labelDataIndex: idx, labelDataIndex: idx,
defaultText: data.getName(idx), defaultText: data.getName(idx),
autoColor: visualColor, autoColor: visualColor,
checkInside: function (model, opt) { useInsideStyle: !!labelLayout.inside
return labelLayout.inside;
}
}, },
{ {
textAlign: labelLayout.textAlign, textAlign: labelLayout.textAlign,
......
src/component/helper/MapDraw.js
浏览文件 @ babf3c98
...@@ -256,7 +256,7 @@ define(function (require) { ...@@ -256,7 +256,7 @@ define(function (require) {
labelFetcher: labelFetcher, labelFetcher: labelFetcher,
labelDataIndex: query, labelDataIndex: query,
defaultText: region.name, defaultText: region.name,
checkInside: false useInsideStyle: false
}, },
{ {
textAlign: 'center', textAlign: 'center',
......
src/model/mixin/textStyle.js
浏览文件 @ babf3c98
...@@ -8,14 +8,14 @@ define(function (require) { ...@@ -8,14 +8,14 @@ define(function (require) {
return { return {
/** /**
* Get color property or get color from option.textStyle.color * Get color property or get color from option.textStyle.color
* @param {boolean} [noDefault] * @param {boolean} [isEmphasis]
* @return {string} * @return {string}
*/ */
getTextColor: function (noDefault) { getTextColor: function (isEmphasis) {
var ecModel = this.ecModel; var ecModel = this.ecModel;
return this.getShallow('color') return this.getShallow('color')
|| ( || (
(!noDefault && ecModel) ? ecModel.get(PATH_COLOR) : null (!isEmphasis && ecModel) ? ecModel.get(PATH_COLOR) : null
); );
}, },
......
src/util/graphic.js
浏览文件 @ babf3c98
...@@ -250,6 +250,14 @@ define(function(require) { ...@@ -250,6 +250,14 @@ define(function(require) {
el.__zr && el.__zr.addHover(el, el.__hoverStl); el.__zr && el.__zr.addHover(el, el.__hoverStl);
} }
else { else {
var style = el.style;
var insideRollbackOpt = style.insideRollbackOpt;
// Consider case: only `position: 'top'` is set on emphasis, then text
// color should be returned to `autoColor`, rather than remain '#fff'.
// So we should rollback then apply again after style merging.
insideRollbackOpt && rollbackInsideStyle(style);
// styles can be: // styles can be:
// { // {
// label: { // label: {
...@@ -269,7 +277,18 @@ define(function(require) { ...@@ -269,7 +277,18 @@ define(function(require) {
// all properties in merge. So we use merge mode when setting style here, where // 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: // 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`. // null/undefined can not be used to remove style any more in `emphasis`.
el.style.extendFrom(el.__hoverStl); style.extendFrom(el.__hoverStl);
// Do not save `insideRollback`.
if (insideRollbackOpt) {
applyInsideStyle(style, insideRollbackOpt);
// textFill may be rollbacked to null.
if (style.textFill == null) {
style.textFill = insideRollbackOpt.autoColor;
}
}
el.dirty(false); el.dirty(false);
el.z2 += 1; el.z2 += 1;
} }
...@@ -443,8 +462,13 @@ define(function(require) { ...@@ -443,8 +462,13 @@ define(function(require) {
// This scenario, `label.normal.show = true; label.emphasis.show = false`, // This scenario, `label.normal.show = true; label.emphasis.show = false`,
// is not supported util someone requests. // is not supported util someone requests.
var showNormal = normalModel.getShallow('show');
var showEmphasis = emphasisModel.getShallow('show');
// Consider performance, only fetch label when necessary. // Consider performance, only fetch label when necessary.
var normalStyleText = normalModel.getShallow('show') // If `normal.show` is `false` and `emphasis.show` is `true` and `emphasis.formatter` is not set,
// label should be displayed, where text is fetched by `normal.formatter` or `opt.defaultText`.
var baseText = (showNormal || showEmphasis)
? zrUtil.retrieve2( ? zrUtil.retrieve2(
labelFetcher labelFetcher
? labelFetcher.getFormattedLabel(labelDataIndex, 'normal', null, labelDimIndex) ? labelFetcher.getFormattedLabel(labelDataIndex, 'normal', null, labelDimIndex)
...@@ -452,12 +476,13 @@ define(function(require) { ...@@ -452,12 +476,13 @@ define(function(require) {
opt.defaultText opt.defaultText
) )
: null; : null;
var emphasisStyleText = emphasisModel.getShallow('show') var normalStyleText = showNormal ? baseText : null;
var emphasisStyleText = showEmphasis
? zrUtil.retrieve2( ? zrUtil.retrieve2(
labelFetcher labelFetcher
? labelFetcher.getFormattedLabel(labelDataIndex, 'emphasis', null, labelDimIndex) ? labelFetcher.getFormattedLabel(labelDataIndex, 'emphasis', null, labelDimIndex)
: null, : null,
normalStyleText baseText
) )
: null; : null;
...@@ -483,12 +508,12 @@ define(function(require) { ...@@ -483,12 +508,12 @@ define(function(require) {
* @param {module:echarts/model/Model} model * @param {module:echarts/model/Model} model
* @param {Object} [specifiedTextStyle] Can be overrided by settings in model. * @param {Object} [specifiedTextStyle] Can be overrided by settings in model.
* @param {Object} [opt] See `opt` of `setTextStyleCommon`. * @param {Object} [opt] See `opt` of `setTextStyleCommon`.
* @param {boolean} [noDefault] * @param {boolean} [isEmphasis]
*/ */
var setTextStyle = graphic.setTextStyle = function ( var setTextStyle = graphic.setTextStyle = function (
textStyle, textStyleModel, specifiedTextStyle, opt, noDefault textStyle, textStyleModel, specifiedTextStyle, opt, isEmphasis
) { ) {
setTextStyleCommon(textStyle, textStyleModel, opt, noDefault); setTextStyleCommon(textStyle, textStyleModel, opt, isEmphasis);
specifiedTextStyle && zrUtil.extend(textStyle, specifiedTextStyle); specifiedTextStyle && zrUtil.extend(textStyle, specifiedTextStyle);
textStyle.host && textStyle.host.dirty && textStyle.host.dirty(false); textStyle.host && textStyle.host.dirty && textStyle.host.dirty(false);
...@@ -505,43 +530,42 @@ define(function(require) { ...@@ -505,43 +530,42 @@ define(function(require) {
*/ */
graphic.setText = function (textStyle, labelModel, defaultColor) { graphic.setText = function (textStyle, labelModel, defaultColor) {
var opt = {isRectText: true}; var opt = {isRectText: true};
var noDefault; var isEmphasis;
if (defaultColor === false) { if (defaultColor === false) {
noDefault = true; isEmphasis = true;
} }
else { else {
// Support setting color as 'auto' to get visual color. // Support setting color as 'auto' to get visual color.
opt.autoColor = defaultColor; opt.autoColor = defaultColor;
opt.checkInside = defaultCheckInside;
} }
setTextStyleCommon(textStyle, labelModel, opt, noDefault); setTextStyleCommon(textStyle, labelModel, opt, isEmphasis);
textStyle.host && textStyle.host.dirty && textStyle.host.dirty(false); textStyle.host && textStyle.host.dirty && textStyle.host.dirty(false);
}; };
function defaultCheckInside(labelModel, textPosition) {
return textPosition && textPosition.indexOf('inside') >= 0;
}
/** /**
* { * {
* disableBox: boolean, Whether diable drawing box of block (outer most). * disableBox: boolean, Whether diable drawing box of block (outer most).
* isRectText: boolean, * isRectText: boolean,
* autoColor: string, specify a color when color is 'auto', * autoColor: string, specify a color when color is 'auto',
* for textFill, textStroke, textBackgroundColor, and textBorderColor. * for textFill, textStroke, textBackgroundColor, and textBorderColor.
* If autoColor specified, it is used as default textFill. * If autoColor specified, it is used as default textFill.
* checkInside: function, if not set as `false` and not a function and isRectText is `true` and * useInsideStyle:
* use defaultCheckInside by default. * `true`: Use inside style (textFill, textStroke, textLineWidth)
* if `textFill` is not specified.
* `false`: Do not use inside style.
* `null/undefined`: use inside style if `isRectText` is true and
* `textFill` is not specified and textPosition contains `'inside'`.
* forceRich: boolean * forceRich: boolean
* } * }
*/ */
function setTextStyleCommon(textStyle, textStyleModel, opt, noDefault) { function setTextStyleCommon(textStyle, textStyleModel, opt, isEmphasis) {
// Consider there will be abnormal when merge hover style to normal style if given default value. // Consider there will be abnormal when merge hover style to normal style if given default value.
opt = opt || EMPTY_OBJ; opt = opt || EMPTY_OBJ;
if (opt.isRectText) { if (opt.isRectText) {
var textPosition = textStyleModel.getShallow('position') var textPosition = textStyleModel.getShallow('position')
|| (noDefault ? null : 'inside'); || (isEmphasis ? null : 'inside');
// 'outside' is not a valid zr textPostion value, but used // 'outside' is not a valid zr textPostion value, but used
// in bar series, and magric type should be considered. // in bar series, and magric type should be considered.
textPosition === 'outside' && (textPosition = 'top'); textPosition === 'outside' && (textPosition = 'top');
...@@ -551,7 +575,7 @@ define(function(require) { ...@@ -551,7 +575,7 @@ define(function(require) {
labelRotate != null && (labelRotate *= Math.PI / 180); labelRotate != null && (labelRotate *= Math.PI / 180);
textStyle.textRotation = labelRotate; textStyle.textRotation = labelRotate;
textStyle.textDistance = zrUtil.retrieve2( textStyle.textDistance = zrUtil.retrieve2(
textStyleModel.getShallow('distance'), noDefault ? null : 5 textStyleModel.getShallow('distance'), isEmphasis ? null : 5
); );
} }
...@@ -583,13 +607,13 @@ define(function(require) { ...@@ -583,13 +607,13 @@ define(function(require) {
// Cascade is supported in rich. // Cascade is supported in rich.
var richTextStyle = textStyleModel.getModel(['rich', name]); var richTextStyle = textStyleModel.getModel(['rich', name]);
// In rich, never `disableBox`. // In rich, never `disableBox`.
setTokenTextStyle(richResult[name] = {}, richTextStyle, globalTextStyle, opt, noDefault); setTokenTextStyle(richResult[name] = {}, richTextStyle, globalTextStyle, opt, isEmphasis);
} }
} }
} }
textStyle.rich = richResult; textStyle.rich = richResult;
setTokenTextStyle(textStyle, textStyleModel, globalTextStyle, opt, noDefault, true); setTokenTextStyle(textStyle, textStyleModel, globalTextStyle, opt, isEmphasis, true);
if (opt.forceRich && !opt.textStyle) { if (opt.forceRich && !opt.textStyle) {
opt.textStyle = {}; opt.textStyle = {};
...@@ -632,43 +656,32 @@ define(function(require) { ...@@ -632,43 +656,32 @@ define(function(require) {
return richItemNameMap; return richItemNameMap;
} }
function setTokenTextStyle(textStyle, textStyleModel, globalTextStyle, opt, noDefault, isBlock) { function setTokenTextStyle(textStyle, textStyleModel, globalTextStyle, opt, isEmphasis, isBlock) {
// In merge mode, default value should not be given. // In merge mode, default value should not be given.
globalTextStyle = !noDefault && globalTextStyle || EMPTY_OBJ; globalTextStyle = !isEmphasis && globalTextStyle || EMPTY_OBJ;
var textFill = getAutoColor(textStyleModel.getShallow('color'), opt); textStyle.textFill = getAutoColor(textStyleModel.getShallow('color'), opt)
var textStroke = getAutoColor(textStyleModel.getShallow('textBorderColor'), opt); || globalTextStyle.color;
var textLineWidth = textStyleModel.getShallow('textBorderWidth'); textStyle.textStroke = getAutoColor(textStyleModel.getShallow('textBorderColor'), opt)
|| globalTextStyle.textBorderColor;
if (!noDefault) { textStyle.textLineWidth = zrUtil.retrieve2(
textFill == null && (textFill = globalTextStyle.color); textStyleModel.getShallow('textBorderWidth'),
textStroke == null && (textStroke = globalTextStyle.textBorderColor); globalTextStyle.textBorderWidth
textLineWidth == null && (textLineWidth = globalTextStyle.textBorderWidth); );
var checkInside = opt.checkInside;
!checkInside && opt.isRectText && checkInside !== false && (
checkInside = defaultCheckInside
);
if (textFill == null if (!isEmphasis) {
&& checkInside if (isBlock) {
&& checkInside(textStyleModel, textStyle.textPosition) // Always set `insideRollback`, for clearing previous.
) { textStyle.insideRollback = applyInsideStyle(textStyle, opt);
textFill = '#fff'; textStyle.insideRollbackOpt = opt;
// Consider text with #fff overflow its container.
if (textStroke == null) {
textStroke = opt.autoColor;
textLineWidth == null && (textLineWidth = 2);
}
} }
textFill == null && (textFill = opt.autoColor); // Set default finally.
if (textStyle.textFill == null) {
textStyle.textFill = opt.autoColor;
}
} }
textStyle.textFill = textFill;
textStyle.textStroke = textStroke;
textStyle.textLineWidth = textLineWidth;
// Do not use `getFont` here, because merge should be supported, where // Do not use `getFont` here, because merge should be supported, where
// part of these properties may be changed in emphasis style, and the // part of these properties may be changed in emphasis style, and the
// others should remain their original value got from normal style. // others should remain their original value got from normal style.
...@@ -713,6 +726,42 @@ define(function(require) { ...@@ -713,6 +726,42 @@ define(function(require) {
return color !== 'auto' ? color : (opt && opt.autoColor) ? opt.autoColor : null; return color !== 'auto' ? color : (opt && opt.autoColor) ? opt.autoColor : null;
} }
function applyInsideStyle(textStyle, opt) {
var useInsideStyle = opt.useInsideStyle;
var textPosition = textStyle.textPosition;
var insideRollback;
if (textStyle.textFill == null
&& useInsideStyle !== false
&& (useInsideStyle === true
|| (opt.isRectText && textPosition && textPosition.indexOf('inside') >= 0)
)
) {
insideRollback = {
textFill: null,
textStroke: textStyle.textStroke,
textLineWidth: textStyle.textLineWidth
};
textStyle.textFill = '#fff';
// Consider text with #fff overflow its container.
if (textStyle.textStroke == null) {
textStyle.textStroke = opt.autoColor;
textStyle.textLineWidth == null && (textStyle.textLineWidth = 2);
}
}
return insideRollback;
}
function rollbackInsideStyle(style) {
var insideRollback = style.insideRollback;
if (insideRollback) {
style.textFill = insideRollback.textFill;
style.textStroke = insideRollback.textStroke;
style.textLineWidth = insideRollback.textLineWidth;
}
}
graphic.getFont = function (opt, ecModel) { graphic.getFont = function (opt, ecModel) {
// ecModel or default text style model. // ecModel or default text style model.
var gTextStyleModel = ecModel || ecModel.getModel('textStyle'); var gTextStyleModel = ecModel || ecModel.getModel('textStyle');
......
test/pie.html
浏览文件 @ babf3c98
...@@ -83,7 +83,14 @@ ...@@ -83,7 +83,14 @@
} }
}, },
data:[ data:[
{value:335, name:'直接访问', cursor: 'move'}, {value:235, name:'直接访问', cursor: 'move'},
{value: 163, name: '标签在内部',
label: {
normal: {
position: 'inside'
}
}
},
{value:310, name:'邮件营销', label: { {value:310, name:'邮件营销', label: {
normal: { normal: {
textStyle: { // compat textStyle: { // compat
......
test/scatter.html
浏览文件 @ babf3c98
...@@ -29,6 +29,12 @@ ...@@ -29,6 +29,12 @@
var data2 = []; var data2 = [];
var data3 = []; var data3 = [];
var names = [
'diamond, red, show inside label only on hover',
'green, show top label only on hover',
'indigo, show inside label on normal'
];
var random = function (max) { var random = function (max) {
return (Math.random() * max).toFixed(3); return (Math.random() * max).toFixed(3);
} }
...@@ -41,7 +47,7 @@ ...@@ -41,7 +47,7 @@
chart.setOption({ chart.setOption({
legend: { legend: {
data: ['scatter', 'scatter2', 'scatter3'] data: names.slice()
}, },
toolbox: { toolbox: {
left: 'left', left: 'left',
...@@ -73,27 +79,21 @@ ...@@ -73,27 +79,21 @@
} }
}, },
series: [{ series: [{
name: 'scatter', name: names[0],
type: 'scatter', type: 'scatter',
label: { label: {
emphasis: { emphasis: {
show: true show: true
} }
}, },
// symbol: 'diamond', symbol: 'diamond',
symbolSize: function (val) { symbolSize: function (val) {
return val[2] * 40; return val[2] * 40;
}, },
// itemStyle: {
// normal: {
// color: function (params) {
// return 'rgba(30, 70, 50, ' + params.value[2] + ')';
// }
// }
// },
data: data1 data: data1
}, { },
name: 'scatter2', {
name: names[1],
type: 'scatter', type: 'scatter',
label: { label: {
emphasis: { emphasis: {
...@@ -107,19 +107,20 @@ ...@@ -107,19 +107,20 @@
symbolSize: function (val) { symbolSize: function (val) {
return val[2] * 40; return val[2] * 40;
}, },
// itemStyle: { itemStyle: {
// normal: { normal: {
// label: { color: function (params) {
// show: true return 'rgba(30, 70, 50, ' + params.value[2] + ')';
// } }
// } }
// }, },
data: data2 data: data2
}, { },
name: 'scatter3', {
name: names[2],
type: 'scatter', type: 'scatter',
label: { label: {
emphasis: { normal: {
show: true show: true
} }
}, },
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或