first commit

This commit is contained in:
jefferyzhao
2025-07-31 17:44:12 +08:00
commit b9bdc8598b
42390 changed files with 4467935 additions and 0 deletions

View File

@ -0,0 +1,375 @@
/*
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements. See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership. The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
var zrUtil = require("zrender/lib/core/util");
var zrColor = require("zrender/lib/tool/color");
var eventUtil = require("zrender/lib/core/event");
var domUtil = require("zrender/lib/core/dom");
var env = require("zrender/lib/core/env");
var formatUtil = require("../../util/format");
/*
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements. See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership. The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
var each = zrUtil.each;
var toCamelCase = formatUtil.toCamelCase;
var vendors = ['', '-webkit-', '-moz-', '-o-'];
var gCssText = 'position:absolute;display:block;border-style:solid;white-space:nowrap;z-index:9999999;';
/**
* @param {number} duration
* @return {string}
* @inner
*/
function assembleTransition(duration) {
var transitionCurve = 'cubic-bezier(0.23, 1, 0.32, 1)';
var transitionText = 'left ' + duration + 's ' + transitionCurve + ',' + 'top ' + duration + 's ' + transitionCurve;
return zrUtil.map(vendors, function (vendorPrefix) {
return vendorPrefix + 'transition:' + transitionText;
}).join(';');
}
/**
* @param {Object} textStyle
* @return {string}
* @inner
*/
function assembleFont(textStyleModel) {
var cssText = [];
var fontSize = textStyleModel.get('fontSize');
var color = textStyleModel.getTextColor();
color && cssText.push('color:' + color);
cssText.push('font:' + textStyleModel.getFont());
var lineHeight = textStyleModel.get('lineHeight');
if (lineHeight == null) {
lineHeight = Math.round(fontSize * 3 / 2);
}
fontSize && cssText.push('line-height:' + lineHeight + 'px');
var shadowColor = textStyleModel.get('textShadowColor');
var shadowBlur = textStyleModel.get('textShadowBlur') || 0;
var shadowOffsetX = textStyleModel.get('textShadowOffsetX') || 0;
var shadowOffsetY = textStyleModel.get('textShadowOffsetY') || 0;
shadowBlur && cssText.push('text-shadow:' + shadowOffsetX + 'px ' + shadowOffsetY + 'px ' + shadowBlur + 'px ' + shadowColor);
each(['decoration', 'align'], function (name) {
var val = textStyleModel.get(name);
val && cssText.push('text-' + name + ':' + val);
});
return cssText.join(';');
}
/**
* @param {Object} tooltipModel
* @return {string}
* @inner
*/
function assembleCssText(tooltipModel) {
var cssText = [];
var transitionDuration = tooltipModel.get('transitionDuration');
var backgroundColor = tooltipModel.get('backgroundColor');
var textStyleModel = tooltipModel.getModel('textStyle');
var padding = tooltipModel.get('padding'); // Animation transition. Do not animate when transitionDuration is 0.
transitionDuration && cssText.push(assembleTransition(transitionDuration));
if (backgroundColor) {
if (env.canvasSupported) {
cssText.push('background-Color:' + backgroundColor);
} else {
// for ie
cssText.push('background-Color:#' + zrColor.toHex(backgroundColor));
cssText.push('filter:alpha(opacity=70)');
}
} // Border style
each(['width', 'color', 'radius'], function (name) {
var borderName = 'border-' + name;
var camelCase = toCamelCase(borderName);
var val = tooltipModel.get(camelCase);
val != null && cssText.push(borderName + ':' + val + (name === 'color' ? '' : 'px'));
}); // Text style
cssText.push(assembleFont(textStyleModel)); // Padding
if (padding != null) {
cssText.push('padding:' + formatUtil.normalizeCssArray(padding).join('px ') + 'px');
}
return cssText.join(';') + ';';
} // If not able to make, do not modify the input `out`.
function makeStyleCoord(out, zr, appendToBody, zrX, zrY) {
var zrPainter = zr && zr.painter;
if (appendToBody) {
var zrViewportRoot = zrPainter && zrPainter.getViewportRoot();
if (zrViewportRoot) {
// Some APPs might use scale on body, so we support CSS transform here.
domUtil.transformLocalCoord(out, zrViewportRoot, document.body, zrX, zrY);
}
} else {
out[0] = zrX;
out[1] = zrY; // xy should be based on canvas root. But tooltipContent is
// the sibling of canvas root. So padding of ec container
// should be considered here.
var viewportRootOffset = zrPainter && zrPainter.getViewportRootOffset();
if (viewportRootOffset) {
out[0] += viewportRootOffset.offsetLeft;
out[1] += viewportRootOffset.offsetTop;
}
}
out[2] = out[0] / zr.getWidth(); // The ratio of left to width
out[3] = out[1] / zr.getHeight(); // The ratio of top to height
}
/**
* @alias module:echarts/component/tooltip/TooltipContent
* @param {HTMLElement} container
* @param {ExtensionAPI} api
* @param {Object} [opt]
* @param {boolean} [opt.appendToBody]
* `false`: the DOM element will be inside the container. Default value.
* `true`: the DOM element will be appended to HTML body, which avoid
* some overflow clip but intrude outside of the container.
* @constructor
*/
function TooltipContent(container, api, opt) {
if (env.wxa) {
return null;
}
var el = document.createElement('div');
el.domBelongToZr = true;
this.el = el;
var zr = this._zr = api.getZr();
var appendToBody = this._appendToBody = opt && opt.appendToBody;
this._styleCoord = [0, 0, 0, 0]; // [left, top, left/width, top/height]
makeStyleCoord(this._styleCoord, zr, appendToBody, api.getWidth() / 2, api.getHeight() / 2);
if (appendToBody) {
document.body.appendChild(el);
} else {
container.appendChild(el);
}
this._container = container;
this._show = false;
/**
* @private
*/
this._hideTimeout; // FIXME
// Is it needed to trigger zr event manually if
// the browser do not support `pointer-events: none`.
var self = this;
el.onmouseenter = function () {
// clear the timeout in hideLater and keep showing tooltip
if (self._enterable) {
clearTimeout(self._hideTimeout);
self._show = true;
}
self._inContent = true;
};
el.onmousemove = function (e) {
e = e || window.event;
if (!self._enterable) {
// `pointer-events: none` is set to tooltip content div
// if `enterable` is set as `false`, and `el.onmousemove`
// can not be triggered. But in browser that do not
// support `pointer-events`, we need to do this:
// Try trigger zrender event to avoid mouse
// in and out shape too frequently
var handler = zr.handler;
var zrViewportRoot = zr.painter.getViewportRoot();
eventUtil.normalizeEvent(zrViewportRoot, e, true);
handler.dispatch('mousemove', e);
}
};
el.onmouseleave = function () {
if (self._enterable) {
if (self._show) {
self.hideLater(self._hideDelay);
}
}
self._inContent = false;
};
}
TooltipContent.prototype = {
constructor: TooltipContent,
/**
* @private
* @type {boolean}
*/
_enterable: true,
/**
* Update when tooltip is rendered
*/
update: function (tooltipModel) {
// FIXME
// Move this logic to ec main?
var container = this._container;
var stl = container.currentStyle || document.defaultView.getComputedStyle(container);
var domStyle = container.style;
if (domStyle.position !== 'absolute' && stl.position !== 'absolute') {
domStyle.position = 'relative';
}
var alwaysShowContent = tooltipModel.get('alwaysShowContent');
alwaysShowContent && this._moveTooltipIfResized(); // Hide the tooltip
// PENDING
// this.hide();
},
/**
* when `alwaysShowContent` is true,
* we should move the tooltip after chart resized
*/
_moveTooltipIfResized: function () {
var ratioX = this._styleCoord[2]; // The ratio of left to width
var ratioY = this._styleCoord[3]; // The ratio of top to height
var realX = ratioX * this._zr.getWidth();
var realY = ratioY * this._zr.getHeight();
this.moveTo(realX, realY);
},
show: function (tooltipModel) {
clearTimeout(this._hideTimeout);
var el = this.el;
var styleCoord = this._styleCoord;
el.style.cssText = gCssText + assembleCssText(tooltipModel) // Because of the reason described in:
// http://stackoverflow.com/questions/21125587/css3-transition-not-working-in-chrome-anymore
// we should set initial value to `left` and `top`.
+ ';left:' + styleCoord[0] + 'px;top:' + styleCoord[1] + 'px;' + (tooltipModel.get('extraCssText') || '');
el.style.display = el.innerHTML ? 'block' : 'none'; // If mouse occasionally move over the tooltip, a mouseout event will be
// triggered by canvas, and cause some unexpectable result like dragging
// stop, "unfocusAdjacency". Here `pointer-events: none` is used to solve
// it. Although it is not supported by IE8~IE10, fortunately it is a rare
// scenario.
el.style.pointerEvents = this._enterable ? 'auto' : 'none';
this._show = true;
},
setContent: function (content) {
this.el.innerHTML = content == null ? '' : content;
},
setEnterable: function (enterable) {
this._enterable = enterable;
},
getSize: function () {
var el = this.el;
return [el.clientWidth, el.clientHeight];
},
moveTo: function (zrX, zrY) {
var styleCoord = this._styleCoord;
makeStyleCoord(styleCoord, this._zr, this._appendToBody, zrX, zrY);
var style = this.el.style;
style.left = styleCoord[0] + 'px';
style.top = styleCoord[1] + 'px';
},
hide: function () {
this.el.style.display = 'none';
this._show = false;
},
hideLater: function (time) {
if (this._show && !(this._inContent && this._enterable)) {
if (time) {
this._hideDelay = time; // Set show false to avoid invoke hideLater multiple times
this._show = false;
this._hideTimeout = setTimeout(zrUtil.bind(this.hide, this), time);
} else {
this.hide();
}
}
},
isShow: function () {
return this._show;
},
dispose: function () {
this.el.parentNode.removeChild(this.el);
},
getOuterSize: function () {
var width = this.el.clientWidth;
var height = this.el.clientHeight; // Consider browser compatibility.
// IE8 does not support getComputedStyle.
if (document.defaultView && document.defaultView.getComputedStyle) {
var stl = document.defaultView.getComputedStyle(this.el);
if (stl) {
width += parseInt(stl.borderLeftWidth, 10) + parseInt(stl.borderRightWidth, 10);
height += parseInt(stl.borderTopWidth, 10) + parseInt(stl.borderBottomWidth, 10);
}
}
return {
width: width,
height: height
};
}
};
var _default = TooltipContent;
module.exports = _default;

