/**
* echarts组件：提示框
*
* @desc echarts基于Canvas，纯Javascript图表库，提供直观，生动，可交互，可个性化定制的数据统计图表。
* @author Kener (@Kener-林峰, linzhifeng@baidu.com)
*
*/
define(function (require) {
/**
* 构造函数
* @param {Object} messageCenter echart消息中心
* @param {ZRender} zr zrender实例
* @param {Object} option 提示框参数
* @param {HtmlElement} dom 目标对象
*/
function Tooltip(messageCenter, zr, option, dom) {
var Base = require('./base');
Base.call(this, zr);
var ecConfig = require('../config');
var ecData = require('../util/ecData');
var zrConfig = require('zrender/config');
var zrShape = require('zrender/shape');
var zrEvent = require('zrender/tool/event');
var zrArea = require('zrender/tool/area');
var zrColor = require('zrender/tool/color');
var zrUtil = require('zrender/tool/util');
var zrShapeBase = require('zrender/shape/base');
var rectangle = zrShape.get('rectangle');
var self = this;
self.type = ecConfig.COMPONENT_TYPE_TOOLTIP;
var _zlevelBase = self.getZlevelBase();
var component = {}; // 组件索引
var grid;
var xAxis;
var yAxis;
var polar;
// tooltip dom & css
var _tDom = document.createElement('div');
// 通用样式
var _gCssText = 'position:absolute;'
+ 'display:block;'
+ 'border-style:solid;'
+ 'white-space:nowrap;';
// 默认样式
var _defaultCssText; // css样式缓存
var _needAxisTrigger; // 坐标轴触发
var _hidingTicket;
var _hideDelay; // 隐藏延迟
var _showingTicket;
var _showDelay; // 显示延迟
var _curTarget;
var _event;
var _curTicket; // 异步回调标识，用来区分多个请求
// 缓存一些高宽数据
var _zrHeight = zr.getHeight();
var _zrWidth = zr.getWidth();
var _lastTipShape = false;
var _axisLineShape = {
shape : 'line',
id : zr.newShapeId('tooltip'),
zlevel: _zlevelBase,
invisible : true,
hoverable: false,
style : {
// lineWidth : 2,
// strokeColor : ecConfig.categoryAxis.axisLine.lineStyle.color
}
};
var _axisShadowShape = {
shape : 'line',
id : zr.newShapeId('tooltip'),
zlevel: 1, // grid上，chart下
invisible : true,
hoverable: false,
style : {
// lineWidth : 10,
// strokeColor : ecConfig.categoryAxis.axisLine.lineStyle.color
}
};
zr.addShape(_axisLineShape);
zr.addShape(_axisShadowShape);
/**
* 根据配置设置dom样式
*/
function _style(opt) {
if (!opt) {
return '';
}
var cssText = [];
if (opt.transitionDuration) {
var transitionText = 'left ' + opt.transitionDuration + 's,'
+ 'top ' + opt.transitionDuration + 's';
cssText.push(
'transition:' + transitionText
);
cssText.push(
'-moz-transition:' + transitionText
);
cssText.push(
'-webkit-transition:' + transitionText
);
cssText.push(
'-o-transition:' + transitionText
);
}
if (opt.backgroundColor) {
// for sb ie~
cssText.push(
'background-Color:' + zrColor.toHex(
opt.backgroundColor
)
);
cssText.push('filter:alpha(opacity=70)');
cssText.push('background-Color:' + opt.backgroundColor);
}
if (typeof opt.borderWidth != 'undefined') {
cssText.push('border-width:' + opt.borderWidth + 'px');
}
if (typeof opt.borderColor != 'undefined') {
cssText.push('border-color:' + opt.borderColor);
}
if (typeof opt.borderRadius != 'undefined') {
cssText.push(
'border-radius:' + opt.borderRadius + 'px'
);
cssText.push(
'-moz-border-radius:' + opt.borderRadius + 'px'
);
cssText.push(
'-webkit-border-radius:' + opt.borderRadius + 'px'
);
cssText.push(
'-o-border-radius:' + opt.borderRadius + 'px'
);
}
var textStyle = opt.textStyle;
if (textStyle) {
textStyle.color && cssText.push('color:' + textStyle.color);
textStyle.decoration && cssText.push(
'text-decoration:' + textStyle.decoration
);
textStyle.align && cssText.push(
'text-align:' + textStyle.align
);
textStyle.fontFamily && cssText.push(
'font-family:' + textStyle.fontFamily
);
textStyle.fontSize && cssText.push(
'font-size:' + textStyle.fontSize + 'px'
);
textStyle.fontSize && cssText.push(
'line-height:' + Math.round(textStyle.fontSize*3/2) + 'px'
);
textStyle.fontStyle && cssText.push(
'font-style:' + textStyle.fontStyle
);
textStyle.fontWeight && cssText.push(
'font-weight:' + textStyle.fontWeight
);
}
var padding = opt.padding;
if (typeof padding != 'undefined') {
padding = self.reformCssArray(padding);
cssText.push(
'padding:' + padding[0] + 'px '
+ padding[1] + 'px '
+ padding[2] + 'px '
+ padding[3] + 'px'
);
}
cssText = cssText.join(';') + ';';
return cssText;
}
function _hide() {
if (_tDom) {
_tDom.style.display = 'none';
}
var needRefresh = false;
if (!_axisLineShape.invisible) {
_axisLineShape.invisible = true;
zr.modShape(_axisLineShape.id, _axisLineShape);
needRefresh = true;
}
if (!_axisShadowShape.invisible) {
_axisShadowShape.invisible = true;
zr.modShape(_axisShadowShape.id, _axisShadowShape);
needRefresh = true;
}
if (_lastTipShape && _lastTipShape.tipShape.length > 0) {
zr.delShape(_lastTipShape.tipShape);
_lastTipShape = false;
}
needRefresh && zr.refresh();
}
function _show(x, y, specialCssText) {
var domHeight = _tDom.offsetHeight;
var domWidth = _tDom.offsetWidth;
if (x + domWidth > _zrWidth) {
x = _zrWidth - domWidth;
}
if (y + domHeight > _zrHeight) {
y = _zrHeight - domHeight;
}
if (y < 20) {
y = 0;
}
_tDom.style.cssText = _gCssText
+ _defaultCssText
+ (specialCssText ? specialCssText : '')
+ 'left:' + x + 'px;top:' + y + 'px;';
if (_zrWidth - x < 100 || _zrHeight - y < 100) {
// 太靠边的做一次refixed
setTimeout(_refixed, 20);
}
}
function _refixed() {
if (_tDom) {
var cssText = '';
var domHeight = _tDom.offsetHeight;
var domWidth = _tDom.offsetWidth;
if (_tDom.offsetLeft + domWidth > _zrWidth) {
cssText += 'left:' + (_zrWidth - domWidth) + 'px;';
}
if (_tDom.offsetTop + domHeight > _zrHeight) {
cssText += 'top:' + (_zrHeight - domHeight) + 'px;';
}
if (cssText !== '') {
_tDom.style.cssText += cssText;
}
}
}
function _tryShow() {
var needShow;
var trigger;
if (!_curTarget) {
// 坐标轴事件
_findPolarTrigger() || _findAxisTrigger();
}
else {
// 数据项事件
if (_curTarget._type == 'island' && option.tooltip.show) {
_showItemTrigger();
return;
}
var serie = ecData.get(_curTarget, 'series');
var data = ecData.get(_curTarget, 'data');
needShow = self.deepQuery(
[data, serie, option],
'tooltip.show'
);
if (typeof serie == 'undefined'
|| typeof data == 'undefined'
|| needShow === false
) {
// 不响应tooltip的数据对象延时隐藏
clearTimeout(_hidingTicket);
clearTimeout(_showingTicket);
_hidingTicket = setTimeout(_hide, _hideDelay);
}
else {
trigger = self.deepQuery(
[data, serie, option],
'tooltip.trigger'
);
trigger == 'axis'
? _showAxisTrigger(
serie.xAxisIndex, serie.yAxisIndex,
ecData.get(_curTarget, 'dataIndex')
)
: _showItemTrigger();
}
}
}
/**
* 直角系
*/
function _findAxisTrigger() {
if (!xAxis || !yAxis) {
_hidingTicket = setTimeout(_hide, _hideDelay);
return;
}
var series = option.series;
var xAxisIndex;
var yAxisIndex;
for (var i = 0, l = series.length; i < l; i++) {
// 找到第一个axis触发tooltip的系列
if (self.deepQuery(
[series[i], option], 'tooltip.trigger'
) == 'axis'
) {
xAxisIndex = series[i].xAxisIndex || 0;
yAxisIndex = series[i].yAxisIndex || 0;
if (xAxis.getAxis(xAxisIndex)
&& xAxis.getAxis(xAxisIndex).type
== ecConfig.COMPONENT_TYPE_AXIS_CATEGORY
) {
// 横轴为类目轴
_showAxisTrigger(xAxisIndex, yAxisIndex,
_getNearestDataIndex('x', xAxis.getAxis(xAxisIndex))
);
return;
}
else if (yAxis.getAxis(yAxisIndex)
&& yAxis.getAxis(yAxisIndex).type
== ecConfig.COMPONENT_TYPE_AXIS_CATEGORY
) {
// 纵轴为类目轴
_showAxisTrigger(xAxisIndex, yAxisIndex,
_getNearestDataIndex('y', yAxis.getAxis(yAxisIndex))
);
return;
}
}
}
}
/**
* 极坐标
*/
function _findPolarTrigger() {
if (!polar) {
return false;
}
var x = zrEvent.getX(_event);
var y = zrEvent.getY(_event);
var polarIndex = polar.getNearestIndex([x, y]);
var valueIndex;
if (polarIndex) {
valueIndex = polarIndex.valueIndex;
polarIndex = polarIndex.polarIndex;
}
else {
polarIndex = -1;
}
if (polarIndex != -1) {
return _showPolarTrigger(polarIndex, valueIndex);
}
return false;
}
/**
* 根据坐标轴事件带的属性获取最近的axisDataIndex
*/
function _getNearestDataIndex(direction, categoryAxis) {
var dataIndex = -1;
var x = zrEvent.getX(_event);
var y = zrEvent.getY(_event);
if (direction == 'x') {
// 横轴为类目轴
var left;
var right;
var xEnd = grid.getXend();
var curCoord = categoryAxis.getCoordByIndex(dataIndex);
while (curCoord < xEnd) {
if (curCoord <= x) {
left = curCoord;
}
if (curCoord >= x) {
break;
}
curCoord = categoryAxis.getCoordByIndex(++dataIndex);
right = curCoord;
}
if (x - left < right - x) {
dataIndex -= 1;
}
else {
// 离右边近，看是否为最后一个
if (typeof categoryAxis.getNameByIndex(dataIndex)
== 'undefined'
) {
dataIndex = -1;
}
}
return dataIndex;
}
else {
// 纵轴为类目轴
var top;
var bottom;
var yStart = grid.getY();
var curCoord = categoryAxis.getCoordByIndex(dataIndex);
while (curCoord > yStart) {
if (curCoord >= y) {
bottom = curCoord;
}
if (curCoord <= y) {
break;
}
curCoord = categoryAxis.getCoordByIndex(++dataIndex);
top = curCoord;
}
if (y - top > bottom - y) {
dataIndex -= 1;
}
else {
// 离上方边近，看是否为最后一个
if (typeof categoryAxis.getNameByIndex(dataIndex)
== 'undefined'
) {
dataIndex = -1;
}
}
return dataIndex;
}
return -1;
}
/**
* 直角系
*/
function _showAxisTrigger(xAxisIndex, yAxisIndex, dataIndex) {
if (typeof xAxis == 'undefined'
|| typeof yAxis == 'undefined'
|| typeof xAxisIndex == 'undefined'
|| typeof yAxisIndex == 'undefined'
|| dataIndex < 0
) {
// 不响应tooltip的数据对象延时隐藏
clearTimeout(_hidingTicket);
clearTimeout(_showingTicket);
_hidingTicket = setTimeout(_hide, _hideDelay);
return;
}
var series = option.series;
var seriesArray = [];
var seriesIndex = [];
var categoryAxis;
var x;
var y;
var formatter;
var showContent;
var specialCssText = '';
if (option.tooltip.trigger == 'axis') {
if (option.tooltip.show === false) {
return;
}
formatter = option.tooltip.formatter;
}
if (xAxisIndex != -1
&& xAxis.getAxis(xAxisIndex).type
== ecConfig.COMPONENT_TYPE_AXIS_CATEGORY
) {
// 横轴为类目轴，找到所有用这条横轴并且axis触发的系列数据
categoryAxis = xAxis.getAxis(xAxisIndex);
for (var i = 0, l = series.length; i < l; i++) {
if (series[i].xAxisIndex == xAxisIndex
&& self.deepQuery(
[series[i], option], 'tooltip.trigger'
) == 'axis'
) {
showContent = self.deepQuery(
[series[i]],
'tooltip.showContent'
) || showContent;
formatter = self.deepQuery(
[series[i]],
'tooltip.formatter'
) || formatter;
specialCssText += _style(self.deepQuery(
[series[i]], 'tooltip'
));
seriesArray.push(series[i]);
seriesIndex.push(i);
}
}
// 寻找高亮元素
messageCenter.dispatch(
ecConfig.EVENT.TOOLTIP_HOVER,
_event,
{
seriesIndex : seriesIndex,
dataIndex : dataIndex
}
);
y = zrEvent.getY(_event) + 10;
x = categoryAxis.getCoordByIndex(dataIndex);
_styleAxisPointer(
seriesArray,
x, grid.getY(),
x, grid.getYend(),
categoryAxis.getGap()
);
x += 10;
}
else if (yAxisIndex != -1
&& yAxis.getAxis(yAxisIndex).type
== ecConfig.COMPONENT_TYPE_AXIS_CATEGORY
) {
// 纵轴为类目轴，找到所有用这条纵轴并且axis触发的系列数据
categoryAxis = yAxis.getAxis(yAxisIndex);
for (var i = 0, l = series.length; i < l; i++) {
if (series[i].yAxisIndex == yAxisIndex
&& self.deepQuery(
[series[i], option], 'tooltip.trigger'
) == 'axis'
) {
showContent = self.deepQuery(
[series[i]],
'tooltip.showContent'
) || showContent;
formatter = self.deepQuery(
[series[i]],
'tooltip.formatter'
) || formatter;
specialCssText += _style(self.deepQuery(
[series[i]], 'tooltip'
));
seriesArray.push(series[i]);
seriesIndex.push(i);
}
}
// 寻找高亮元素
messageCenter.dispatch(
ecConfig.EVENT.TOOLTIP_HOVER,
_event,
{
seriesIndex : seriesIndex,
dataIndex : dataIndex
}
);
x = zrEvent.getX(_event) + 10;
y = categoryAxis.getCoordByIndex(dataIndex);
_styleAxisPointer(
seriesArray,
grid.getX(), y,
grid.getXend(), y,
categoryAxis.getGap()
);
y += 10;
}
if (seriesArray.length > 0) {
var data;
if (typeof formatter == 'function') {
var params = [];
for (var i = 0, l = seriesArray.length; i < l; i++) {
data = seriesArray[i].data[dataIndex];
data = typeof data != 'undefined'
? (typeof data.value != 'undefined'
? data.value
: data)
: '-';
params.push([
seriesArray[i].name || '',
categoryAxis.getNameByIndex(dataIndex),
data
]);
}
_curTicket = 'axis:' + dataIndex;
_tDom.innerHTML = formatter(
params, _curTicket, _setContent
);
}
else if (typeof formatter == 'string') {
_curTicket = NaN;
formatter = formatter.replace('{a}','{a0}')
.replace('{b}','{b0}')
.replace('{c}','{c0}');
for (var i = 0, l = seriesArray.length; i < l; i++) {
formatter = formatter.replace(
'{a' + i + '}',
_encodeHTML(seriesArray[i].name || '')
);
formatter = formatter.replace(
'{b' + i + '}',
_encodeHTML(categoryAxis.getNameByIndex(dataIndex))
);
data = seriesArray[i].data[dataIndex];
data = typeof data != 'undefined'
? (typeof data.value != 'undefined'
? data.value
: data)
: '-';
formatter = formatter.replace(
'{c' + i + '}',
data
);
}
_tDom.innerHTML = formatter;
}
else {
_curTicket = NaN;
formatter = _encodeHTML(
categoryAxis.getNameByIndex(dataIndex)
);
for (var i = 0, l = seriesArray.length; i < l; i++) {
formatter += '
'
+ _encodeHTML(seriesArray[i].name || '')
+ ' : ';
data = seriesArray[i].data[dataIndex];
data = typeof data != 'undefined'
? (typeof data.value != 'undefined'
? data.value
: data)
: '-';
formatter += data;
}
_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';
dom.firstChild.appendChild(_tDom);
self.hasAppend = true;
}
_show(x, y, specialCssText);
}
}
/**
* 极坐标
*/
function _showPolarTrigger(polarIndex, dataIndex) {
if (typeof polar == 'undefined'
|| typeof polarIndex == 'undefined'
|| typeof dataIndex == 'undefined'
|| dataIndex < 0
) {
return false;
}
var series = option.series;
var seriesArray = [];
var formatter;
var showContent;
var specialCssText = '';
if (option.tooltip.trigger == 'axis') {
if (option.tooltip.show === false) {
return false;
}
formatter = option.tooltip.formatter;
}
// 找到所有用这个极坐标并且axis触发的系列数据
for (var i = 0, l = series.length; i < l; i++) {
if (series[i].polarIndex == polarIndex
&& self.deepQuery(
[series[i], option], 'tooltip.trigger'
) == 'axis'
) {
showContent = self.deepQuery(
[series[i]],
'tooltip.showContent'
) || showContent;
formatter = self.deepQuery(
[series[i]],
'tooltip.formatter'
) || formatter;
specialCssText += _style(self.deepQuery(
[series[i]], 'tooltip'
));
seriesArray.push(series[i]);
}
}
if (seriesArray.length > 0) {
var polarData;
var data;
var params = [];
var indicatorName =
option.polar[polarIndex].indicator[dataIndex].text;
for (var i = 0, l = seriesArray.length; i < l; i++) {
polarData = seriesArray[i].data;
for (var j = 0, k = polarData.length; j < k; j++) {
data = polarData[j];
data = typeof data != 'undefined'
? data
: {name:'', value: {dataIndex:'-'}};
params.push([
seriesArray[i].name || '',
data.name,
data.value[dataIndex],
indicatorName
]);
}
}
if (params.length <= 0) {
return;
}
if (typeof formatter == 'function') {
_curTicket = 'axis:' + dataIndex;
_tDom.innerHTML = formatter(
params, _curTicket, _setContent
);
}
else if (typeof formatter == 'string') {
formatter = formatter.replace('{a}','{a0}')
.replace('{b}','{b0}')
.replace('{c}','{c0}')
.replace('{d}','{d0}');
for (var i = 0, l = params.length; i < l; i++) {
formatter = formatter.replace(
'{a' + i + '}',
_encodeHTML(params[i][0])
);
formatter = formatter.replace(
'{b' + i + '}',
_encodeHTML(params[i][1])
);
formatter = formatter.replace(
'{c' + i + '}',
params[i][2]
);
formatter = formatter.replace(
'{d' + i + '}',
_encodeHTML(params[i][3])
);
}
_tDom.innerHTML = formatter;
}
else {
formatter = _encodeHTML(params[0][1]) + '
'
+ _encodeHTML(params[0][3]) + ' : '
+ params[0][2];
for (var i = 1, l = params.length; i < l; i++) {
formatter += '
' + _encodeHTML(params[i][1])
+ '
';
formatter += _encodeHTML(params[i][3]) + ' : '
+ params[i][2];
}
_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';
dom.firstChild.appendChild(_tDom);
self.hasAppend = true;
}
_show(
zrEvent.getX(_event),
zrEvent.getY(_event),
specialCssText
);
return true;
}
}
function _showItemTrigger() {
var serie = ecData.get(_curTarget, 'series');
var data = ecData.get(_curTarget, 'data');
var name = ecData.get(_curTarget, 'name');
var value = ecData.get(_curTarget, 'value');
var special = ecData.get(_curTarget, 'special');
var special2 = ecData.get(_curTarget, 'special2');
// 从低优先级往上找到trigger为item的formatter和样式
var formatter;
var showContent;
var specialCssText = '';
var indicator;
var html = '';
if (_curTarget._type != 'island') {
// 全局
if (option.tooltip.trigger == 'item') {
formatter = option.tooltip.formatter;
}
// 系列
if (self.deepQuery([serie], 'tooltip.trigger') == 'item') {
showContent = self.deepQuery(
[serie], 'tooltip.showContent'
) || showContent;
formatter = self.deepQuery(
[serie], 'tooltip.formatter'
) || formatter;
specialCssText += _style(self.deepQuery(
[serie], 'tooltip'
));
}
// 数据项
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'
);
}
if (typeof formatter == 'function') {
_curTicket = (serie.name || '')
+ ':'
+ ecData.get(_curTarget, 'dataIndex');
_tDom.innerHTML = formatter(
[
serie.name || '',
name,
value,
special,
special2
],
_curTicket,
_setContent
);
}
else if (typeof formatter == 'string') {
_curTicket = NaN;
formatter = formatter.replace('{a}','{a0}')
.replace('{b}','{b0}')
.replace('{c}','{c0}');
formatter = formatter.replace(
'{a0}', _encodeHTML(serie.name || '')
)
.replace('{b0}', _encodeHTML(name))
.replace('{c0}', value);
formatter = formatter.replace('{d}','{d0}')
.replace('{d0}', special || '');
formatter = formatter.replace('{e}','{e0}')
.replace('{e0}', ecData.get(_curTarget, 'special2') || '');
_tDom.innerHTML = formatter;
}
else {
_curTicket = NaN;
if (serie.type == ecConfig.CHART_TYPE_SCATTER) {
_tDom.innerHTML = (typeof serie.name != 'undefined'
? (_encodeHTML(serie.name) + '
')
: ''
)
+ (name === ''
? '' : (_encodeHTML(name) + ' : ')
)
+ value
+ (typeof special == 'undefined'
? ''
: (' (' + special + ')'));
}
else if (serie.type == ecConfig.CHART_TYPE_RADAR) {
indicator = special;
html += _encodeHTML(
name === '' ? (serie.name || '') : name
);
html += html === '' ? '' : '
';
for (var i = 0 ; i < indicator.length; i ++) {
html += _encodeHTML(indicator[i].text) + ' : '
+ value[i] + '
';
}
_tDom.innerHTML = html;
}
else if (serie.type == ecConfig.CHART_TYPE_CHORD) {
if (typeof special2 == 'undefined') {
// 外环上
_tDom.innerHTML = _encodeHTML(name)+' (' + value + ')';
}
else {
var name1 = _encodeHTML(name);
var name2 = _encodeHTML(special);
// 内部弦上
_tDom.innerHTML = (typeof serie.name != 'undefined'
? (_encodeHTML(serie.name) + '
')
: '')
+ name1 + ' -> ' + name2 + ' (' + value + ')'
+ '
'
+ name2 + ' -> ' + name1+ ' (' + special2 + ')';
}
}
else {
_tDom.innerHTML = (typeof serie.name != 'undefined'
? (_encodeHTML(serie.name) + '
')
: '')
+ _encodeHTML(name) + ' : ' + value +
(typeof special == 'undefined'
? ''
: (' (' + special + ')'));
}
}
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';
dom.firstChild.appendChild(_tDom);
self.hasAppend = true;
}
_show(
zrEvent.getX(_event) + 20,
zrEvent.getY(_event) - 20,
specialCssText
);
}
/**
* 设置坐标轴指示器样式
*/
function _styleAxisPointer(
seriesArray, xStart, yStart, xEnd, yEnd, gap
) {
if (seriesArray.length > 0) {
var queryTarget;
var curType;
var axisPointer = option.tooltip.axisPointer;
var pointType = axisPointer.type;
var lineColor = axisPointer.lineStyle.color;
var lineWidth = axisPointer.lineStyle.width;
var lineType = axisPointer.lineStyle.type;
var areaSize = axisPointer.areaStyle.size;
var areaColor = axisPointer.areaStyle.color;
for (var i = 0, l = seriesArray.length; i < l; i++) {
if (self.deepQuery(
[seriesArray[i], option], 'tooltip.trigger'
) == 'axis'
) {
queryTarget = [seriesArray[i]];
curType = self.deepQuery(
queryTarget,
'tooltip.axisPointer.type'
);
pointType = curType || pointType;
if (curType == 'line') {
lineColor = self.deepQuery(
queryTarget,
'tooltip.axisPointer.lineStyle.color'
) || lineColor;
lineWidth = self.deepQuery(
queryTarget,
'tooltip.axisPointer.lineStyle.width'
) || lineWidth;
lineType = self.deepQuery(
queryTarget,
'tooltip.axisPointer.lineStyle.type'
) || lineType;
}
else if (curType == 'shadow') {
areaSize = self.deepQuery(
queryTarget,
'tooltip.axisPointer.areaStyle.size'
) || areaSize;
areaColor = self.deepQuery(
queryTarget,
'tooltip.axisPointer.areaStyle.color'
) || areaColor;
}
}
}
if (pointType == 'line') {
_axisLineShape.style = {
xStart : xStart,
yStart : yStart,
xEnd : xEnd,
yEnd : yEnd,
strokeColor : lineColor,
lineWidth : lineWidth,
lineType : lineType
};
_axisLineShape.invisible = false;
zr.modShape(_axisLineShape.id, _axisLineShape);
}
else if (pointType == 'shadow') {
if (typeof areaSize == 'undefined'
|| areaSize == 'auto'
|| isNaN(areaSize)
) {
lineWidth = gap;
}
else {
lineWidth = areaSize;
}
if (xStart == xEnd) {
// 纵向
if (Math.abs(grid.getX() - xStart) < 2) {
// 最左边
lineWidth /= 2;
xStart = xEnd = xEnd + lineWidth / 2;
}
else if (Math.abs(grid.getXend() - xStart) < 2) {
// 最右边
lineWidth /= 2;
xStart = xEnd = xEnd - lineWidth / 2;
}
}
else if (yStart == yEnd) {
// 横向
if (Math.abs(grid.getY() - yStart) < 2) {
// 最上边
lineWidth /= 2;
yStart = yEnd = yEnd + lineWidth / 2;
}
else if (Math.abs(grid.getYend() - yStart) < 2) {
// 最右边
lineWidth /= 2;
yStart = yEnd = yEnd - lineWidth / 2;
}
}
_axisShadowShape.style = {
xStart : xStart,
yStart : yStart,
xEnd : xEnd,
yEnd : yEnd,
strokeColor : areaColor,
lineWidth : lineWidth
};
_axisShadowShape.invisible = false;
zr.modShape(_axisShadowShape.id, _axisShadowShape);
}
zr.refresh();
}
}
/**
* zrender事件响应：鼠标移动
*/
function _onmousemove(param) {
clearTimeout(_hidingTicket);
clearTimeout(_showingTicket);
var target = param.target;
var mx = zrEvent.getX(param.event);
var my = zrEvent.getY(param.event);
if (!target) {
// 判断是否落到直角系里，axis触发的tooltip
_curTarget = false;
_event = param.event;
_event._target = _event.target || _event.toElement;
_event.zrenderX = mx;
_event.zrenderY = my;
if (_needAxisTrigger
&& grid
&& zrArea.isInside(
rectangle,
grid.getArea(),
mx,
my
)
) {
_showingTicket = setTimeout(_tryShow, _showDelay);
}
else if (_needAxisTrigger
&& polar
&& polar.isInside([mx, my]) != -1
) {
_showingTicket = setTimeout(_tryShow, _showDelay);
}
else {
_hidingTicket = setTimeout(_hide, _hideDelay);
}
}
else {
_curTarget = target;
_event = param.event;
_event._target = _event.target || _event.toElement;
_event.zrenderX = mx;
_event.zrenderY = my;
var polarIndex;
if (_needAxisTrigger
&& polar
&& (polarIndex = polar.isInside([mx, my])) != -1
) {
// 看用这个polar的系列数据是否是axis触发，如果是设置_curTarget为nul
var series = option.series;
for (var i = 0, l = series.length; i < l; i++) {
if (series[i].polarIndex == polarIndex
&& self.deepQuery(
[series[i], option], 'tooltip.trigger'
) == 'axis'
) {
_curTarget = null;
break;
}
}
}
_showingTicket = setTimeout(_tryShow, _showDelay);
}
}
/**
* zrender事件响应：鼠标离开绘图区域
*/
function _onglobalout() {
clearTimeout(_hidingTicket);
clearTimeout(_showingTicket);
_hidingTicket = setTimeout(_hide, _hideDelay);
}
/**
* 异步回调填充内容
*/
function _setContent(ticket, content) {
if (ticket == _curTicket) {
_tDom.innerHTML = content;
}
var cssText = '';
var domHeight = _tDom.offsetHeight;
var domWidth = _tDom.offsetWidth;
if (_tDom.offsetLeft + domWidth > _zrWidth) {
cssText += 'left:' + (_zrWidth - domWidth) + 'px;';
}
if (_tDom.offsetTop + domHeight > _zrHeight) {
cssText += 'top:' + (_zrHeight - domHeight) + 'px;';
}
if (cssText !== '') {
_tDom.style.cssText += cssText;
}
if (_zrWidth - _tDom.offsetLeft < 100
|| _zrHeight - _tDom.offsetTop < 100
) {
// 太靠边的做一次refixed
setTimeout(_refixed, 20);
}
}
function setComponent(newComponent) {
component = newComponent;
grid = component.grid;
xAxis = component.xAxis;
yAxis = component.yAxis;
polar = component.polar;
}
function ontooltipHover(param, tipShape) {
if (!_lastTipShape // 不存在或者存在但dataIndex发生变化才需要重绘
|| (_lastTipShape && _lastTipShape.dataIndex != param.dataIndex)
) {
if (_lastTipShape && _lastTipShape.tipShape.length > 0) {
zr.delShape(_lastTipShape.tipShape);
}
for (var i = 0, l = tipShape.length; i < l; i++) {
tipShape[i].id = zr.newShapeId('tooltip');
tipShape[i].zlevel = _zlevelBase;
tipShape[i].style = zrShapeBase.getHighlightStyle(
tipShape[i].style,
tipShape[i].highlightStyle
);
tipShape[i].draggable = false;
tipShape[i].hoverable = false;
tipShape[i].clickable = false;
tipShape[i].ondragend = null;
tipShape[i].ondragover = null;
tipShape[i].ondrop = null;
zr.addShape(tipShape[i]);
}
_lastTipShape = {
dataIndex : param.dataIndex,
tipShape : tipShape
};
}
}
function ondragend() {
_hide();
}
function init(newOption, newDom) {
option = newOption;
dom = newDom;
option.tooltip = self.reformOption(option.tooltip);
option.tooltip.textStyle = zrUtil.merge(
option.tooltip.textStyle,
ecConfig.textStyle,
{
'overwrite': false,
'recursive': true
}
);
// 补全padding属性
option.tooltip.padding = self.reformCssArray(
option.tooltip.padding
);
_needAxisTrigger = false;
if (option.tooltip.trigger == 'axis') {
_needAxisTrigger = true;
}
var series = option.series;
for (var i = 0, l = series.length; i < l; i++) {
if (self.deepQuery([series[i]], 'tooltip.trigger')
== 'axis'
) {
_needAxisTrigger = true;
break;
}
}
_showDelay = option.tooltip.showDelay;
_hideDelay = option.tooltip.hideDelay;
_defaultCssText = _style(option.tooltip);
_tDom.style.position = 'absolute'; // 不是多余的，别删！
self.hasAppend = false;
}
/**
* 刷新
*/
function refresh(newOption) {
if (newOption) {
option = newOption;
option.tooltip = self.reformOption(option.tooltip);
option.tooltip.textStyle = zrUtil.merge(
option.tooltip.textStyle,
ecConfig.textStyle,
{
'overwrite': false,
'recursive': true
}
);
// 补全padding属性
option.tooltip.padding = self.reformCssArray(
option.tooltip.padding
);
}
}
/**
* zrender事件响应：窗口大小改变
*/
function resize() {
_zrHeight = zr.getHeight();
_zrWidth = zr.getWidth();
}
/**
* 释放后实例不可用，重载基类方法
*/
function dispose() {
clearTimeout(_hidingTicket);
clearTimeout(_showingTicket);
zr.un(zrConfig.EVENT.MOUSEMOVE, _onmousemove);
zr.un(zrConfig.EVENT.GLOBALOUT, _onglobalout);
if (self.hasAppend) {
dom.firstChild.removeChild(_tDom);
}
_tDom = null;
// self.clear();
self.shapeList = null;
self = null;
}
/**
* html转码的方法
*/
function _encodeHTML(source) {
return String(source)
.replace(/&/g, '&')
.replace(//g, '>')
.replace(/"/g, '"')
.replace(/'/g, ''');
};
zr.on(zrConfig.EVENT.MOUSEMOVE, _onmousemove);
zr.on(zrConfig.EVENT.GLOBALOUT, _onglobalout);
// 重载基类方法
self.dispose = dispose;
self.init = init;
self.refresh = refresh;
self.resize = resize;
self.setComponent = setComponent;
self.ontooltipHover = ontooltipHover;
self.ondragend = ondragend;
init(option, dom);
}
require('../component').define('tooltip', Tooltip);
return Tooltip;
});