From bbff15476d156d16973ff3093b72874ad126a045 Mon Sep 17 00:00:00 2001 From: lang Date: Thu, 15 Oct 2015 15:56:47 +0800 Subject: [PATCH] Tooltip fix for the situation two cartesian exists in one grid --- src/component/tooltip.js | 91 +++++++++++++++++++++--------- src/coord/cartesian/Cartesian2D.js | 7 ++- src/coord/polar/Polar.js | 14 +++-- 3 files changed, 77 insertions(+), 35 deletions(-) diff --git a/src/component/tooltip.js b/src/component/tooltip.js index 40e23908b..d90c04fc8 100644 --- a/src/component/tooltip.js +++ b/src/component/tooltip.js @@ -68,22 +68,53 @@ define(function (require) { this._tooltipContent.hide(); - var seriesGroupByCoordSys = {}; + // Prepare data for axis trigger + var seriesGroupByAxis = {}; ecModel.eachSeries(function (seriesModel) { var coordSys = seriesModel.coordinateSystem; - if (coordSys) { - var name = coordSys.name; - seriesGroupByCoordSys[name] = seriesGroupByCoordSys[name] || { - coordSys: coordSys, - series: [] - }; - seriesGroupByCoordSys[name].series.push(seriesModel); + if (!coordSys) { + return; + } + + var coordSysType = coordSys.type; + + var baseAxis; + var key; + + // Only cartesian2d and polar support axis trigger + if (coordSysType === 'cartesian2d') { + baseAxis = coordSys.getBaseAxis(); + var baseDim = baseAxis.dim; + var axisIndex = seriesModel.get(baseDim + 'AxisIndex'); + + key = baseDim + axisIndex; + } + else if (coordSysType === 'polar') { + baseAxis = coordSys.getBaseAxis(); + key = baseAxis.dim + coordSys.name; + } + + if (!key) { + return; } + + seriesGroupByAxis[key] = seriesGroupByAxis[key] || { + coordSys: [], + series: [] + }; + seriesGroupByAxis[key].coordSys.push(coordSys); + seriesGroupByAxis[key].series.push(seriesModel); + }, this); - this._coordinateSystems = seriesGroupByCoordSys; + this._seriesGroupByAxis = seriesGroupByAxis; }, + /** + * mousemove handler + * @param {Object} e + * @private + */ _mouseMove: function (e) { var el = e.target; var tooltipModel = this._tooltipModel; @@ -115,34 +146,37 @@ define(function (require) { /** * Show tooltip on axis * @param {Object} e + * @private */ _showAxisTooltip: function (e) { var tooltipModel = this._tooltipModel; var axisPointerModel = tooltipModel.getModel('axisPointer'); - zrUtil.each(this._coordinateSystems, function (item) { + zrUtil.each(this._seriesGroupByAxis, function (item) { // Try show the axis pointer this.group.show(); - var coordSys = item.coordSys; + var allCoordSys = item.coordSys; + var coordSys = allCoordSys[0]; // If mouse position is not in the grid or polar var point = [e.offsetX, e.offsetY]; - if (coordSys && !coordSys.containPoint(point)) { + if (!coordSys.containPoint(point)) { // Hide axis pointer this._hide(); return; } // Make sure point is discrete on cateogry axis - var value = coordSys.pointToData(point); + + var value = coordSys.pointToData(point, true); point = coordSys.dataToPoint(value); if (coordSys.type === 'cartesian2d') { - this._showCartesianPointer(axisPointerModel, coordSys, point); + this._showCartesianPointer(axisPointerModel, allCoordSys, point); } else if (coordSys.type === 'polar') { - this._showPolarPointer(axisPointerModel, coordSys, point); + this._showPolarPointer(axisPointerModel, allCoordSys, point); } this._showSeriesTooltip(coordSys, item.series, point, value); @@ -153,25 +187,28 @@ define(function (require) { /** * Show tooltip on axis of cartesian coordinate * @param {module:echarts/model/Model} axisPointerModel - * @param {module:echarts/coord/cartesian/Cartesian2D} cartesian + * @param {Array.} cartesians * @param {Array.} point * @private */ - _showCartesianPointer: function (axisPointerModel, cartesian, point) { + _showCartesianPointer: function (axisPointerModel, cartesians, point) { var self = this; - var cateogryAxis = cartesian.getAxesByScale('ordinal')[0]; - var axisPointerType = axisPointerModel.get('type'); + var cartesian = cartesians[0]; + if (axisPointerType === 'cross') { moveGridLine('x', point, cartesian.getAxis('y').getExtent()); moveGridLine('y', point, cartesian.getAxis('x').getExtent()); } else { + // Use the first cartesian + var baseAxis = cartesian.getBaseAxis(); + var axisType = axisPointerModel.get('axis'); if (axisType === 'auto') { - axisType = (cateogryAxis && cateogryAxis.dim) || 'x'; + axisType = (baseAxis && baseAxis.dim) || 'x'; } var otherAxis = cartesian.getAxis(axisType === 'x' ? 'y' : 'x'); @@ -226,14 +263,16 @@ define(function (require) { /** * Show tooltip on axis of polar coordinate * @param {module:echarts/model/Model} axisPointerModel - * @param {module:echarts/coord/polar/Polar} polar + * @param {Array.} polars * @param {Array.} point */ - _showPolarPointer: function (axisPointerModel, polar, point) { + _showPolarPointer: function (axisPointerModel, polars, point) { var self = this; var axisPointerType = axisPointerModel.get('type'); + var polar = polars[0]; + var angleAxis = polar.getAngleAxis(); var radiusAxis = polar.getRadiusAxis(); @@ -362,10 +401,10 @@ define(function (require) { var tooltipContent = this._tooltipContent; var data = seriesList[0].getData(); - var categoryAxis = coordSys.getAxesByScale('ordinal')[0]; - if (categoryAxis && rootTooltipModel.get('showContent')) { - var rank = value[categoryAxis.dim === 'x' ? 0 : 1]; - var dataIndex = data.indexOf(categoryAxis.dim, rank); + var baseAxis = coordSys.getBaseAxis(); + if (baseAxis && rootTooltipModel.get('showContent')) { + var rank = value[baseAxis.dim === 'x' ? 0 : 1]; + var dataIndex = data.indexOf(baseAxis.dim, rank); var html = data.getName(dataIndex) + '
' + zrUtil.map(seriesList, function (series) { diff --git a/src/coord/cartesian/Cartesian2D.js b/src/coord/cartesian/Cartesian2D.js index 206420d75..144d9162a 100644 --- a/src/coord/cartesian/Cartesian2D.js +++ b/src/coord/cartesian/Cartesian2D.js @@ -84,12 +84,13 @@ define(function(require) { /** * @param {Array.} point + * @param {boolean} [clamp=false] * @return {Array.} */ - pointToData: function (point) { + pointToData: function (point, clamp) { return [ - this.getAxis('x').coordToData(point[0]), - this.getAxis('y').coordToData(point[1]) + this.getAxis('x').coordToData(point[0], clamp), + this.getAxis('y').coordToData(point[1], clamp) ]; }, diff --git a/src/coord/polar/Polar.js b/src/coord/polar/Polar.js index 9fed96a07..56a36e160 100644 --- a/src/coord/polar/Polar.js +++ b/src/coord/polar/Polar.js @@ -154,25 +154,27 @@ define(function(require) { * Convert a single data item to (x, y) point. * Parameter data is an array which the first element is radius and the second is angle * @param {Array.} data + * @param {boolean} [clamp=false] * @return {Array.} */ - dataToPoint: function (data) { + dataToPoint: function (data, clamp) { return this.coordToPoint([ - this._radiusAxis.dataToRadius(data[0]), - this._angleAxis.dataToAngle(data[1]) + this._radiusAxis.dataToRadius(data[0], clamp), + this._angleAxis.dataToAngle(data[1], clamp) ]) }, /** * Convert a (x, y) point to data * @param {Array.} point + * @param {boolean} [clamp=false] * @return {Array.} */ - pointToData: function (point) { + pointToData: function (point, clamp) { var coord = this.pointToCoord(point); return [ - this._radiusAxis.radiusToData(coord[0]), - this._angleAxis.angleToData(coord[1]) + this._radiusAxis.radiusToData(coord[0], clamp), + this._angleAxis.angleToData(coord[1], clamp) ]; }, -- GitLab