Improve polar

src/component/angleAxis.js

@@ -108,9 +108,11 @@ define(function(require) {
             var labels = angleAxisModel.formatLabels(axis.scale.getTicksLabels());
 
             var labelMargin = labelModel.get('margin');
+            var labelsAngles = axis.getLabelsPositions();
 
+            // Use length of ticksAngles because it may remove the last tick to avoid overlapping
             for (var i = 0; i < ticksAngles.length; i++) {
-                var tickAngle = ticksAngles[i] * Math.PI / 180;
+                var tickAngle = labelsAngles[i] * Math.PI / 180;
                 var r = radiusExtent[1];
                 var p = getPointOnAxisLine(cx, cy, r + labelMargin, tickAngle);
 

src/component/radiusAxis.js

@@ -4,7 +4,7 @@ define(function(require) {
     var zrUtil = require('zrender/core/util');
     var vector = require('zrender/core/vector');
 
-    var elementList = ['axisLabel', 'splitLine', 'splitArea', 'axisTick', 'axisLine'];
+    var elementList = ['splitLine', 'splitArea', 'axisLine', 'axisTick', 'axisLabel'];
 
     function getPointOnAxisLine(cx, cy, r, radian) {
         var dx = r * Math.cos(radian);
@@ -54,6 +54,11 @@ define(function(require) {
                     this['_' + name](radiusAxisModel, ticksPositions, angleExtent, cx, cy, api);
                 }
             }, this);
+
+            var z = radiusAxisModel.get('z');
+            this.group.eachChild(function (child) {
+                child.z = z;
+            });
         },
 
         /**
@@ -74,9 +79,9 @@ define(function(require) {
         _axisTick: function (radiusAxisModel, ticksPositions, angleExtent, cx, cy, api) {
             var tickModel = radiusAxisModel.getModel('axisTick');
 
-            var axisLineShape = getAxisLineShape(radiusAxisModel, cx, cy);
-            var start = [axisLineShape.x1, axisLineShape.y1];
-            var end = [axisLineShape.x2, axisLineShape.y2];
+            var lineShape = getAxisLineShape(radiusAxisModel, cx, cy);
+            var start = [lineShape.x1, lineShape.y1];
+            var end = [lineShape.x2, lineShape.y2];
 
             var len = vector.dist(end, start);
             var direction = [
@@ -89,6 +94,7 @@ define(function(require) {
             var p2 = [];
             var tickLen = tickModel.get('length');
             var lines = zrUtil.map(ticksPositions, function (tickPosition) {
+                // Get point on axis
                 vector.lerp(p1, start, end, tickPosition / len);
                 vector.scaleAndAdd(p2, p1, direction, tickLen);
                 return new api.Line({
@@ -102,7 +108,8 @@ define(function(require) {
             });
             this.group.add(api.mergePath(
                 lines, {
-                    style: tickModel.getModel('lineStyle').getLineStyle()
+                    style: tickModel.getModel('lineStyle').getLineStyle(),
+                    silent: true
                 }
             ));
         },
@@ -111,7 +118,44 @@ define(function(require) {
          * @private
          */
         _axisLabel: function (radiusAxisModel, ticksPositions, angleExtent, cx, cy, api) {
+            var axis = radiusAxisModel.axis;
+            var labelModel = radiusAxisModel.getModel('axisLabel');
+            var textStyleModel = labelModel.getModel('textStyle');
+
+            var labels = radiusAxisModel.formatLabels(axis.scale.getTicksLabels());
+
+            var lineShape = getAxisLineShape(radiusAxisModel, cx, cy);
+            var start = [lineShape.x1, lineShape.y1];
+            var end = [lineShape.x2, lineShape.y2];
 
+            var len = vector.dist(end, start);
+            var direction = [
+                start[1] - end[1],
+                end[0] - start[0]
+            ];
+            vector.normalize(direction, direction);
+
+            var p = [];
+            var labelMargin = labelModel.get('margin');
+            var labelsPositions = axis.getLabelsPositions();
+
+            // FIXME Text align and text baseline when axis angle is 90 degree
+            for (var i = 0; i < labelsPositions.length; i++) {
+                // Get point on axis
+                vector.lerp(p, start, end, labelsPositions[i] / len);
+                vector.scaleAndAdd(p, p, direction, labelMargin);
+                this.group.add(new api.Text({
+                    style: {
+                        x: p[0],
+                        y: p[1],
+                        text: labels[i],
+                        textAlign: 'center',
+                        textBaseline: 'top',
+                        font: textStyleModel.getFont()
+                    },
+                    silent: true
+                }));
+            };
         },
 
         /**
@@ -136,7 +180,8 @@ define(function(require) {
                         cx: cx,
                         cy: cy,
                         r: ticksPositions[i]
-                    }
+                    },
+                    silent: true
                 }))
             }
 
@@ -150,8 +195,7 @@ define(function(require) {
                         lineWidth: lineWidth,
                         fill: null
                     },
-                    silent: true,
-                    z: radiusAxisModel.get('z')
+                    silent: true
                 }));
             }
         },

src/coord/Axis.js

@@ -88,7 +88,7 @@ define(function (require) {
             data = this.scale.normalize(data);
 
             var extent = this.getExtent();
-            if (this.onBand && this.scale.type === 'ordinal') {
+            if (this.onBand) {
                 fixExtentWithBands(extent, this.scale.getExtentSize());
             }
 
@@ -104,7 +104,7 @@ define(function (require) {
         unmapData: function (mapped, clamp) {
             var extent = this.getExtent();
 
-            if (this.onBand && this.scale.type === 'ordinal') {
+            if (this.onBand) {
                 fixExtentWithBands(extent, this.scale.getExtentSize());
             }
 
@@ -116,20 +116,39 @@ define(function (require) {
          * @return {Array.<number>}
          */
         getTicksPositions: function () {
-            var ticks = this.scale.getTicks();
-            if (this.onBand && this.scale.type === 'ordinal') {
+            if (this.onBand) {
                 var bands = this.getBands();
-                var ret = [];
+                var positions = [];
                 for (var i = 0; i < bands.length; i++) {
-                    ret.push(bands[i][0]);
+                    positions.push(bands[i][0]);
                 }
                 if (bands[i - 1]) {
-                    ret.push(bands[i - 1][1]);
+                    positions.push(bands[i - 1][1]);
                 }
-                return ret;
+                return positions;
             }
             else {
-                return zrUtil.map(ticks, this.mapData, this);
+                return zrUtil.map(this.scale.getTicks(), this.mapData, this);
+            }
+        },
+
+        /**
+         * Positions of labels are on the ticks or on the middle of bands
+         * @return {Array.<number>}
+         */
+        getLabelsPositions: function () {
+            if (this.onBand) {
+                var bands = this.getBands();
+                var positions = [];
+                var band;
+                for (var i = 0; i < bands.length; i++) {
+                    band = bands[i];
+                    positions.push((band[0] + band[1]) / 2);
+                }
+                return positions;
+            }
+            else {
+                return zrUtil.map(this.scale.getTicks(), this.mapData, this);
             }
         },
 

src/coord/cartesian/Grid.js

@@ -197,7 +197,7 @@ define(function(require, factory) {
                     xAxisModel.get('type'),
                     xAxisPosition
                 );
-                axisX.onBand = xAxisModel.get('boundaryGap');
+                axisX.onBand = xAxisModel.get('boundaryGap') && axisX.type === 'category';
                 axisX.inverse = xAxisModel.get('inverse');
 
                 // Inject axis into axisModel
@@ -232,7 +232,7 @@ define(function(require, factory) {
                 this._axesList.push(axisY);
                 this._axesMap['y' + idx] = axisY;
 
-                xAxesMap[idx] = axisY;
+                yAxesMap[idx] = axisY;
                 yAxesCount++;
             }, this);
 
@@ -253,18 +253,6 @@ define(function(require, factory) {
 
                     cartesian.addAxis(xAxis);
                     cartesian.addAxis(yAxis);
-                });
-            });
-
-            ecModel.eachComponent('xAxis', function (xAxisModel, i) {
-                ecModel.eachComponent('yAxis', function (yAxisModel, j) {
-                    var key = 'x' + i + 'y' + j;
-                    var cartesian = new Cartesian2D(key);
-                    this._coordsMap[key] = cartesian;
-                    this._coordsList.push(cartesian);
-
-                    cartesian.addAxis(xAxisModel.axis);
-                    cartesian.addAxis(yAxisModel.axis);
                 }, this);
             }, this);
 

src/coord/polar/polarCreator.js

@@ -79,7 +79,7 @@ define(function (require) {
     function setAxis(axis, axisModel) {
         axis.type = axisModel.get('type');
         axis.scale = createScaleByModel(axisModel);
-        axis.onBand = axisModel.get('boundaryGap');
+        axis.onBand = axisModel.get('boundaryGap') && axis.type === 'category';
         axis.inverse = axisModel.get('inverse');
 
         // Inject axis instance
@@ -142,7 +142,7 @@ define(function (require) {
                 setAxis(radiusAxis, radiusAxisModel);
                 setAxis(angleAxis, angleAxisModel);
 
-                if (angleAxis.type === 'category') {
+                if (angleAxis.type === 'category' && ! angleAxis.onBand) {
                     var angle = 360 - 360 / (angleAxis.scale.getExtentSize() + 1);
                     angleAxis.setExtent(0, angle);
                 }

test/polarLine.html

@@ -44,8 +44,7 @@
                     polar: {},
                     angleAxis: {
                         // data: ['类目1', '类目2', '类目3', '类目4', '类目5',]
-                        data: xAxisData,
-                        boundaryGap: false
+                        data: xAxisData
                     },
                     radiusAxis: {
                     },