PHP Classes

File: vendors/echarts/src/component/tooltip/TooltipView.js

Recommend this page to a friend!
  Classes of Jorge Castro   Gentelella BladeOne   vendors/echarts/src/component/tooltip/TooltipView.js   Download  
File: vendors/echarts/src/component/tooltip/TooltipView.js
Role: Auxiliary data
Content type: text/plain
Description: Auxiliary data
Class: Gentelella BladeOne
Render templates using Bootstrap for presentation
Author: By
Last change:
Date: 3 years ago
Size: 41,523 bytes
 

Contents

Class file image Download
define(function (require) { var TooltipContent = require('./TooltipContent'); var graphic = require('../../util/graphic'); var zrUtil = require('zrender/core/util'); var formatUtil = require('../../util/format'); var numberUtil = require('../../util/number'); var parsePercent = numberUtil.parsePercent; var env = require('zrender/core/env'); function dataEqual(a, b) { if (!a || !b) { return false; } var round = numberUtil.round; return round(a[0]) === round(b[0]) && round(a[1]) === round(b[1]); } /** * @inner */ function makeLineShape(x1, y1, x2, y2) { return { x1: x1, y1: y1, x2: x2, y2: y2 }; } /** * @inner */ function makeRectShape(x, y, width, height) { return { x: x, y: y, width: width, height: height }; } /** * @inner */ function makeSectorShape(cx, cy, r0, r, startAngle, endAngle) { return { cx: cx, cy: cy, r0: r0, r: r, startAngle: startAngle, endAngle: endAngle, clockwise: true }; } function refixTooltipPosition(x, y, el, viewWidth, viewHeight) { var width = el.clientWidth; var height = el.clientHeight; var gap = 20; if (x + width + gap > viewWidth) { x -= width + gap; } else { x += gap; } if (y + height + gap > viewHeight) { y -= height + gap; } else { y += gap; } return [x, y]; } function calcTooltipPosition(position, rect, dom) { var domWidth = dom.clientWidth; var domHeight = dom.clientHeight; 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]; } /** * @param {string|Function|Array.<number>} positionExpr * @param {number} x Mouse x * @param {number} y Mouse y * @param {module:echarts/component/tooltip/TooltipContent} content * @param {Object|<Array.<Object>} params * @param {module:zrender/Element} el target element * @param {module:echarts/ExtensionAPI} api * @return {Array.<number>} */ function updatePosition(positionExpr, x, y, content, params, el, api) { var viewWidth = api.getWidth(); var viewHeight = api.getHeight(); 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); } if (zrUtil.isArray(positionExpr)) { x = parsePercent(positionExpr[0], viewWidth); y = parsePercent(positionExpr[1], viewHeight); } // Specify tooltip position by string 'top' 'bottom' 'left' 'right' around graphic element else if (typeof positionExpr === 'string' && el) { var pos = calcTooltipPosition( positionExpr, rect, content.el ); x = pos[0]; y = pos[1]; } else { var pos = refixTooltipPosition( x, y, content.el, viewWidth, viewHeight ); x = pos[0]; y = pos[1]; } content.moveTo(x, y); } function ifSeriesSupportAxisTrigger(seriesModel) { var coordSys = seriesModel.coordinateSystem; var trigger = seriesModel.get('tooltip.trigger', true); // Ignore series use item tooltip trigger and series coordinate system is not cartesian or return !(!coordSys || (coordSys.type !== 'cartesian2d' && coordSys.type !== 'polar' && coordSys.type !== 'single') || trigger === 'item'); } require('../../echarts').extendComponentView({ type: 'tooltip', _axisPointers: {}, init: function (ecModel, api) { if (env.node) { return; } var tooltipContent = new TooltipContent(api.getDom(), api); this._tooltipContent = tooltipContent; api.on('showTip', this._manuallyShowTip, this); api.on('hideTip', this._manuallyHideTip, this); }, render: function (tooltipModel, ecModel, api) { if (env.node) { return; } // Reset this.group.removeAll(); /** * @type {Object} * @private */ this._axisPointers = {}; /** * @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; /** * @type {Object} * @private */ this._lastHover = { // data // payloadBatch }; var tooltipContent = this._tooltipContent; tooltipContent.update(); tooltipContent.enterable = tooltipModel.get('enterable'); this._alwaysShowContent = tooltipModel.get('alwaysShowContent'); /** * @type {Object.<string, Array>} */ this._seriesGroupByAxis = this._prepareAxisTriggerData( tooltipModel, ecModel ); var crossText = this._crossText; if (crossText) { this.group.add(crossText); } // Try to keep the tooltip show when refreshing if (this._lastX != null && this._lastY != null) { 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 self._manuallyShowTip({ x: self._lastX, y: self._lastY }); }); } var zr = this._api.getZr(); zr.off('click', this._tryShow); zr.off('mousemove', this._mousemove); zr.off('mouseout', this._hide); zr.off('globalout', this._hide); if (tooltipModel.get('triggerOn') === 'click') { zr.on('click', this._tryShow, this); } else { zr.on('mousemove', this._mousemove, this); zr.on('mouseout', this._hide, this); zr.on('globalout', this._hide, this); } }, _mousemove: function (e) { var showDelay = this._tooltipModel.get('showDelay'); var self = this; clearTimeout(this._showTimeout); if (showDelay > 0) { this._showTimeout = setTimeout(function () { self._tryShow(e); }, showDelay); } else { this._tryShow(e); } }, /** * Show tip manually by * dispatchAction({ * type: 'showTip', * x: 10, * y: 10 * }); * Or * dispatchAction({ * type: 'showTip', * seriesIndex: 0, * dataIndex: 1 * }); * * TODO Batch */ _manuallyShowTip: function (event) { // From self if (event.from === this.uid) { return; } var ecModel = this._ecModel; var seriesIndex = event.seriesIndex; var dataIndex = event.dataIndex; var seriesModel = ecModel.getSeriesByIndex(seriesIndex); var api = this._api; if (event.x == null || event.y == null) { if (!seriesModel) { // Find the first series can use axis trigger ecModel.eachSeries(function (_series) { if (ifSeriesSupportAxisTrigger(_series) && !seriesModel) { seriesModel = _series; } }); } if (seriesModel) { var data = seriesModel.getData(); if (dataIndex == null) { dataIndex = data.indexOfName(event.name); } var el = data.getItemGraphicEl(dataIndex); var cx, cy; // Try to get the point in coordinate system var coordSys = seriesModel.coordinateSystem; if (coordSys && coordSys.dataToPoint) { var point = coordSys.dataToPoint( data.getValues( zrUtil.map(coordSys.dimensions, function (dim) { return seriesModel.coordDimToDataDim(dim)[0]; }), dataIndex, true ) ); cx = point && point[0]; cy = point && point[1]; } else if (el) { // Use graphic bounding rect var rect = el.getBoundingRect().clone(); rect.applyTransform(el.transform); cx = rect.x + rect.width / 2; cy = rect.y + rect.height / 2; } if (cx != null && cy != null) { this._tryShow({ offsetX: cx, offsetY: cy, target: el, event: {} }); } } } else { var el = api.getZr().handler.findHover(event.x, event.y); this._tryShow({ offsetX: event.x, offsetY: event.y, target: el, event: {} }); } }, _manuallyHideTip: function (e) { if (e.from === this.uid) { return; } this._hide(); }, _prepareAxisTriggerData: function (tooltipModel, ecModel) { // Prepare data for axis trigger var seriesGroupByAxis = {}; ecModel.eachSeries(function (seriesModel) { if (ifSeriesSupportAxisTrigger(seriesModel)) { var coordSys = seriesModel.coordinateSystem; var baseAxis; var key; // Only cartesian2d, polar and single support axis trigger if (coordSys.type === 'cartesian2d') { // FIXME `axisPointer.axis` is not baseAxis baseAxis = coordSys.getBaseAxis(); key = baseAxis.dim + baseAxis.index; } else if (coordSys.type === 'single') { baseAxis = coordSys.getAxis(); key = baseAxis.dim + baseAxis.type; } else { baseAxis = coordSys.getBaseAxis(); key = baseAxis.dim + coordSys.name; } seriesGroupByAxis[key] = seriesGroupByAxis[key] || { coordSys: [], series: [] }; seriesGroupByAxis[key].coordSys.push(coordSys); seriesGroupByAxis[key].series.push(seriesModel); } }, this); return seriesGroupByAxis; }, /** * mousemove handler * @param {Object} e * @private */ _tryShow: function (e) { var el = e.target; var tooltipModel = this._tooltipModel; var globalTrigger = tooltipModel.get('trigger'); var ecModel = this._ecModel; var api = this._api; 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; // Always show item tooltip if mouse is on the element with dataIndex if (el && el.dataIndex != null) { // 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 dataModel = el.dataModel || ecModel.getSeriesByIndex(el.seriesIndex); var dataIndex = el.dataIndex; var itemModel = dataModel.getData().getItemModel(dataIndex); // Series or single data may use item trigger when global is axis trigger if ((itemModel.get('tooltip.trigger') || globalTrigger) === 'axis') { this._showAxisTooltip(tooltipModel, ecModel, e); } else { // Reset ticket this._ticket = ''; // If either single data or series use item trigger this._hideAxisPointer(); // Reset last hover and dispatch downplay action this._resetLastHover(); this._showItemTooltipContent(dataModel, dataIndex, el.dataType, e); } api.dispatchAction({ type: 'showTip', from: this.uid, dataIndex: el.dataIndex, seriesIndex: el.seriesIndex }); } else { if (globalTrigger === 'item') { this._hide(); } else { // Try show axis tooltip this._showAxisTooltip(tooltipModel, ecModel, e); } // Action of cross pointer // other pointer types will trigger action in _dispatchAndShowSeriesTooltipContent method if (tooltipModel.get('axisPointer.type') === 'cross') { api.dispatchAction({ type: 'showTip', from: this.uid, x: e.offsetX, y: e.offsetY }); } } }, /** * Show tooltip on axis * @param {module:echarts/component/tooltip/TooltipModel} tooltipModel * @param {module:echarts/model/Global} ecModel * @param {Object} e * @private */ _showAxisTooltip: function (tooltipModel, ecModel, e) { var axisPointerModel = tooltipModel.getModel('axisPointer'); var axisPointerType = axisPointerModel.get('type'); if (axisPointerType === 'cross') { var el = e.target; if (el && el.dataIndex != null) { var seriesModel = ecModel.getSeriesByIndex(el.seriesIndex); var dataIndex = el.dataIndex; this._showItemTooltipContent(seriesModel, dataIndex, el.dataType, e); } } this._showAxisPointer(); var allNotShow = true; zrUtil.each(this._seriesGroupByAxis, function (seriesCoordSysSameAxis) { // Try show the axis pointer var allCoordSys = seriesCoordSysSameAxis.coordSys; var coordSys = allCoordSys[0]; // If mouse position is not in the grid or polar var point = [e.offsetX, e.offsetY]; if (!coordSys.containPoint(point)) { // Hide axis pointer this._hideAxisPointer(coordSys.name); return; } allNotShow = false; // Make sure point is discrete on cateogry axis var dimensions = coordSys.dimensions; var value = coordSys.pointToData(point, true); point = coordSys.dataToPoint(value); var baseAxis = coordSys.getBaseAxis(); var axisType = axisPointerModel.get('axis'); if (axisType === 'auto') { axisType = baseAxis.dim; } var contentNotChange = false; var lastHover = this._lastHover; if (axisPointerType === 'cross') { // If hover data not changed // Possible when two axes are all category if (dataEqual(lastHover.data, value)) { contentNotChange = true; } lastHover.data = value; } else { var valIndex = zrUtil.indexOf(dimensions, axisType); // If hover data not changed on the axis dimension if (lastHover.data === value[valIndex]) { contentNotChange = true; } lastHover.data = value[valIndex]; } if (coordSys.type === 'cartesian2d' && !contentNotChange) { this._showCartesianPointer( axisPointerModel, coordSys, axisType, point ); } else if (coordSys.type === 'polar' && !contentNotChange) { this._showPolarPointer( axisPointerModel, coordSys, axisType, point ); } else if (coordSys.type === 'single' && !contentNotChange) { this._showSinglePointer( axisPointerModel, coordSys, axisType, point ); } if (axisPointerType !== 'cross') { this._dispatchAndShowSeriesTooltipContent( coordSys, seriesCoordSysSameAxis.series, point, value, contentNotChange ); } }, this); if (!this._tooltipModel.get('show')) { this._hideAxisPointer(); } if (allNotShow) { this._hide(); } }, /** * Show tooltip on axis of cartesian coordinate * @param {module:echarts/model/Model} axisPointerModel * @param {module:echarts/coord/cartesian/Cartesian2D} cartesians * @param {string} axisType * @param {Array.<number>} point * @private */ _showCartesianPointer: function (axisPointerModel, cartesian, axisType, point) { var self = this; var axisPointerType = axisPointerModel.get('type'); var moveAnimation = axisPointerType !== 'cross'; if (axisPointerType === 'cross') { moveGridLine('x', point, cartesian.getAxis('y').getGlobalExtent()); moveGridLine('y', point, cartesian.getAxis('x').getGlobalExtent()); this._updateCrossText(cartesian, point, axisPointerModel); } else { var otherAxis = cartesian.getAxis(axisType === 'x' ? 'y' : 'x'); var otherExtent = otherAxis.getGlobalExtent(); if (cartesian.type === 'cartesian2d') { (axisPointerType === 'line' ? moveGridLine : moveGridShadow)( axisType, point, otherExtent ); } } /** * @inner */ function moveGridLine(axisType, point, otherExtent) { var targetShape = axisType === 'x' ? makeLineShape(point[0], otherExtent[0], point[0], otherExtent[1]) : makeLineShape(otherExtent[0], point[1], otherExtent[1], point[1]); var pointerEl = self._getPointerElement( cartesian, axisPointerModel, axisType, targetShape ); moveAnimation ? graphic.updateProps(pointerEl, { shape: targetShape }, axisPointerModel) : pointerEl.attr({ shape: targetShape }); } /** * @inner */ function moveGridShadow(axisType, point, otherExtent) { var axis = cartesian.getAxis(axisType); var bandWidth = axis.getBandWidth(); var span = otherExtent[1] - otherExtent[0]; var targetShape = axisType === 'x' ? makeRectShape(point[0] - bandWidth / 2, otherExtent[0], bandWidth, span) : makeRectShape(otherExtent[0], point[1] - bandWidth / 2, span, bandWidth); var pointerEl = self._getPointerElement( cartesian, axisPointerModel, axisType, targetShape ); moveAnimation ? graphic.updateProps(pointerEl, { shape: targetShape }, axisPointerModel) : pointerEl.attr({ shape: targetShape }); } }, _showSinglePointer: function (axisPointerModel, single, axisType, point) { var self = this; var axisPointerType = axisPointerModel.get('type'); var moveAnimation = axisPointerType !== 'cross'; var rect = single.getRect(); var otherExtent = [rect.y, rect.y + rect.height]; moveSingleLine(axisType, point, otherExtent); /** * @inner */ function moveSingleLine(axisType, point, otherExtent) { var axis = single.getAxis(); var orient = axis.orient; var targetShape = orient === 'horizontal' ? makeLineShape(point[0], otherExtent[0], point[0], otherExtent[1]) : makeLineShape(otherExtent[0], point[1], otherExtent[1], point[1]); var pointerEl = self._getPointerElement( single, axisPointerModel, axisType, targetShape ); moveAnimation ? graphic.updateProps(pointerEl, { shape: targetShape }, axisPointerModel) : pointerEl.attr({ shape: targetShape }); } }, /** * Show tooltip on axis of polar coordinate * @param {module:echarts/model/Model} axisPointerModel * @param {Array.<module:echarts/coord/polar/Polar>} polar * @param {string} axisType * @param {Array.<number>} point */ _showPolarPointer: function (axisPointerModel, polar, axisType, point) { var self = this; var axisPointerType = axisPointerModel.get('type'); var angleAxis = polar.getAngleAxis(); var radiusAxis = polar.getRadiusAxis(); var moveAnimation = axisPointerType !== 'cross'; if (axisPointerType === 'cross') { movePolarLine('angle', point, radiusAxis.getExtent()); movePolarLine('radius', point, angleAxis.getExtent()); this._updateCrossText(polar, point, axisPointerModel); } else { var otherAxis = polar.getAxis(axisType === 'radius' ? 'angle' : 'radius'); var otherExtent = otherAxis.getExtent(); (axisPointerType === 'line' ? movePolarLine : movePolarShadow)( axisType, point, otherExtent ); } /** * @inner */ function movePolarLine(axisType, point, otherExtent) { var mouseCoord = polar.pointToCoord(point); var targetShape; if (axisType === 'angle') { var p1 = polar.coordToPoint([otherExtent[0], mouseCoord[1]]); var p2 = polar.coordToPoint([otherExtent[1], mouseCoord[1]]); targetShape = makeLineShape(p1[0], p1[1], p2[0], p2[1]); } else { targetShape = { cx: polar.cx, cy: polar.cy, r: mouseCoord[0] }; } var pointerEl = self._getPointerElement( polar, axisPointerModel, axisType, targetShape ); moveAnimation ? graphic.updateProps(pointerEl, { shape: targetShape }, axisPointerModel) : pointerEl.attr({ shape: targetShape }); } /** * @inner */ function movePolarShadow(axisType, point, otherExtent) { var axis = polar.getAxis(axisType); var bandWidth = axis.getBandWidth(); var mouseCoord = polar.pointToCoord(point); var targetShape; var radian = Math.PI / 180; if (axisType === 'angle') { targetShape = makeSectorShape( polar.cx, polar.cy, otherExtent[0], otherExtent[1], // In ECharts y is negative if angle is positive (-mouseCoord[1] - bandWidth / 2) * radian, (-mouseCoord[1] + bandWidth / 2) * radian ); } else { targetShape = makeSectorShape( polar.cx, polar.cy, mouseCoord[0] - bandWidth / 2, mouseCoord[0] + bandWidth / 2, 0, Math.PI * 2 ); } var pointerEl = self._getPointerElement( polar, axisPointerModel, axisType, targetShape ); moveAnimation ? graphic.updateProps(pointerEl, { shape: targetShape }, axisPointerModel) : pointerEl.attr({ shape: targetShape }); } }, _updateCrossText: function (coordSys, point, axisPointerModel) { var crossStyleModel = axisPointerModel.getModel('crossStyle'); var textStyleModel = crossStyleModel.getModel('textStyle'); var tooltipModel = this._tooltipModel; var text = this._crossText; if (!text) { text = this._crossText = new graphic.Text({ style: { textAlign: 'left', textVerticalAlign: 'bottom' } }); this.group.add(text); } var value = coordSys.pointToData(point); var dims = coordSys.dimensions; value = zrUtil.map(value, function (val, idx) { var axis = coordSys.getAxis(dims[idx]); if (axis.type === 'category' || axis.type === 'time') { val = axis.scale.getLabel(val); } else { val = formatUtil.addCommas( val.toFixed(axis.getPixelPrecision()) ); } return val; }); text.setStyle({ fill: textStyleModel.getTextColor() || crossStyleModel.get('color'), textFont: textStyleModel.getFont(), text: value.join(', '), x: point[0] + 5, y: point[1] - 5 }); text.z = tooltipModel.get('z'); text.zlevel = tooltipModel.get('zlevel'); }, _getPointerElement: function (coordSys, pointerModel, axisType, initShape) { var tooltipModel = this._tooltipModel; var z = tooltipModel.get('z'); var zlevel = tooltipModel.get('zlevel'); var axisPointers = this._axisPointers; var coordSysName = coordSys.name; axisPointers[coordSysName] = axisPointers[coordSysName] || {}; if (axisPointers[coordSysName][axisType]) { return axisPointers[coordSysName][axisType]; } // Create if not exists var pointerType = pointerModel.get('type'); var styleModel = pointerModel.getModel(pointerType + 'Style'); var isShadow = pointerType === 'shadow'; var style = styleModel[isShadow ? 'getAreaStyle' : 'getLineStyle'](); var elementType = coordSys.type === 'polar' ? (isShadow ? 'Sector' : (axisType === 'radius' ? 'Circle' : 'Line')) : (isShadow ? 'Rect' : 'Line'); isShadow ? (style.stroke = null) : (style.fill = null); var el = axisPointers[coordSysName][axisType] = new graphic[elementType]({ style: style, z: z, zlevel: zlevel, silent: true, shape: initShape }); this.group.add(el); return el; }, /** * Dispatch actions and show tooltip on series * @param {Array.<module:echarts/model/Series>} seriesList * @param {Array.<number>} point * @param {Array.<number>} value * @param {boolean} contentNotChange * @param {Object} e */ _dispatchAndShowSeriesTooltipContent: function ( coordSys, seriesList, point, value, contentNotChange ) { var rootTooltipModel = this._tooltipModel; var tooltipContent = this._tooltipContent; var baseAxis = coordSys.getBaseAxis(); var payloadBatch = zrUtil.map(seriesList, function (series) { return { seriesIndex: series.seriesIndex, dataIndex: series.getAxisTooltipDataIndex ? series.getAxisTooltipDataIndex(series.coordDimToDataDim(baseAxis.dim), value, baseAxis) : series.getData().indexOfNearest( series.coordDimToDataDim(baseAxis.dim)[0], value[baseAxis.dim === 'x' || baseAxis.dim === 'radius' ? 0 : 1] ) }; }); var lastHover = this._lastHover; var api = this._api; // Dispatch downplay action if (lastHover.payloadBatch && !contentNotChange) { api.dispatchAction({ type: 'downplay', batch: lastHover.payloadBatch }); } // Dispatch highlight action if (!contentNotChange) { api.dispatchAction({ type: 'highlight', batch: payloadBatch }); lastHover.payloadBatch = payloadBatch; } // Dispatch showTip action api.dispatchAction({ type: 'showTip', dataIndex: payloadBatch[0].dataIndex, seriesIndex: payloadBatch[0].seriesIndex, from: this.uid }); if (baseAxis && rootTooltipModel.get('showContent') && rootTooltipModel.get('show')) { var formatter = rootTooltipModel.get('formatter'); var positionExpr = rootTooltipModel.get('position'); var html; var paramsList = zrUtil.map(seriesList, function (series, index) { return series.getDataParams(payloadBatch[index].dataIndex); }); // If only one series // FIXME // if (paramsList.length === 1) { // paramsList = paramsList[0]; // } tooltipContent.show(rootTooltipModel); // Update html content var firstDataIndex = payloadBatch[0].dataIndex; if (!contentNotChange) { // Reset ticket this._ticket = ''; if (!formatter) { // Default tooltip content // FIXME // (1) shold be the first data which has name? // (2) themeRiver, firstDataIndex is array, and first line is unnecessary. var firstLine = seriesList[0].getData().getName(firstDataIndex); html = (firstLine ? firstLine + '<br />' : '') + zrUtil.map(seriesList, function (series, index) { return series.formatTooltip(payloadBatch[index].dataIndex, true); }).join('<br />'); } else { if (typeof formatter === 'string') { html = formatUtil.formatTpl(formatter, paramsList); } else if (typeof formatter === 'function') { var self = this; var ticket = 'axis_' + coordSys.name + '_' + firstDataIndex; var callback = function (cbTicket, html) { if (cbTicket === self._ticket) { tooltipContent.setContent(html); updatePosition( positionExpr, point[0], point[1], tooltipContent, paramsList, null, api ); } }; self._ticket = ticket; html = formatter(paramsList, ticket, callback); } } tooltipContent.setContent(html); } updatePosition( positionExpr, point[0], point[1], tooltipContent, paramsList, null, api ); } }, /** * Show tooltip on item * @param {module:echarts/model/Series} seriesModel * @param {number} dataIndex * @param {string} dataType * @param {Object} e */ _showItemTooltipContent: function (seriesModel, dataIndex, dataType, e) { // FIXME Graph data var api = this._api; var data = seriesModel.getData(dataType); var itemModel = data.getItemModel(dataIndex); var rootTooltipModel = this._tooltipModel; var tooltipContent = this._tooltipContent; var tooltipModel = itemModel.getModel('tooltip'); // If series model if (tooltipModel.parentModel) { tooltipModel.parentModel.parentModel = rootTooltipModel; } else { tooltipModel.parentModel = this._tooltipModel; } if (tooltipModel.get('showContent') && tooltipModel.get('show')) { var formatter = tooltipModel.get('formatter'); var positionExpr = tooltipModel.get('position'); var params = seriesModel.getDataParams(dataIndex, dataType); var html; if (!formatter) { html = seriesModel.formatTooltip(dataIndex, false, dataType); } else { if (typeof formatter === 'string') { html = formatUtil.formatTpl(formatter, params); } else if (typeof formatter === 'function') { var self = this; var ticket = 'item_' + seriesModel.name + '_' + dataIndex; var callback = function (cbTicket, html) { if (cbTicket === self._ticket) { tooltipContent.setContent(html); updatePosition( positionExpr, e.offsetX, e.offsetY, tooltipContent, params, e.target, api ); } }; self._ticket = ticket; html = formatter(params, ticket, callback); } } tooltipContent.show(tooltipModel); tooltipContent.setContent(html); updatePosition( positionExpr, e.offsetX, e.offsetY, tooltipContent, params, e.target, api ); } }, /** * Show axis pointer * @param {string} [coordSysName] */ _showAxisPointer: function (coordSysName) { if (coordSysName) { var axisPointers = this._axisPointers[coordSysName]; axisPointers && zrUtil.each(axisPointers, function (el) { el.show(); }); } else { this.group.eachChild(function (child) { child.show(); }); this.group.show(); } }, _resetLastHover: function () { var lastHover = this._lastHover; if (lastHover.payloadBatch) { this._api.dispatchAction({ type: 'downplay', batch: lastHover.payloadBatch }); } // Reset lastHover this._lastHover = {}; }, /** * Hide axis pointer * @param {string} [coordSysName] */ _hideAxisPointer: function (coordSysName) { if (coordSysName) { var axisPointers = this._axisPointers[coordSysName]; axisPointers && zrUtil.each(axisPointers, function (el) { el.hide(); }); } else { this.group.hide(); } }, _hide: function () { clearTimeout(this._showTimeout); this._hideAxisPointer(); this._resetLastHover(); if (!this._alwaysShowContent) { this._tooltipContent.hideLater(this._tooltipModel.get('hideDelay')); } this._api.dispatchAction({ type: 'hideTip', from: this.uid }); this._lastX = this._lastY = null; }, dispose: function (ecModel, api) { if (env.node) { return; } var zr = api.getZr(); this._tooltipContent.hide(); zr.off('click', this._tryShow); zr.off('mousemove', this._mousemove); zr.off('mouseout', this._hide); zr.off('globalout', this._hide); api.off('showTip', this._manuallyShowTip); api.off('hideTip', this._manuallyHideTip); } }); });