View File

@ -0,0 +1,121 @@
/*
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements. See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership. The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
var echarts = require("../../echarts");
/*
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements. See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership. The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
var _default = echarts.extendComponentModel({
type: 'tooltip',
dependencies: ['axisPointer'],
defaultOption: {
zlevel: 0,
z: 60,
show: true,
// tooltip主体内容
showContent: true,
// 'trigger' only works on coordinate system.
// 'item' | 'axis' | 'none'
trigger: 'item',
// 'click' | 'mousemove' | 'none'
triggerOn: 'mousemove|click',
alwaysShowContent: false,
displayMode: 'single',
// 'single' | 'multipleByCoordSys'
renderMode: 'auto',
// 'auto' | 'html' | 'richText'
// 'auto': use html by default, and use non-html if `document` is not defined
// 'html': use html for tooltip
// 'richText': use canvas, svg, and etc. for tooltip
// 位置 {Array} | {Function}
// position: null
// Consider triggered from axisPointer handle, verticalAlign should be 'middle'
// align: null,
// verticalAlign: null,
// 是否约束 content 在 viewRect 中。默认 false 是为了兼容以前版本。
confine: false,
// 内容格式器:{string}Template ¦ {Function}
// formatter: null
showDelay: 0,
// 隐藏延迟单位ms
hideDelay: 100,
// 动画变换时间单位s
transitionDuration: 0.4,
enterable: false,
// 提示背景颜色默认为透明度为0.7的黑色
backgroundColor: 'rgba(50,50,50,0.7)',
// 提示边框颜色
borderColor: '#333',
// 提示边框圆角单位px默认为4
borderRadius: 4,
// 提示边框线宽单位px默认为0无边框
borderWidth: 0,
// 提示内边距单位px默认各方向内边距为5
// 接受数组分别设定上右下左边距同css
padding: 5,
// Extra css text
extraCssText: '',
// 坐标轴指示器,坐标轴触发有效
axisPointer: {
// 默认为直线
// 可选为:'line' | 'shadow' | 'cross'
type: 'line',
// type 为 line 的时候有效,指定 tooltip line 所在的轴,可选
// 可选 'x' | 'y' | 'angle' | 'radius' | 'auto'
// 默认 'auto',会选择类型为 category 的轴,对于双数值轴,笛卡尔坐标系会默认选择 x 轴
// 极坐标系会默认选择 angle 轴
axis: 'auto',
animation: 'auto',
animationDurationUpdate: 200,
animationEasingUpdate: 'exponentialOut',
crossStyle: {
color: '#999',
width: 1,
type: 'dashed',
// TODO formatter
textStyle: {} // lineStyle and shadowStyle should not be specified here,
// otherwise it will always override those styles on option.axisPointer.
}
},
textStyle: {
color: '#fff',
fontSize: 14
}
}
});
module.exports = _default;

View File

@ -0,0 +1,252 @@
/*
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements. See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership. The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
var zrUtil = require("zrender/lib/core/util");
var Text = require("zrender/lib/graphic/Text");
var graphicUtil = require("../../util/graphic");
/*
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements. See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership. The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
// import Group from 'zrender/src/container/Group';
function makeStyleCoord(out, zr, zrX, zrY) {
out[0] = zrX;
out[1] = zrY;
out[2] = out[0] / zr.getWidth(); // The ratio of left to width
out[3] = out[1] / zr.getHeight(); // The ratio of top to height
}
/**
* @alias module:echarts/component/tooltip/TooltipRichContent
* @constructor
*/
function TooltipRichContent(api) {
var zr = this._zr = api.getZr();
this._styleCoord = [0, 0, 0, 0]; // [left, top, left/width, top/height]
makeStyleCoord(this._styleCoord, zr, api.getWidth() / 2, api.getHeight() / 2);
this._show = false;
/**
* @private
*/
this._hideTimeout;
}
TooltipRichContent.prototype = {
constructor: TooltipRichContent,
/**
* @private
* @type {boolean}
*/
_enterable: true,
/**
* Update when tooltip is rendered
*/
update: function (tooltipModel) {
var alwaysShowContent = tooltipModel.get('alwaysShowContent');
alwaysShowContent && this._moveTooltipIfResized();
},
/**
* when `alwaysShowContent` is true,
* we should move the tooltip after chart resized
*/
_moveTooltipIfResized: function () {
var ratioX = this._styleCoord[2]; // The ratio of left to width
var ratioY = this._styleCoord[3]; // The ratio of top to height
var realX = ratioX * this._zr.getWidth();
var realY = ratioY * this._zr.getHeight();
this.moveTo(realX, realY);
},
show: function (tooltipModel) {
if (this._hideTimeout) {
clearTimeout(this._hideTimeout);
}
this.el.attr('show', true);
this._show = true;
},
/**
* Set tooltip content
*
* @param {string} content rich text string of content
* @param {Object} markerRich rich text style
* @param {Object} tooltipModel tooltip model
*/
setContent: function (content, markerRich, tooltipModel) {
if (this.el) {
this._zr.remove(this.el);
}
var markers = {};
var text = content;
var prefix = '{marker';
var suffix = '|}';
var startId = text.indexOf(prefix);
while (startId >= 0) {
var endId = text.indexOf(suffix);
var name = text.substr(startId + prefix.length, endId - startId - prefix.length);
if (name.indexOf('sub') > -1) {
markers['marker' + name] = {
textWidth: 4,
textHeight: 4,
textBorderRadius: 2,
textBackgroundColor: markerRich[name],
// TODO: textOffset is not implemented for rich text
textOffset: [3, 0]
};
} else {
markers['marker' + name] = {
textWidth: 10,
textHeight: 10,
textBorderRadius: 5,
textBackgroundColor: markerRich[name]
};
}
text = text.substr(endId + 1);
startId = text.indexOf('{marker');
}
var textStyleModel = tooltipModel.getModel('textStyle');
var fontSize = textStyleModel.get('fontSize');
var lineHeight = tooltipModel.get('textLineHeight');
if (lineHeight == null) {
lineHeight = Math.round(fontSize * 3 / 2);
}
this.el = new Text({
style: graphicUtil.setTextStyle({}, textStyleModel, {
rich: markers,
text: content,
textBackgroundColor: tooltipModel.get('backgroundColor'),
textBorderRadius: tooltipModel.get('borderRadius'),
textFill: tooltipModel.get('textStyle.color'),
textPadding: tooltipModel.get('padding'),
textLineHeight: lineHeight
}),
z: tooltipModel.get('z')
});
this._zr.add(this.el);
var self = this;
this.el.on('mouseover', function () {
// clear the timeout in hideLater and keep showing tooltip
if (self._enterable) {
clearTimeout(self._hideTimeout);
self._show = true;
}
self._inContent = true;
});
this.el.on('mouseout', function () {
if (self._enterable) {
if (self._show) {
self.hideLater(self._hideDelay);
}
}
self._inContent = false;
});
},
setEnterable: function (enterable) {
this._enterable = enterable;
},
getSize: function () {
var bounding = this.el.getBoundingRect();
return [bounding.width, bounding.height];
},
moveTo: function (x, y) {
if (this.el) {
var styleCoord = this._styleCoord;
makeStyleCoord(styleCoord, this._zr, x, y);
this.el.attr('position', [styleCoord[0], styleCoord[1]]);
}
},
hide: function () {
if (this.el) {
this.el.hide();
}
this._show = false;
},
hideLater: function (time) {
if (this._show && !(this._inContent && this._enterable)) {
if (time) {
this._hideDelay = time; // Set show false to avoid invoke hideLater multiple times
this._show = false;
this._hideTimeout = setTimeout(zrUtil.bind(this.hide, this), time);
} else {
this.hide();
}
}
},
isShow: function () {
return this._show;
},
dispose: function () {
clearTimeout(this._hideTimeout);
if (this.el) {
this._zr.remove(this.el);
}
},
getOuterSize: function () {
var size = this.getSize();
return {
width: size[0],
height: size[1]
};
}
};
var _default = TooltipRichContent;
module.exports = _default;

