Improve polar to support startAngle and clockwise

src/chart/line/LineView.js

@@ -173,7 +173,8 @@ define(function(require) {
                 group.add(polygon);
             }
 
-            polyline.setStyle(zrUtil.extend(
+            polyline.setStyle(zrUtil.defaults(
+                // Use color in lineStyle first
                 lineStyleModel.getLineStyle(),
                 {
                     stroke: data.getVisual('color'),
@@ -408,12 +409,13 @@ define(function(require) {
         },
 
         _createPolarClipShape: function (polar, animation) {
-            // var angleAxis = polar.getAngleAxis();
+            var angleAxis = polar.getAngleAxis();
             var radiusAxis = polar.getRadiusAxis();
 
             var radiusExtent = radiusAxis.getExtent();
+            var angleExtent = angleAxis.getExtent();
 
-            var PI2 = Math.PI * 2;
+            var RADIAN = Math.PI / 180;
 
             var clipPath = new graphic.Sector({
                 shape: {
@@ -421,16 +423,17 @@ define(function(require) {
                     cy: polar.cy,
                     r0: radiusExtent[0],
                     r: radiusExtent[1],
-                    startAngle: 0,
-                    endAngle: PI2
+                    startAngle: -angleExtent[0] * RADIAN,
+                    endAngle: -angleExtent[1] * RADIAN,
+                    clockwise: angleAxis.inverse
                 }
             });
 
             if (animation) {
-                clipPath.shape.endAngle = 0;
+                clipPath.shape.endAngle = -angleExtent[0] * RADIAN;
                 clipPath.animateTo({
                     shape: {
-                        endAngle: PI2
+                        endAngle: -angleExtent[1] * RADIAN
                     }
                 }, 1500, animation);
             }

src/component/axis/AngleAxisView.js

@@ -119,7 +119,7 @@ define(function (require) {
                         textFont: textStyleModel.getFont()
                     },
                     silent: true
-                }))
+                }));
             }
         },
 
@@ -141,7 +141,7 @@ define(function (require) {
                 splitLines[colorIndex] = splitLines[colorIndex] || [];
                 splitLines[colorIndex].push(new graphic.Line({
                     shape: getAxisLineShape(polar, radiusExtent[0], radiusExtent[1], ticksAngles[i])
-                }))
+                }));
             }
 
             // Simple optimization

src/component/axis/RadiusAxisView.js

@@ -16,10 +16,11 @@ define(function (require) {
             this.group.removeAll();
 
             var polarModel = ecModel.getComponent('polar', radiusAxisModel.get('polarIndex'));
+            var angleAxis = polarModel.coordinateSystem.getAngleAxis();
             var radiusAxis = radiusAxisModel.axis;
             var polar = polarModel.coordinateSystem;
             var ticksCoords = radiusAxis.getTicksCoords();
-            var axisAngle = radiusAxisModel.get('axisAngle');
+            var axisAngle = angleAxis.getExtent()[0];
             var radiusExtent = radiusAxis.getExtent();
             zrUtil.each(elementList, function (name) {
                 if (radiusAxisModel.get(name +'.show')) {
@@ -95,6 +96,7 @@ define(function (require) {
             var axis = radiusAxisModel.axis;
             var labelModel = radiusAxisModel.getModel('axisLabel');
             var textStyleModel = labelModel.getModel('textStyle');
+            var tickModel = radiusAxisModel.getModel('axisTick');
 
             var labels = radiusAxisModel.formatLabels(axis.scale.getTicksLabels());
 
@@ -102,34 +104,42 @@ define(function (require) {
             var end = polar.coordToPoint([radiusExtent[1], axisAngle]);
 
             var len = vector.dist(end, start);
-            var direction = [
+            var dir = [
                 end[1] - start[1],
                 start[0] - end[0]
             ];
-            vector.normalize(direction, direction);
+            vector.normalize(dir, dir);
 
             var p = [];
+            var tickLen = tickModel.get('length');
             var labelMargin = labelModel.get('margin');
             var labelsPositions = axis.getLabelsCoords();
             var labelRotate = labelModel.get('rotate');
 
             var labelTextAlign = 'center';
             if (labelRotate) {
-                labelTextAlign = labelRotate > 0 ? 'left' : 'right'
+                labelTextAlign = labelRotate > 0 ? 'left' : 'right';
+            }
+            // Point to top
+            if (dir[0] > -0.3 && dir[0] <= 0) {
+                labelTextAlign = 'right';
+            }
+            else if (dir[0] < 0.3 && dir[0] >= 0) {
+                labelTextAlign = 'left';
             }
 
             // 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);
+                vector.scaleAndAdd(p, p, dir, labelMargin + tickLen);
                 this.group.add(new graphic.Text({
                     style: {
                         x: p[0],
                         y: p[1],
                         text: labels[i],
                         textAlign: labelTextAlign,
-                        textBaseline: 'bottom',
+                        textBaseline: dir[1] > 0.4 ? 'bottom' : (dir[1] < -0.4 ? 'top' : 'middle'),
                         textFont: textStyleModel.getFont()
                     },
                     rotation: labelRotate * Math.PI / 180,

src/component/tooltip.js

@@ -491,8 +491,9 @@ define(function (require) {
                     targetShape = makeSectorShape(
                         polar.cx, polar.cy,
                         otherExtent[0], otherExtent[1],
-                        (mouseCoord[1] - bandWidth / 2) * radian,
-                        (mouseCoord[1] + bandWidth / 2) * radian
+                        // In ECharts y is negative if angle is positive
+                        (-mouseCoord[1] - bandWidth / 2) * radian,
+                        (-mouseCoord[1] + bandWidth / 2) * radian
                     );
                 }
                 else {

src/coord/Axis.js

@@ -104,13 +104,14 @@ define(function (require) {
 
         /**
          * Set coord extent
-         * @param {number} min
-         * @param {number} max
+         * @param {number} start
+         * @param {number} end
          */
-        setExtent: function (min, max) {
+        setExtent: function (start, end) {
             var extent = this._extent;
-            extent[0] = min;
-            extent[1] = max;
+            var inverse = this.inverse;
+            extent[0] = inverse ? end : start;
+            extent[1] = inverse ? start : end;
         },
 
         /**
@@ -197,17 +198,17 @@ define(function (require) {
          */
          // FIXME Situation when labels is on ticks
         getBands: function () {
-            var extent = this._extent;
+            var extent = this.getExtent();
             var bands = [];
             var len = this.scale.count();
             var start = extent[0];
             var end = extent[1];
-            var size = end - start;
+            var span = end - start;
 
             for (var i = 0; i < len; i++) {
                 bands.push([
-                    size * i / len + start,
-                    size * (i + 1) / len + start
+                    span * i / len + start,
+                    span * (i + 1) / len + start
                 ]);
             }
             return bands;

src/coord/cartesian/AxisModel.js

@@ -34,7 +34,6 @@ define(function(require) {
 
     zrUtil.merge(AxisModel.prototype, require('../axisModelCommonMixin'));
 
-
     // x axis
     AxisModel.extend({
 

src/coord/polar/AngleAxis.js

@@ -19,7 +19,7 @@ define(function(require) {
          * @type {string}
          */
         this.type = 'category';
-    };
+    }
 
     AngleAxis.prototype = {
 

src/coord/polar/AxisModel.js

@@ -47,8 +47,6 @@ define(function(require) {
 
             polarIndex: 0,
 
-            axisAngle: 0,
-
             splitNumber: 5
         }
     });
@@ -75,7 +73,9 @@ define(function(require) {
 
             polarIndex: 0,
 
-            clockWise: true,
+            startAngle: 90,
+
+            clockwise: true,
 
             splitNumber: 12,
 

src/coord/polar/Polar.js

@@ -159,7 +159,7 @@ define(function(require) {
             return this.coordToPoint([
                 this._radiusAxis.dataToRadius(data[0], clamp),
                 this._angleAxis.dataToAngle(data[1], clamp)
-            ])
+            ]);
         },
 
         /**
@@ -184,20 +184,24 @@ define(function(require) {
         pointToCoord: function (point) {
             var dx = point[0] - this.cx;
             var dy = point[1] - this.cy;
+            var angleAxis = this.getAngleAxis();
+            var extent = angleAxis.getExtent();
+            var minAngle = Math.min(extent[0], extent[1]);
+            var maxAngle = Math.max(extent[0], extent[1]);
 
             var radius = Math.sqrt(dx * dx + dy * dy);
             dx /= radius;
             dy /= radius;
 
-            var radian = Math.atan2(dy, dx);
+            var radian = Math.atan2(-dy, dx) / Math.PI * 180;
 
-            // Threshold to 0 - 360
-            // FIXME Angle Extent ?
-            if (radian < 0) {
-                radian += Math.PI * 2;
+            // move to angleExtent
+            var dir = radian < minAngle ? 1 : -1;
+            while (radian < minAngle || radian > maxAngle) {
+                radian += dir * 360;
             }
 
-            return [radius, radian / Math.PI * 180];
+            return [radius, radian];
         },
 
         /**
@@ -209,11 +213,12 @@ define(function(require) {
             var radius = coord[0];
             var radian = coord[1] / 180 * Math.PI;
             var x = Math.cos(radian) * radius + this.cx;
-            var y = Math.sin(radian) * radius + this.cy;
+            // Inverse the y
+            var y = -Math.sin(radian) * radius + this.cy;
 
             return [x, y];
         }
-    }
+    };
 
     return Polar;
 });
\ No newline at end of file

src/coord/polar/polarCreator.js

@@ -46,6 +46,12 @@ define(function (require) {
         axis.onBand = axisModel.get('boundaryGap') && axis.type === 'category';
         axis.inverse = axisModel.get('inverse');
 
+        if (axisModel.type === 'angleAxis') {
+            var startAngle = axisModel.get('startAngle');
+            axis.setExtent(startAngle, startAngle + 360);
+            axis.inverse = axisModel.get('clockwise');
+        }
+
         // Inject axis instance
         axisModel.axis = axis;
         axis.model = axisModel;
@@ -118,8 +124,10 @@ define(function (require) {
             zrUtil.each(polarList, function (polar) {
                 var angleAxis = polar.getAngleAxis();
                 if (angleAxis.type === 'category' && !angleAxis.onBand) {
-                    var angle = 360 - 360 / (angleAxis.scale.count() + 1);
-                    angleAxis.setExtent(0, angle);
+                    var extent = angleAxis.getExtent();
+                    var diff = 360 / (angleAxis.scale.count() + 1);
+                    angleAxis.inverse ? (extent[1] += diff) : (extent[1] -= diff);
+                    angleAxis.setExtent(extent[0], extent[1]);
                 }
             });