diff --git a/src/component/tooltip/TooltipContent.js b/src/component/tooltip/TooltipContent.js index 0afa1a08ce30eb6e86e0808958033d6103bebde1..b48dad6315b37e00cdf4da72199a162c1459a41e 100644 --- a/src/component/tooltip/TooltipContent.js +++ b/src/component/tooltip/TooltipContent.js @@ -138,7 +138,7 @@ function TooltipContent(container, api) { this._x = api.getWidth() / 2; this._y = api.getHeight() / 2; - container.appendChild(el); + document.body.appendChild(el); this._container = container; @@ -292,6 +292,11 @@ TooltipContent.prototype = { return this._show; }, + + dispose: function () { + this.el.parentNode.removeChild(this.el) + }, + getOuterSize: function () { var width = this.el.clientWidth; var height = this.el.clientHeight; @@ -308,6 +313,7 @@ TooltipContent.prototype = { return {width: width, height: height}; } + }; export default TooltipContent; diff --git a/src/component/tooltip/TooltipView.js b/src/component/tooltip/TooltipView.js index a74518436322f18f7ddea68e11fd2101b27157fc..69316529cf98619726857f0d2f2f98b1eafc72a4 100644 --- a/src/component/tooltip/TooltipView.js +++ b/src/component/tooltip/TooltipView.js @@ -65,6 +65,10 @@ export default echarts.extendComponentView({ } this._tooltipContent = tooltipContent; + + this._event = {}; + this._viewWidth = document.body.clientWidth; + this._viewHeight = document.body.clientHeight; }, render: function (tooltipModel, ecModel, api) { @@ -126,6 +130,7 @@ export default echarts.extendComponentView({ // If 'none', it is not controlled by mouse totally. if (triggerOn !== 'none') { if (triggerOn.indexOf(currTrigger) >= 0) { + this._event = e.event; this._tryShow(e, dispatchAction); } else if (currTrigger === 'leave') { @@ -201,7 +206,8 @@ export default echarts.extendComponentView({ this._tryShow({ offsetX: payload.x, offsetY: payload.y, - target: el + target: el, + event: this._event }, dispatchAction); } else if (dataByCoordSys) { @@ -209,7 +215,7 @@ export default echarts.extendComponentView({ offsetX: payload.x, offsetY: payload.y, position: payload.position, - event: {}, + event: this._event, dataByCoordSys: payload.dataByCoordSys, tooltipOption: payload.tooltipOption }, dispatchAction); @@ -229,7 +235,7 @@ export default echarts.extendComponentView({ offsetY: cy, position: payload.position, target: pointInfo.el, - event: {} + event: this._event }, dispatchAction); } } @@ -247,7 +253,7 @@ export default echarts.extendComponentView({ offsetY: payload.y, position: payload.position, target: api.getZr().findHover(payload.x, payload.y).target, - event: {} + event: this._event }, dispatchAction); } }, @@ -314,8 +320,8 @@ export default echarts.extendComponentView({ } // 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; + this._lastX = e.event.pageX; + this._lastY = e.event.pageY; var dataByCoordSys = e.dataByCoordSys; if (dataByCoordSys && dataByCoordSys.length) { @@ -353,7 +359,7 @@ export default echarts.extendComponentView({ _showAxisTooltip: function (dataByCoordSys, e) { var ecModel = this._ecModel; var globalTooltipModel = this._tooltipModel; - var point = [e.offsetX, e.offsetY]; + var point = [e.event.pageX, e.event.pageY]; var singleDefaultHTML = []; var singleParamsList = []; var singleTooltipModel = buildTooltipModel([ @@ -509,7 +515,7 @@ export default echarts.extendComponentView({ this._showOrMove(tooltipModel, function () { this._showTooltipContent( tooltipModel, defaultHtml, params, asyncTicket, - e.offsetX, e.offsetY, e.position, e.target, markers + e.event.pageX, e.event.pageY, e.position, e.target, markers ); }); @@ -545,7 +551,7 @@ export default echarts.extendComponentView({ this._showOrMove(subTooltipModel, function () { this._showTooltipContent( subTooltipModel, defaultHtml, subTooltipModel.get('formatterParams') || {}, - asyncTicket, e.offsetX, e.offsetY, e.position, el + asyncTicket, e.event.pageX, e.event.pageY, e.position, el ); }); @@ -607,8 +613,8 @@ export default echarts.extendComponentView({ * @return {Array.} */ _updatePosition: function (tooltipModel, positionExpr, x, y, content, params, el) { - var viewWidth = this._api.getWidth(); - var viewHeight = this._api.getHeight(); + var viewWidth = this._viewWidth; + var viewHeight = this._viewHeight; positionExpr = positionExpr || tooltipModel.get('position'); var contentSize = content.getSize(); @@ -727,7 +733,7 @@ export default echarts.extendComponentView({ if (env.node) { return; } - this._tooltipContent.hide(); + this._tooltipContent.dispose(); globalListener.unregister('itemTooltip', api); } });