Skip to content

Commit

Permalink
tooltip showContent支撑
Browse files Browse the repository at this point in the history 
以及代码优化
  • Loading branch information
@kener
kener committed Sep 29, 2013
1 parent d07982b commit 7cb8c0d
Show file tree
Hide file tree
Showing 5 changed files with 92 additions and 27 deletions.
1 change: 1 addition & 0 deletions doc/changelog.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,6 +87,7 @@ <h3>Latest<small>（After 2013-09-13）</small></h3>
<li>[^] refresh后清除残留animation</li>
<li>[^] 增加版本信息和依赖判断</li>
<li>[^] [K]barWidth，barMaxWidth支持</li>
<li>[^] [tooltip]内容主体显示策略配置，support <a href="https://github.com/ecomfe/echarts/issues/102" target="_blank">this 》</a></li>
<li>[#] [legend]修复散点图个性化symbol图例不对</li>
<li>[#] [pie][polar][title]修复resize响应 fix <a href="https://github.com/ecomfe/echarts/issues/83" target="_blank">this 》</a></li>
<li>[#] [categoryAxis]splitLine颜色数组中取值问题 fix <a href="https://github.com/ecomfe/echarts/issues/90" target="_blank">this 》</a></li>
Expand Down
5 changes: 5 additions & 0 deletions doc/doc.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1000,6 +1000,11 @@ <h4>tooltip<a name="Tooltip"> </a></h4>
<td> true </td>
<td> 显示策略，可选为：true（显示） | false（隐藏） </td>
</tr>
<tr>
<td> {boolean} showContent </td>
<td> true </td>
<td> tooltip主体内容显示策略，只需tooltip触发事件或显示axisPointer而不需要显示内容时可配置该项为falase，<br/>可选为：true（显示） | false（隐藏） </td>
</tr>
<tr>
<td> {string | Function} formatter </td>
<td> null </td>
Expand Down
23 changes: 21 additions & 2 deletions src/component/categoryAxis.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -570,7 +570,8 @@ define(function (require) {
// Math.floor可能引起一些偏差，但性能会更好
for (var i = 0; i < dataLength; i++) {
if (data[i] == value
|| (data[i].value && data[i].value == value)
|| (typeof data[i].value != 'undefined'
&& data[i].value == value)
) {
if (option.position == 'bottom'
|| option.position == 'top'
Expand Down Expand Up @@ -609,7 +610,25 @@ define(function (require) {
}
}
else {
return getCoord(option.data[dataIndex]);
var gap = getGap();
var position = option.boundaryGap ? gap : 0;

if (option.position == 'bottom'
|| option.position == 'top'
) {
// 横向
position = grid.getX() + position;
}
else {
// 纵向
position = grid.getYend() - position;
}
position += dataIndex * gap;
return (dataIndex === 0 || dataIndex == option.data.length - 1)
? position
: Math.floor(position);

// return getCoord(option.data[dataIndex]);
}
}

Expand Down
89 changes: 64 additions & 25 deletions src/component/tooltip.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -256,9 +256,7 @@ define(function (require) {
}
else {
// 数据项事件
if (_curTarget._type == 'island'
&& self.deepQuery([option], 'tooltip.show')
) {
if (_curTarget._type == 'island' && option.tooltip.show) {
_showItemTrigger();
return;
}
Expand Down Expand Up @@ -320,9 +318,10 @@ define(function (require) {
_getNearestDataIndex('x', xAxis.getAxis(xAxisIndex))
);
return;
} else if (yAxis.getAxis(yAxisIndex)
&& yAxis.getAxis(yAxisIndex).type
== ecConfig.COMPONENT_TYPE_AXIS_CATEGORY
}
else if (yAxis.getAxis(yAxisIndex)
&& yAxis.getAxis(yAxisIndex).type
== ecConfig.COMPONENT_TYPE_AXIS_CATEGORY
) {
// 纵轴为类目轴
_showAxisTrigger(xAxisIndex, yAxisIndex,
Expand Down Expand Up @@ -452,12 +451,13 @@ define(function (require) {
var y;

var formatter;
var showContent;
var specialCssText = '';
if (self.deepQuery([option], 'tooltip.trigger') == 'axis') {
if (self.deepQuery([option], 'tooltip.show') === false) {
if (option.tooltip.trigger == 'axis') {
if (option.tooltip.show === false) {
return;
}
formatter = self.deepQuery([option],'tooltip.formatter');
formatter = option.tooltip.formatter;
}

if (xAxisIndex != -1
Expand All @@ -472,6 +472,10 @@ define(function (require) {
[series[i], option], 'tooltip.trigger'
) == 'axis'
) {
showContent = self.deepQuery(
[series[i]],
'tooltip.showContent'
) || showContent;
formatter = self.deepQuery(
[series[i]],
'tooltip.formatter'
Expand Down Expand Up @@ -504,6 +508,10 @@ define(function (require) {
[series[i], option], 'tooltip.trigger'
) == 'axis'
) {
showContent = self.deepQuery(
[series[i]],
'tooltip.showContent'
) || showContent;
formatter = self.deepQuery(
[series[i]],
'tooltip.formatter'
Expand Down Expand Up @@ -549,6 +557,7 @@ define(function (require) {
);
}
else if (typeof formatter == 'string') {
_curTicket = NaN;
formatter = formatter.replace('{a}','{a0}')
.replace('{b}','{b0}')
.replace('{c}','{c0}');
Expand All @@ -575,6 +584,7 @@ define(function (require) {
_tDom.innerHTML = formatter;
}
else {
_curTicket = NaN;
formatter = categoryAxis.getNameByIndex(dataIndex);
for (var i = 0, l = seriesArray.length; i < l; i++) {
formatter += '<br/>' + seriesArray[i].name + ' : ';
Expand All @@ -589,6 +599,11 @@ define(function (require) {
_tDom.innerHTML = formatter;
}

if (showContent === false || !option.tooltip.showContent) {
// 只用tooltip的行为，不显示主体
return;
}

if (!self.hasAppend) {
_tDom.style.left = _zrWidth / 2 + 'px';
_tDom.style.top = _zrHeight / 2 + 'px';
Expand All @@ -614,12 +629,13 @@ define(function (require) {
var seriesArray = [];

var formatter;
var showContent;
var specialCssText = '';
if (self.deepQuery([option], 'tooltip.trigger') == 'axis') {
if (self.deepQuery([option], 'tooltip.show') === false) {
if (option.tooltip.trigger == 'axis') {
if (option.tooltip.show === false) {
return false;
}
formatter = self.deepQuery([option],'tooltip.formatter');
formatter = option.tooltip.formatter;
}

// 找到所有用这个极坐标并且axis触发的系列数据
Expand All @@ -629,6 +645,10 @@ define(function (require) {
[series[i], option], 'tooltip.trigger'
) == 'axis'
) {
showContent = self.deepQuery(
[series[i]],
'tooltip.showContent'
) || showContent;
formatter = self.deepQuery(
[series[i]],
'tooltip.formatter'
Expand Down Expand Up @@ -704,6 +724,11 @@ define(function (require) {
_tDom.innerHTML = formatter;
}

if (showContent === false || !option.tooltip.showContent) {
// 只用tooltip的行为，不显示主体
return;
}

if (!self.hasAppend) {
_tDom.style.left = _zrWidth / 2 + 'px';
_tDom.style.top = _zrHeight / 2 + 'px';
Expand All @@ -727,20 +752,20 @@ define(function (require) {
var speical = ecData.get(_curTarget, 'special');
// 从低优先级往上找到trigger为item的formatter和样式
var formatter;
var showContent;
var specialCssText = '';
var indicator;
var html = '';
if (_curTarget._type != 'island') {
// 全局
if (self.deepQuery([option], 'tooltip.trigger') == 'item'
) {
formatter = self.deepQuery(
[option], 'tooltip.formatter'
) || formatter;
if (option.tooltip.trigger == 'item') {
formatter = option.tooltip.formatter;
}
// 系列
if (self.deepQuery([serie], 'tooltip.trigger') == 'item'
) {
if (self.deepQuery([serie], 'tooltip.trigger') == 'item') {
showContent = self.deepQuery(
[serie], 'tooltip.showContent'
) || showContent;
formatter = self.deepQuery(
[serie], 'tooltip.formatter'
) || formatter;
Expand All @@ -749,12 +774,19 @@ define(function (require) {
));
}
// 数据项
showContent = self.deepQuery(
[data], 'tooltip.showContent'
) || showContent;
formatter = self.deepQuery(
[data], 'tooltip.formatter'
) || formatter;
specialCssText += _style(self.deepQuery([data], 'tooltip'));
}
else {
showContent = self.deepQuery(
[data, serie, option],
'tooltip.showContent'
);
formatter = self.deepQuery(
[data, serie, option],
'tooltip.islandFormatter'
Expand All @@ -777,6 +809,7 @@ define(function (require) {
);
}
else if (typeof formatter == 'string') {
_curTicket = NaN;
formatter = formatter.replace('{a}','{a0}')
.replace('{b}','{b0}')
.replace('{c}','{c0}')
Expand All @@ -792,6 +825,7 @@ define(function (require) {
_tDom.innerHTML = formatter;
}
else {
_curTicket = NaN;
if (serie.type == ecConfig.CHART_TYPE_SCATTER) {
_tDom.innerHTML = serie.name + '<br/>' +
(name === '' ? '' : (name + ' : '))
Expand All @@ -817,6 +851,17 @@ define(function (require) {
}
}

if (!_axisLineShape.invisible) {
_axisLineShape.invisible = true;
zr.modShape(_axisLineShape.id, _axisLineShape);
zr.refresh();
}

if (showContent === false || !option.tooltip.showContent) {
// 只用tooltip的行为，不显示主体
return;
}

if (!self.hasAppend) {
_tDom.style.left = _zrWidth / 2 + 'px';
_tDom.style.top = _zrHeight / 2 + 'px';
Expand All @@ -829,12 +874,6 @@ define(function (require) {
zrEvent.getY(_event) - 20,
specialCssText
);

if (!_axisLineShape.invisible) {
_axisLineShape.invisible = true;
zr.modShape(_axisLineShape.id, _axisLineShape);
zr.refresh();
}
}

/**
Expand Down
1 change: 1 addition & 0 deletions src/config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -158,6 +158,7 @@ define(function() {
// 提示框
tooltip: {
show: true,
showContent: true, // tooltip主体内容
trigger: 'item', // 触发类型，默认数据触发，见下图，可选为：'item' ¦ 'axis'
// formatter: null // 内容格式器：{string}（Template） ¦ {Function}
islandFormatter: '{a} <br/>{b} : {c}', // 数据孤岛内容格式器，非标准参数
Expand Down

0 comments on commit 7cb8c0d

Please sign in to comment.