View File

@ -0,0 +1,781 @@
/*
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements. See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership. The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
var echarts = require("../../echarts");
var zrUtil = require("zrender/lib/core/util");
var env = require("zrender/lib/core/env");
var TooltipContent = require("./TooltipContent");
var TooltipRichContent = require("./TooltipRichContent");
var formatUtil = require("../../util/format");
var numberUtil = require("../../util/number");
var graphic = require("../../util/graphic");
var findPointFromSeries = require("../axisPointer/findPointFromSeries");
var layoutUtil = require("../../util/layout");
var Model = require("../../model/Model");
var globalListener = require("../axisPointer/globalListener");
var axisHelper = require("../../coord/axisHelper");
var axisPointerViewHelper = require("../axisPointer/viewHelper");
var _model = require("../../util/model");
var getTooltipRenderMode = _model.getTooltipRenderMode;
/*
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements. See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership. The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
var bind = zrUtil.bind;
var each = zrUtil.each;
var parsePercent = numberUtil.parsePercent;
var proxyRect = new graphic.Rect({
shape: {
x: -1,
y: -1,
width: 2,
height: 2
}
});
var _default = echarts.extendComponentView({
type: 'tooltip',
init: function (ecModel, api) {
if (env.node) {
return;
}
var tooltipModel = ecModel.getComponent('tooltip');
var renderMode = tooltipModel.get('renderMode');
this._renderMode = getTooltipRenderMode(renderMode);
var tooltipContent;
if (this._renderMode === 'html') {
tooltipContent = new TooltipContent(api.getDom(), api, {
appendToBody: tooltipModel.get('appendToBody', true)
});
this._newLine = '<br/>';
} else {
tooltipContent = new TooltipRichContent(api);
this._newLine = '\n';
}
this._tooltipContent = tooltipContent;
},
render: function (tooltipModel, ecModel, api) {
if (env.node) {
return;
} // Reset
this.group.removeAll();
/**
* @private
* @type {module:echarts/component/tooltip/TooltipModel}
*/
this._tooltipModel = tooltipModel;
/**
* @private
* @type {module:echarts/model/Global}
*/
this._ecModel = ecModel;
/**
* @private
* @type {module:echarts/ExtensionAPI}
*/
this._api = api;
/**
* Should be cleaned when render.
* @private
* @type {Array.<Array.<Object>>}
*/
this._lastDataByCoordSys = null;
/**
* @private
* @type {boolean}
*/
this._alwaysShowContent = tooltipModel.get('alwaysShowContent');
var tooltipContent = this._tooltipContent;
tooltipContent.update(tooltipModel);
tooltipContent.setEnterable(tooltipModel.get('enterable'));
this._initGlobalListener();
this._keepShow();
},
_initGlobalListener: function () {
var tooltipModel = this._tooltipModel;
var triggerOn = tooltipModel.get('triggerOn');
globalListener.register('itemTooltip', this._api, bind(function (currTrigger, e, dispatchAction) {
// If 'none', it is not controlled by mouse totally.
if (triggerOn !== 'none') {
if (triggerOn.indexOf(currTrigger) >= 0) {
this._tryShow(e, dispatchAction);
} else if (currTrigger === 'leave') {
this._hide(dispatchAction);
}
}
}, this));
},
_keepShow: function () {
var tooltipModel = this._tooltipModel;
var ecModel = this._ecModel;
var api = this._api; // Try to keep the tooltip show when refreshing
if (this._lastX != null && this._lastY != null // When user is willing to control tooltip totally using API,
// self.manuallyShowTip({x, y}) might cause tooltip hide,
// which is not expected.
&& tooltipModel.get('triggerOn') !== 'none') {
var self = this;
clearTimeout(this._refreshUpdateTimeout);
this._refreshUpdateTimeout = setTimeout(function () {
// Show tip next tick after other charts are rendered
// In case highlight action has wrong result
// FIXME
!api.isDisposed() && self.manuallyShowTip(tooltipModel, ecModel, api, {
x: self._lastX,
y: self._lastY
});
});
}
},
/**
* Show tip manually by
* dispatchAction({
* type: 'showTip',
* x: 10,
* y: 10
* });
* Or
* dispatchAction({
* type: 'showTip',
* seriesIndex: 0,
* dataIndex or dataIndexInside or name
* });
*
* TODO Batch
*/
manuallyShowTip: function (tooltipModel, ecModel, api, payload) {
if (payload.from === this.uid || env.node) {
return;
}
var dispatchAction = makeDispatchAction(payload, api); // Reset ticket
this._ticket = ''; // When triggered from axisPointer.
var dataByCoordSys = payload.dataByCoordSys;
if (payload.tooltip && payload.x != null && payload.y != null) {
var el = proxyRect;
el.position = [payload.x, payload.y];
el.update();
el.tooltip = payload.tooltip; // Manually show tooltip while view is not using zrender elements.
this._tryShow({
offsetX: payload.x,
offsetY: payload.y,
target: el
}, dispatchAction);
} else if (dataByCoordSys) {
this._tryShow({
offsetX: payload.x,
offsetY: payload.y,
position: payload.position,
dataByCoordSys: payload.dataByCoordSys,
tooltipOption: payload.tooltipOption
}, dispatchAction);
} else if (payload.seriesIndex != null) {
if (this._manuallyAxisShowTip(tooltipModel, ecModel, api, payload)) {
return;
}
var pointInfo = findPointFromSeries(payload, ecModel);
var cx = pointInfo.point[0];
var cy = pointInfo.point[1];
if (cx != null && cy != null) {
this._tryShow({
offsetX: cx,
offsetY: cy,
position: payload.position,
target: pointInfo.el
}, dispatchAction);
}
} else if (payload.x != null && payload.y != null) {
// FIXME
// should wrap dispatchAction like `axisPointer/globalListener` ?
api.dispatchAction({
type: 'updateAxisPointer',
x: payload.x,
y: payload.y
});
this._tryShow({
offsetX: payload.x,
offsetY: payload.y,
position: payload.position,
target: api.getZr().findHover(payload.x, payload.y).target
}, dispatchAction);
}
},
manuallyHideTip: function (tooltipModel, ecModel, api, payload) {
var tooltipContent = this._tooltipContent;
if (!this._alwaysShowContent && this._tooltipModel) {
tooltipContent.hideLater(this._tooltipModel.get('hideDelay'));
}
this._lastX = this._lastY = null;
if (payload.from !== this.uid) {
this._hide(makeDispatchAction(payload, api));
}
},
// Be compatible with previous design, that is, when tooltip.type is 'axis' and
// dispatchAction 'showTip' with seriesIndex and dataIndex will trigger axis pointer
// and tooltip.
_manuallyAxisShowTip: function (tooltipModel, ecModel, api, payload) {
var seriesIndex = payload.seriesIndex;
var dataIndex = payload.dataIndex;
var coordSysAxesInfo = ecModel.getComponent('axisPointer').coordSysAxesInfo;
if (seriesIndex == null || dataIndex == null || coordSysAxesInfo == null) {
return;
}
var seriesModel = ecModel.getSeriesByIndex(seriesIndex);
if (!seriesModel) {
return;
}
var data = seriesModel.getData();
var tooltipModel = buildTooltipModel([data.getItemModel(dataIndex), seriesModel, (seriesModel.coordinateSystem || {}).model, tooltipModel]);
if (tooltipModel.get('trigger') !== 'axis') {
return;
}
api.dispatchAction({
type: 'updateAxisPointer',
seriesIndex: seriesIndex,
dataIndex: dataIndex,
position: payload.position
});
return true;
},
_tryShow: function (e, dispatchAction) {
var el = e.target;
var tooltipModel = this._tooltipModel;
if (!tooltipModel) {
return;
} // Save mouse x, mouse y. So we can try to keep showing the tip if chart is refreshed
this._lastX = e.offsetX;
this._lastY = e.offsetY;
var dataByCoordSys = e.dataByCoordSys;
if (dataByCoordSys && dataByCoordSys.length) {
this._showAxisTooltip(dataByCoordSys, e);
} // Always show item tooltip if mouse is on the element with dataIndex
else if (el && el.dataIndex != null) {
this._lastDataByCoordSys = null;
this._showSeriesItemTooltip(e, el, dispatchAction);
} // Tooltip provided directly. Like legend.
else if (el && el.tooltip) {
this._lastDataByCoordSys = null;
this._showComponentItemTooltip(e, el, dispatchAction);
} else {
this._lastDataByCoordSys = null;
this._hide(dispatchAction);
}
},
_showOrMove: function (tooltipModel, cb) {
// showDelay is used in this case: tooltip.enterable is set
// as true. User intent to move mouse into tooltip and click
// something. `showDelay` makes it easier to enter the content
// but tooltip do not move immediately.
var delay = tooltipModel.get('showDelay');
cb = zrUtil.bind(cb, this);
clearTimeout(this._showTimout);
delay > 0 ? this._showTimout = setTimeout(cb, delay) : cb();
},
_showAxisTooltip: function (dataByCoordSys, e) {
var ecModel = this._ecModel;
var globalTooltipModel = this._tooltipModel;
var point = [e.offsetX, e.offsetY];
var singleDefaultHTML = [];
var singleParamsList = [];
var singleTooltipModel = buildTooltipModel([e.tooltipOption, globalTooltipModel]);
var renderMode = this._renderMode;
var newLine = this._newLine;
var markers = {};
each(dataByCoordSys, function (itemCoordSys) {
// var coordParamList = [];
// var coordDefaultHTML = [];
// var coordTooltipModel = buildTooltipModel([
// e.tooltipOption,
// itemCoordSys.tooltipOption,
// ecModel.getComponent(itemCoordSys.coordSysMainType, itemCoordSys.coordSysIndex),
// globalTooltipModel
// ]);
// var displayMode = coordTooltipModel.get('displayMode');
// var paramsList = displayMode === 'single' ? singleParamsList : [];
each(itemCoordSys.dataByAxis, function (item) {
var axisModel = ecModel.getComponent(item.axisDim + 'Axis', item.axisIndex);
var axisValue = item.value;
var seriesDefaultHTML = [];
if (!axisModel || axisValue == null) {
return;
}
var valueLabel = axisPointerViewHelper.getValueLabel(axisValue, axisModel.axis, ecModel, item.seriesDataIndices, item.valueLabelOpt);
zrUtil.each(item.seriesDataIndices, function (idxItem) {
var series = ecModel.getSeriesByIndex(idxItem.seriesIndex);
var dataIndex = idxItem.dataIndexInside;
var dataParams = series && series.getDataParams(dataIndex);
dataParams.axisDim = item.axisDim;
dataParams.axisIndex = item.axisIndex;
dataParams.axisType = item.axisType;
dataParams.axisId = item.axisId;
dataParams.axisValue = axisHelper.getAxisRawValue(axisModel.axis, axisValue);
dataParams.axisValueLabel = valueLabel;
if (dataParams) {
singleParamsList.push(dataParams);
var seriesTooltip = series.formatTooltip(dataIndex, true, null, renderMode);
var html;
if (zrUtil.isObject(seriesTooltip)) {
html = seriesTooltip.html;
var newMarkers = seriesTooltip.markers;
zrUtil.merge(markers, newMarkers);
} else {
html = seriesTooltip;
}
seriesDefaultHTML.push(html);
}
}); // Default tooltip content
// FIXME
// (1) should be the first data which has name?
// (2) themeRiver, firstDataIndex is array, and first line is unnecessary.
var firstLine = valueLabel;
if (renderMode !== 'html') {
singleDefaultHTML.push(seriesDefaultHTML.join(newLine));
} else {
singleDefaultHTML.push((firstLine ? formatUtil.encodeHTML(firstLine) + newLine : '') + seriesDefaultHTML.join(newLine));
}
});
}, this); // In most case, the second axis is shown upper than the first one.
singleDefaultHTML.reverse();
singleDefaultHTML = singleDefaultHTML.join(this._newLine + this._newLine);
var positionExpr = e.position;
this._showOrMove(singleTooltipModel, function () {
if (this._updateContentNotChangedOnAxis(dataByCoordSys)) {
this._updatePosition(singleTooltipModel, positionExpr, point[0], point[1], this._tooltipContent, singleParamsList);
} else {
this._showTooltipContent(singleTooltipModel, singleDefaultHTML, singleParamsList, Math.random(), point[0], point[1], positionExpr, undefined, markers);
}
}); // Do not trigger events here, because this branch only be entered
// from dispatchAction.
},
_showSeriesItemTooltip: function (e, el, dispatchAction) {
var ecModel = this._ecModel; // Use dataModel in element if possible
// Used when mouseover on a element like markPoint or edge
// In which case, the data is not main data in series.
var seriesIndex = el.seriesIndex;
var seriesModel = ecModel.getSeriesByIndex(seriesIndex); // For example, graph link.
var dataModel = el.dataModel || seriesModel;
var dataIndex = el.dataIndex;
var dataType = el.dataType;
var data = dataModel.getData(dataType);
var tooltipModel = buildTooltipModel([data.getItemModel(dataIndex), dataModel, seriesModel && (seriesModel.coordinateSystem || {}).model, this._tooltipModel]);
var tooltipTrigger = tooltipModel.get('trigger');
if (tooltipTrigger != null && tooltipTrigger !== 'item') {
return;
}
var params = dataModel.getDataParams(dataIndex, dataType);
var seriesTooltip = dataModel.formatTooltip(dataIndex, false, dataType, this._renderMode);
var defaultHtml;
var markers;
if (zrUtil.isObject(seriesTooltip)) {
defaultHtml = seriesTooltip.html;
markers = seriesTooltip.markers;
} else {
defaultHtml = seriesTooltip;
markers = null;
}
var asyncTicket = 'item_' + dataModel.name + '_' + dataIndex;
this._showOrMove(tooltipModel, function () {
this._showTooltipContent(tooltipModel, defaultHtml, params, asyncTicket, e.offsetX, e.offsetY, e.position, e.target, markers);
}); // FIXME
// duplicated showtip if manuallyShowTip is called from dispatchAction.
dispatchAction({
type: 'showTip',
dataIndexInside: dataIndex,
dataIndex: data.getRawIndex(dataIndex),
seriesIndex: seriesIndex,
from: this.uid
});
},
_showComponentItemTooltip: function (e, el, dispatchAction) {
var tooltipOpt = el.tooltip;
if (typeof tooltipOpt === 'string') {
var content = tooltipOpt;
tooltipOpt = {
content: content,
// Fixed formatter
formatter: content
};
}
var subTooltipModel = new Model(tooltipOpt, this._tooltipModel, this._ecModel);
var defaultHtml = subTooltipModel.get('content');
var asyncTicket = Math.random(); // Do not check whether `trigger` is 'none' here, because `trigger`
// only works on coordinate system. In fact, we have not found case
// that requires setting `trigger` nothing on component yet.
this._showOrMove(subTooltipModel, function () {
this._showTooltipContent(subTooltipModel, defaultHtml, subTooltipModel.get('formatterParams') || {}, asyncTicket, e.offsetX, e.offsetY, e.position, el);
}); // If not dispatch showTip, tip may be hide triggered by axis.
dispatchAction({
type: 'showTip',
from: this.uid
});
},
_showTooltipContent: function (tooltipModel, defaultHtml, params, asyncTicket, x, y, positionExpr, el, markers) {
// Reset ticket
this._ticket = '';
if (!tooltipModel.get('showContent') || !tooltipModel.get('show')) {
return;
}
var tooltipContent = this._tooltipContent;
var formatter = tooltipModel.get('formatter');
positionExpr = positionExpr || tooltipModel.get('position');
var html = defaultHtml;
if (formatter && typeof formatter === 'string') {
html = formatUtil.formatTpl(formatter, params, true);
} else if (typeof formatter === 'function') {
var callback = bind(function (cbTicket, html) {
if (cbTicket === this._ticket) {
tooltipContent.setContent(html, markers, tooltipModel);
this._updatePosition(tooltipModel, positionExpr, x, y, tooltipContent, params, el);
}
}, this);
this._ticket = asyncTicket;
html = formatter(params, asyncTicket, callback);
}
tooltipContent.setContent(html, markers, tooltipModel);
tooltipContent.show(tooltipModel);
this._updatePosition(tooltipModel, positionExpr, x, y, tooltipContent, params, el);
},
/**
* @param {string|Function|Array.<number>|Object} positionExpr
* @param {number} x Mouse x
* @param {number} y Mouse y
* @param {boolean} confine Whether confine tooltip content in view rect.
* @param {Object|<Array.<Object>} params
* @param {module:zrender/Element} el target element
* @param {module:echarts/ExtensionAPI} api
* @return {Array.<number>}
*/
_updatePosition: function (tooltipModel, positionExpr, x, y, content, params, el) {
var viewWidth = this._api.getWidth();
var viewHeight = this._api.getHeight();
positionExpr = positionExpr || tooltipModel.get('position');
var contentSize = content.getSize();
var align = tooltipModel.get('align');
var vAlign = tooltipModel.get('verticalAlign');
var rect = el && el.getBoundingRect().clone();
el && rect.applyTransform(el.transform);
if (typeof positionExpr === 'function') {
// Callback of position can be an array or a string specify the position
positionExpr = positionExpr([x, y], params, content.el, rect, {
viewSize: [viewWidth, viewHeight],
contentSize: contentSize.slice()
});
}
if (zrUtil.isArray(positionExpr)) {
x = parsePercent(positionExpr[0], viewWidth);
y = parsePercent(positionExpr[1], viewHeight);
} else if (zrUtil.isObject(positionExpr)) {
positionExpr.width = contentSize[0];
positionExpr.height = contentSize[1];
var layoutRect = layoutUtil.getLayoutRect(positionExpr, {
width: viewWidth,
height: viewHeight
});
x = layoutRect.x;
y = layoutRect.y;
align = null; // When positionExpr is left/top/right/bottom,
// align and verticalAlign will not work.
vAlign = null;
} // Specify tooltip position by string 'top' 'bottom' 'left' 'right' around graphic element
else if (typeof positionExpr === 'string' && el) {
var pos = calcTooltipPosition(positionExpr, rect, contentSize);
x = pos[0];
y = pos[1];
} else {
var pos = refixTooltipPosition(x, y, content, viewWidth, viewHeight, align ? null : 20, vAlign ? null : 20);
x = pos[0];
y = pos[1];
}
align && (x -= isCenterAlign(align) ? contentSize[0] / 2 : align === 'right' ? contentSize[0] : 0);
vAlign && (y -= isCenterAlign(vAlign) ? contentSize[1] / 2 : vAlign === 'bottom' ? contentSize[1] : 0);
if (tooltipModel.get('confine')) {
var pos = confineTooltipPosition(x, y, content, viewWidth, viewHeight);
x = pos[0];
y = pos[1];
}
content.moveTo(x, y);
},
// FIXME
// Should we remove this but leave this to user?
_updateContentNotChangedOnAxis: function (dataByCoordSys) {
var lastCoordSys = this._lastDataByCoordSys;
var contentNotChanged = !!lastCoordSys && lastCoordSys.length === dataByCoordSys.length;
contentNotChanged && each(lastCoordSys, function (lastItemCoordSys, indexCoordSys) {
var lastDataByAxis = lastItemCoordSys.dataByAxis || {};
var thisItemCoordSys = dataByCoordSys[indexCoordSys] || {};
var thisDataByAxis = thisItemCoordSys.dataByAxis || [];
contentNotChanged &= lastDataByAxis.length === thisDataByAxis.length;
contentNotChanged && each(lastDataByAxis, function (lastItem, indexAxis) {
var thisItem = thisDataByAxis[indexAxis] || {};
var lastIndices = lastItem.seriesDataIndices || [];
var newIndices = thisItem.seriesDataIndices || [];
contentNotChanged &= lastItem.value === thisItem.value && lastItem.axisType === thisItem.axisType && lastItem.axisId === thisItem.axisId && lastIndices.length === newIndices.length;
contentNotChanged && each(lastIndices, function (lastIdxItem, j) {
var newIdxItem = newIndices[j];
contentNotChanged &= lastIdxItem.seriesIndex === newIdxItem.seriesIndex && lastIdxItem.dataIndex === newIdxItem.dataIndex;
});
});
});
this._lastDataByCoordSys = dataByCoordSys;
return !!contentNotChanged;
},
_hide: function (dispatchAction) {
// Do not directly hideLater here, because this behavior may be prevented
// in dispatchAction when showTip is dispatched.
// FIXME
// duplicated hideTip if manuallyHideTip is called from dispatchAction.
this._lastDataByCoordSys = null;
dispatchAction({
type: 'hideTip',
from: this.uid
});
},
dispose: function (ecModel, api) {
if (env.node) {
return;
}
this._tooltipContent.dispose();
globalListener.unregister('itemTooltip', api);
}
});
/**
* @param {Array.<Object|module:echarts/model/Model>} modelCascade
* From top to bottom. (the last one should be globalTooltipModel);
*/
function buildTooltipModel(modelCascade) {
var resultModel = modelCascade.pop();
while (modelCascade.length) {
var tooltipOpt = modelCascade.pop();
if (tooltipOpt) {
if (Model.isInstance(tooltipOpt)) {
tooltipOpt = tooltipOpt.get('tooltip', true);
} // In each data item tooltip can be simply write:
// {
// value: 10,
// tooltip: 'Something you need to know'
// }
if (typeof tooltipOpt === 'string') {
tooltipOpt = {
formatter: tooltipOpt
};
}
resultModel = new Model(tooltipOpt, resultModel, resultModel.ecModel);
}
}
return resultModel;
}
function makeDispatchAction(payload, api) {
return payload.dispatchAction || zrUtil.bind(api.dispatchAction, api);
}
function refixTooltipPosition(x, y, content, viewWidth, viewHeight, gapH, gapV) {
var size = content.getOuterSize();
var width = size.width;
var height = size.height;
if (gapH != null) {
if (x + width + gapH > viewWidth) {
x -= width + gapH;
} else {
x += gapH;
}
}
if (gapV != null) {
if (y + height + gapV > viewHeight) {
y -= height + gapV;
} else {
y += gapV;
}
}
return [x, y];
}
function confineTooltipPosition(x, y, content, viewWidth, viewHeight) {
var size = content.getOuterSize();
var width = size.width;
var height = size.height;
x = Math.min(x + width, viewWidth) - width;
y = Math.min(y + height, viewHeight) - height;
x = Math.max(x, 0);
y = Math.max(y, 0);
return [x, y];
}
function calcTooltipPosition(position, rect, contentSize) {
var domWidth = contentSize[0];
var domHeight = contentSize[1];
var gap = 5;
var x = 0;
var y = 0;
var rectWidth = rect.width;
var rectHeight = rect.height;
switch (position) {
case 'inside':
x = rect.x + rectWidth / 2 - domWidth / 2;
y = rect.y + rectHeight / 2 - domHeight / 2;
break;
case 'top':
x = rect.x + rectWidth / 2 - domWidth / 2;
y = rect.y - domHeight - gap;
break;
case 'bottom':
x = rect.x + rectWidth / 2 - domWidth / 2;
y = rect.y + rectHeight + gap;
break;
case 'left':
x = rect.x - domWidth - gap;
y = rect.y + rectHeight / 2 - domHeight / 2;
break;
case 'right':
x = rect.x + rectWidth + gap;
y = rect.y + rectHeight / 2 - domHeight / 2;
}
return [x, y];
}
function isCenterAlign(align) {
return align === 'center' || align === 'middle';
}
module.exports = _default;