Tooltip fix for the situation two cartesian exists in one grid

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.<module:echarts/coord/cartesian/Cartesian2D>} cartesians
          * @param {Array.<number>} 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.<module:echarts/coord/polar/Polar>} polars
          * @param {Array.<number>} 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) + '<br />'
                     + zrUtil.map(seriesList, function (series) {

src/coord/cartesian/Cartesian2D.js

@@ -84,12 +84,13 @@ define(function(require) {
 
         /**
          * @param {Array.<number>} point
+         * @param {boolean} [clamp=false]
          * @return {Array.<number>}
          */
-        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)
             ];
         },
 

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.<number>} data
+         * @param {boolean} [clamp=false]
          * @return {Array.<number>}
          */
-        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.<number>} point
+         * @param {boolean} [clamp=false]
          * @return {Array.<number>}
          */
-        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)
             ];
         },