Label rotate fix

src/chart/helper/createListFromArray.js

@@ -25,17 +25,16 @@ define(function(require) {
                 dimensions = [{
                     name: 'x',
                     type: 'ordinal'
-                }];
-                dimensions.push({
+                }, {
                     name: 'y',
                     // If two category axes
                     type: isYAxisCategory ? 'ordinal' : 'number',
                     stackable: !isYAxisCategory
-                });
+                }];
 
                 categoryAxisModel = xAxisModel;
             }
-            else if (yAxisType === 'category') {
+            else if (isYAxisCategory) {
                 dimensions = [{
                     name: 'y',
                     type: 'ordinal'
@@ -64,18 +63,21 @@ define(function(require) {
             var angleAxisModel = ecModel.findComponent('angleAxis', axisFinder);
             var radiusAxisModel = ecModel.findComponent('radiusAxis', axisFinder);
 
+            var isRadiusAxisCategory = radiusAxisModel.get('type') === 'category';
             if (angleAxisModel.get('type') === 'category') {
                 dimensions = [{
                     name: 'angle',
                     type: 'ordinal'
                 }, {
                     name: 'radius',
-                    stackable: true
+                    // If two category axes
+                    type: isRadiusAxisCategory ? 'ordinal' : 'number',
+                    stackable: !isRadiusAxisCategory
                 }];
 
                 categoryAxisModel = angleAxisModel;
             }
-            else if (radiusAxisModel.get('type') === 'category') {
+            else if (isRadiusAxisCategory) {
                 dimensions = [{
                     name: 'radius',
                     type: 'ordinal'
@@ -111,6 +113,7 @@ define(function(require) {
 
         var nameList = [];
         if (categoryAxisModel) {
+            // FIXME Two category axis
             var categories = categoryAxisModel.get('data');
             if (categories) {
                 var dataLen = data.length;

src/component/axis/AngleAxisView.js

@@ -130,7 +130,6 @@ define(function (require) {
             var splitLineModel = angleAxisModel.getModel('splitLine');
             var lineStyleModel = splitLineModel.getModel('lineStyle');
             var lineColors = lineStyleModel.get('color');
-            var lineWidth = lineStyleModel.get('width');
             var lineCount = 0;
 
             lineColors = lineColors instanceof Array ? lineColors : [lineColors];
@@ -149,11 +148,9 @@ define(function (require) {
             // Batching the lines if color are the same
             for (var i = 0; i < splitLines.length; i++) {
                 this.group.add(graphic.mergePath(splitLines[i], {
-                    style: {
-                        stroke: lineColors[i % lineColors.length],
-                        lineType: lineStyleModel.getLineDash(),
-                        lineWidth: lineWidth
-                    },
+                    style: zrUtil.defaults({
+                        stroke: lineColors[i % lineColors.length]
+                    }, lineStyleModel.getLineStyle()),
                     silent: true,
                     z: angleAxisModel.get('z')
                 }));

src/component/axis/AxisView.js

@@ -197,6 +197,12 @@ define(function (require) {
             var labelMargin = labelModel.get('margin');
             var labelRotate = labelModel.get('rotate');
 
+            var isAxisTop = axis.position === 'top';
+
+            if (isAxisTop) {
+                labelRotate = -labelRotate;
+            }
+
             for (var i = 0; i < ticks.length; i++) {
                 var tick = ticks[i];
                 if (ifIgnoreOnTick(axis, i, labelInterval)) {
@@ -231,7 +237,8 @@ define(function (require) {
                         labelTextAlign = 'left';
                 }
                 if (axis.isHorizontal() && labelRotate) {
-                    labelTextAlign = labelRotate > 0 ? 'left' : 'right';
+                    labelTextAlign = (!isAxisTop && labelRotate < 0) || (isAxisTop && labelRotate > 0)
+                         ? 'left' : 'right';
                 }
 
                 var textEl = new graphic.Text({

src/component/axis/RadiusAxisView.js

@@ -111,6 +111,12 @@ define(function (require) {
             var p = [];
             var labelMargin = labelModel.get('margin');
             var labelsPositions = axis.getLabelsCoords();
+            var labelRotate = labelModel.get('rotate');
+
+            var labelTextAlign = 'center';
+            if (labelRotate) {
+                labelTextAlign = labelRotate > 0 ? 'left' : 'right'
+            }
 
             // FIXME Text align and text baseline when axis angle is 90 degree
             for (var i = 0; i < labelsPositions.length; i++) {
@@ -122,10 +128,12 @@ define(function (require) {
                         x: p[0],
                         y: p[1],
                         text: labels[i],
-                        textAlign: 'center',
+                        textAlign: labelTextAlign,
                         textBaseline: 'bottom',
                         font: textStyleModel.getFont()
                     },
+                    rotation: labelRotate * Math.PI / 180,
+                    origin: p.slice(),
                     silent: true
                 }));
             };
@@ -138,7 +146,6 @@ define(function (require) {
             var splitLineModel = radiusAxisModel.getModel('splitLine');
             var lineStyleModel = splitLineModel.getModel('lineStyle');
             var lineColors = lineStyleModel.get('color');
-            var lineWidth = lineStyleModel.get('width');
             var lineCount = 0;
 
             lineColors = lineColors instanceof Array ? lineColors : [lineColors];
@@ -162,12 +169,10 @@ define(function (require) {
             // Batching the lines if color are the same
             for (var i = 0; i < splitLines.length; i++) {
                 this.group.add(graphic.mergePath(splitLines[i], {
-                    style: {
+                    style: zrUtil.defaults({
                         stroke: lineColors[i % lineColors.length],
-                        lineType: lineStyleModel.getLineDash(),
-                        lineWidth: lineWidth,
                         fill: null
-                    },
+                    }, lineStyleModel.getLineStyle()),
                     silent: true
                 }));
             }

test/punchCard.html

@@ -9,6 +9,7 @@
             html, body, #main {
                 width: 100%;
                 height: 100%;
+                margin: 0;
             }
         </style>
         <div id="main"></div>
@@ -19,6 +20,7 @@
                 'echarts/chart/scatter',
                 'echarts/component/legend',
                 'echarts/component/grid',
+                'echarts/component/polar',
                 'echarts/component/tooltip'
             ], function (echarts) {
 
@@ -47,42 +49,51 @@
                     usedMap[key] = true;
 
                     data.push([
-                        x, y,
-                        Math.random()
+                        x, y, Math.random() + 0.1
                     ])
                 }
 
                 chart.setOption({
                     legend: {
-                        data: ['Chart coord']
+                        data: ['Punch Card']
                     },
-                    xAxis: {
+                    polar: {},
+                    angleAxis: {
                         type: 'category',
                         data: hours,
+                        boundaryGap: false,
                         splitLine: {
-                            show: false
+                            show: true,
+                            lineStyle: {
+                                color: '#ddd',
+                                type: 'dashed'
+                            }
                         },
                         axisLine: {
                             show: false
                         }
                     },
-                    yAxis: {
+                    radiusAxis: {
                         type: 'category',
                         data: days,
                         axisLine: {
                             show: false
+                        },
+                        axisLabel: {
+                            rotate: 45
                         }
                     },
                     series: [{
-                        name: 'Chart coord',
+                        name: 'Punch Card',
                         type: 'scatter',
+                        coordinateSystem: 'polar',
                         itemStyle: {
                             normal: {
                                 color: '#d14a61'
                             }
                         },
                         symbolSize: function (val) {
-                            return val[2] * 30;
+                            return val[2] * 20;
                         },
                         data: data
                     }]