Skip to content

I
incubator-echarts

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

从无法访问的项目Fork

通知 1
Star 0
Fork 0
I
incubator-echarts

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

提交 abd6b3e1 编写于 作者: K kener
浏览文件
操作

tooltip支持position回调 #292

上级 269eeaaf
隐藏空白更改
内联 并排
Showing with 87 addition and 85 deletion
doc/example/tooltip.html
浏览文件 @ abd6b3e1
...@@ -79,6 +79,11 @@ option = { ...@@ -79,6 +79,11 @@ option = {
borderRadius : 8, borderRadius : 8,
borderWidth: 2, borderWidth: 2,
padding: 10, // [5, 10, 15, 20] padding: 10, // [5, 10, 15, 20]
position : function(p) {
// 位置回调
console.log && console.log(p);
return [p[0] + 10, p[1] - 10];
},
textStyle : { textStyle : {
color: 'yellow', color: 'yellow',
decoration: 'none', decoration: 'none',
...@@ -134,6 +139,7 @@ option = { ...@@ -134,6 +139,7 @@ option = {
tooltip : { // Series config. tooltip : { // Series config.
trigger: 'item', trigger: 'item',
backgroundColor: 'black', backgroundColor: 'black',
position : [0, 0],
formatter: "Series formatter: <br/>{a}<br/>{b}:{c}" formatter: "Series formatter: <br/>{a}<br/>{b}:{c}"
}, },
stack: '数据项', stack: '数据项',
......
src/component/tooltip.js
浏览文件 @ abd6b3e1
...@@ -243,9 +243,18 @@ define(function (require) { ...@@ -243,9 +243,18 @@ define(function (require) {
}, },
_show : function (x, y, specialCssText) { _show : function (position, x, y, specialCssText) {
var domHeight = this._tDom.offsetHeight; var domHeight = this._tDom.offsetHeight;
var domWidth = this._tDom.offsetWidth; var domWidth = this._tDom.offsetWidth;
if (position) {
if (typeof position == 'function') {
position = position([x, y]);
}
if (position instanceof Array) {
x = position[0];
y = position[1];
}
}
if (x + domWidth > this._zrWidth) { if (x + domWidth > this._zrWidth) {
// 太靠右 // 太靠右
//x = this._zrWidth - domWidth; //x = this._zrWidth - domWidth;
...@@ -506,6 +515,7 @@ define(function (require) { ...@@ -506,6 +515,7 @@ define(function (require) {
var y; var y;
var formatter; var formatter;
var position;
var showContent; var showContent;
var specialCssText = ''; var specialCssText = '';
if (this.option.tooltip.trigger == 'axis') { if (this.option.tooltip.trigger == 'axis') {
...@@ -513,6 +523,7 @@ define(function (require) { ...@@ -513,6 +523,7 @@ define(function (require) {
return; return;
} }
formatter = this.option.tooltip.formatter; formatter = this.option.tooltip.formatter;
position = this.option.tooltip.position;
} }
if (xAxisIndex != -1 if (xAxisIndex != -1
...@@ -528,12 +539,13 @@ define(function (require) { ...@@ -528,12 +539,13 @@ define(function (require) {
if (series[i].xAxisIndex == xAxisIndex if (series[i].xAxisIndex == xAxisIndex
&& this.deepQuery([series[i], this.option], 'tooltip.trigger') == 'axis' && this.deepQuery([series[i], this.option], 'tooltip.trigger') == 'axis'
) { ) {
showContent = this.query( showContent = this.query(series[i], 'tooltip.showContent')
series[i], 'tooltip.showContent' || showContent;
) || showContent; formatter = this.query(series[i], 'tooltip.formatter')
formatter = this.query( || formatter;
series[i], 'tooltip.formatter' position = this.query(series[i], 'tooltip.position')
) || formatter; || position;
specialCssText += this._style(this.query(series[i], 'tooltip')); specialCssText += this._style(this.query(series[i], 'tooltip'));
seriesArray.push(series[i]); seriesArray.push(series[i]);
seriesIndex.push(i); seriesIndex.push(i);
...@@ -573,12 +585,12 @@ define(function (require) { ...@@ -573,12 +585,12 @@ define(function (require) {
if (series[i].yAxisIndex == yAxisIndex if (series[i].yAxisIndex == yAxisIndex
&& this.deepQuery([series[i], this.option], 'tooltip.trigger') == 'axis' && this.deepQuery([series[i], this.option], 'tooltip.trigger') == 'axis'
) { ) {
showContent = this.query( showContent = this.query(series[i], 'tooltip.showContent')
series[i], 'tooltip.showContent' || showContent;
) || showContent; formatter = this.query(series[i], 'tooltip.formatter')
formatter = this.query( || formatter;
series[i], 'tooltip.formatter' position = this.query(series[i], 'tooltip.position')
) || formatter; || position;
specialCssText += this._style(this.query(series[i], 'tooltip')); specialCssText += this._style(this.query(series[i], 'tooltip'));
seriesArray.push(series[i]); seriesArray.push(series[i]);
seriesIndex.push(i); seriesIndex.push(i);
...@@ -709,7 +721,7 @@ define(function (require) { ...@@ -709,7 +721,7 @@ define(function (require) {
this.dom.firstChild.appendChild(this._tDom); this.dom.firstChild.appendChild(this._tDom);
this.hasAppend = true; this.hasAppend = true;
} }
this._show(x + 10, y + 10, specialCssText); this._show(position, x + 10, y + 10, specialCssText);
} }
}, },
...@@ -728,6 +740,7 @@ define(function (require) { ...@@ -728,6 +740,7 @@ define(function (require) {
var seriesArray = []; var seriesArray = [];
var formatter; var formatter;
var position;
var showContent; var showContent;
var specialCssText = ''; var specialCssText = '';
if (this.option.tooltip.trigger == 'axis') { if (this.option.tooltip.trigger == 'axis') {
...@@ -735,9 +748,9 @@ define(function (require) { ...@@ -735,9 +748,9 @@ define(function (require) {
return false; return false;
} }
formatter = this.option.tooltip.formatter; formatter = this.option.tooltip.formatter;
position = this.option.tooltip.position;
} }
var indicatorName = var indicatorName = this.option.polar[polarIndex].indicator[dataIndex].text;
this.option.polar[polarIndex].indicator[dataIndex].text;
// 找到所有用这个极坐标并且axis触发的系列数据 // 找到所有用这个极坐标并且axis触发的系列数据
for (var i = 0, l = series.length; i < l; i++) { for (var i = 0, l = series.length; i < l; i++) {
...@@ -745,21 +758,15 @@ define(function (require) { ...@@ -745,21 +758,15 @@ define(function (require) {
continue; continue;
} }
if (series[i].polarIndex == polarIndex if (series[i].polarIndex == polarIndex
&& this.deepQuery( && this.deepQuery([series[i], this.option], 'tooltip.trigger') == 'axis'
[series[i], this.option], 'tooltip.trigger'
) == 'axis'
) { ) {
showContent = this.query( showContent = this.query(series[i], 'tooltip.showContent')
series[i], || showContent;
'tooltip.showContent' formatter = this.query(series[i], 'tooltip.formatter')
) || showContent; || formatter;
formatter = this.query( position = this.query(series[i], 'tooltip.position')
series[i], || position;
'tooltip.formatter' specialCssText += this._style(this.query(series[i], 'tooltip'));
) || formatter;
specialCssText += this._style(this.query(
series[i], 'tooltip'
));
seriesArray.push(series[i]); seriesArray.push(series[i]);
} }
} }
...@@ -847,6 +854,7 @@ define(function (require) { ...@@ -847,6 +854,7 @@ define(function (require) {
this.hasAppend = true; this.hasAppend = true;
} }
this._show( this._show(
position,
zrEvent.getX(this._event), zrEvent.getX(this._event),
zrEvent.getY(this._event), zrEvent.getY(this._event),
specialCssText specialCssText
...@@ -867,6 +875,7 @@ define(function (require) { ...@@ -867,6 +875,7 @@ define(function (require) {
var special2 = ecData.get(this._curTarget, 'special2'); var special2 = ecData.get(this._curTarget, 'special2');
// 从低优先级往上找到trigger为item的formatter和样式 // 从低优先级往上找到trigger为item的formatter和样式
var formatter; var formatter;
var position;
var showContent; var showContent;
var specialCssText = ''; var specialCssText = '';
var indicator; var indicator;
...@@ -875,43 +884,37 @@ define(function (require) { ...@@ -875,43 +884,37 @@ define(function (require) {
// 全局 // 全局
if (this.option.tooltip.trigger == 'item') { if (this.option.tooltip.trigger == 'item') {
formatter = this.option.tooltip.formatter; formatter = this.option.tooltip.formatter;
position = this.option.tooltip.position;
} }
// 系列 // 系列
if (this.query(serie, 'tooltip.trigger') == 'item') { if (this.query(serie, 'tooltip.trigger') == 'item') {
showContent = this.query( showContent = this.query(serie, 'tooltip.showContent')
serie, 'tooltip.showContent' || showContent;
) || showContent; formatter = this.query(serie, 'tooltip.formatter')
formatter = this.query( || formatter;
serie, 'tooltip.formatter' position = this.query(serie, 'tooltip.position')
) || formatter; || position;
specialCssText += this._style(this.query( specialCssText += this._style(this.query(serie, 'tooltip'));
serie, 'tooltip'
));
} }
// 数据项 // 数据项
showContent = this.query( showContent = this.query(data, 'tooltip.showContent')
data, 'tooltip.showContent' || showContent;
) || showContent; formatter = this.query(data, 'tooltip.formatter')
formatter = this.query( || formatter;
data, 'tooltip.formatter' position = this.query(data, 'tooltip.position')
) || formatter; || position;
specialCssText += this._style(this.query(data, 'tooltip')); specialCssText += this._style(this.query(data, 'tooltip'));
} }
else { else {
showContent = this.deepQuery( showContent = this.deepQuery([data, serie, this.option], 'tooltip.showContent');
[data, serie, this.option], formatter = this.deepQuery([data, serie, this.option], 'tooltip.islandFormatter');
'tooltip.showContent' position = this.deepQuery([data, serie, this.option], 'tooltip.islandPosition');
);
formatter = this.deepQuery(
[data, serie, this.option],
'tooltip.islandFormatter'
);
} }
if (typeof formatter == 'function') { if (typeof formatter == 'function') {
this._curTicket = (serie.name || '') this._curTicket = (serie.name || '')
+ ':' + ':'
+ ecData.get(this._curTarget, 'dataIndex'); + ecData.get(this._curTarget, 'dataIndex');
this._tDom.innerHTML = formatter( this._tDom.innerHTML = formatter(
[ [
serie.name || '', serie.name || '',
...@@ -929,20 +932,17 @@ define(function (require) { ...@@ -929,20 +932,17 @@ define(function (require) {
formatter = formatter.replace('{a}','{a0}') formatter = formatter.replace('{a}','{a0}')
.replace('{b}','{b0}') .replace('{b}','{b0}')
.replace('{c}','{c0}'); .replace('{c}','{c0}');
formatter = formatter.replace( formatter = formatter.replace('{a0}', this._encodeHTML(serie.name || ''))
'{a0}', this._encodeHTML(serie.name || '')
)
.replace('{b0}', this._encodeHTML(name)) .replace('{b0}', this._encodeHTML(name))
.replace( .replace(
'{c0}', '{c0}',
value instanceof Array value instanceof Array ? value : this.numAddCommas(value)
? value : this.numAddCommas(value)
); );
formatter = formatter.replace('{d}','{d0}') formatter = formatter.replace('{d}','{d0}')
.replace('{d0}', special || ''); .replace('{d0}', special || '');
formatter = formatter.replace('{e}','{e0}') formatter = formatter.replace('{e}','{e0}')
.replace('{e0}', ecData.get(this._curTarget, 'special2') || ''); .replace('{e0}', ecData.get(this._curTarget, 'special2') || '');
this._tDom.innerHTML = formatter; this._tDom.innerHTML = formatter;
} }
...@@ -953,19 +953,15 @@ define(function (require) { ...@@ -953,19 +953,15 @@ define(function (require) {
? (this._encodeHTML(serie.name) + '<br/>') ? (this._encodeHTML(serie.name) + '<br/>')
: '' : ''
) )
+ (name === '' + (name === '' ? '' : (this._encodeHTML(name) + ' : '))
? '' : (this._encodeHTML(name) + ' : ')
)
+ value + value
+ (typeof special == 'undefined' + (typeof special == 'undefined'
? '' ? '' : (' (' + special + ')')
: (' (' + special + ')')); );
} }
else if (serie.type == ecConfig.CHART_TYPE_RADAR && special) { else if (serie.type == ecConfig.CHART_TYPE_RADAR && special) {
indicator = special; indicator = special;
html += this._encodeHTML( html += this._encodeHTML(name === '' ? (serie.name || '') : name);
name === '' ? (serie.name || '') : name
);
html += html === '' ? '' : '<br />'; html += html === '' ? '' : '<br />';
for (var i = 0 ; i < indicator.length; i ++) { for (var i = 0 ; i < indicator.length; i ++) {
html += this._encodeHTML(indicator[i].text) + ' : ' html += this._encodeHTML(indicator[i].text) + ' : '
...@@ -977,32 +973,31 @@ define(function (require) { ...@@ -977,32 +973,31 @@ define(function (require) {
if (typeof special2 == 'undefined') { if (typeof special2 == 'undefined') {
// 外环上 // 外环上
this._tDom.innerHTML = this._encodeHTML(name) + ' (' this._tDom.innerHTML = this._encodeHTML(name) + ' ('
+ this.numAddCommas(value) + ')'; + this.numAddCommas(value) + ')';
} }
else { else {
var name1 = this._encodeHTML(name); var name1 = this._encodeHTML(name);
var name2 = this._encodeHTML(special); var name2 = this._encodeHTML(special);
// 内部弦上 // 内部弦上
this._tDom.innerHTML = (typeof serie.name != 'undefined' this._tDom.innerHTML = (typeof serie.name != 'undefined'
? (this._encodeHTML(serie.name) + '<br/>') ? (this._encodeHTML(serie.name) + '<br/>') : ''
: '') )
+ name1 + ' -> ' + name2 + name1 + ' -> ' + name2
+ ' (' + this.numAddCommas(value) + ')' + ' (' + this.numAddCommas(value) + ')'
+ '<br />' + '<br />'
+ name2 + ' -> ' + name1 + name2 + ' -> ' + name1
+ ' (' + this.numAddCommas(special2) + ')'; + ' (' + this.numAddCommas(special2) + ')';
} }
} }
else { else {
this._tDom.innerHTML = (typeof serie.name != 'undefined' this._tDom.innerHTML = (typeof serie.name != 'undefined'
? (this._encodeHTML(serie.name) + '<br/>') ? (this._encodeHTML(serie.name) + '<br/>') : ''
: '') )
+ this._encodeHTML(name) + ' : ' + this._encodeHTML(name) + ' : '
+ this.numAddCommas(value) + + this.numAddCommas(value) +
(typeof special == 'undefined' (typeof special == 'undefined'
? '' ? '' : (' ('+ this.numAddCommas(special) +')')
: (' ('+ this.numAddCommas(special) +')') );
);
} }
} }
...@@ -1029,6 +1024,7 @@ define(function (require) { ...@@ -1029,6 +1024,7 @@ define(function (require) {
} }
this._show( this._show(
position,
zrEvent.getX(this._event) + 20, zrEvent.getX(this._event) + 20,
zrEvent.getY(this._event) - 20, zrEvent.getY(this._event) - 20,
specialCssText specialCssText
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或