Pie label rotate

src/chart/pie/PieSeries.js

@@ -107,6 +107,8 @@ define(function(require) {
 
             label: {
                 normal: {
+                    // If rotate around circle
+                    rotate: false,
                     show: true,
                     // 'outer', 'inside', 'center'
                     position: 'outer'

src/chart/pie/PieView.js

@@ -50,18 +50,20 @@ define(function (require) {
         var labelLine = new graphic.Polyline({
             shape: {
                 points: labelLayout.linePoints
-            }
+            },
+            silent: true
         });
 
         var labelText = new graphic.Text({
             style: {
-                x: labelLayout.x,
-                y: labelLayout.y,
                 text: text,
                 textAlign: labelLayout.textAlign,
                 textBaseline: labelLayout.textBaseline,
                 font: labelLayout.font
-            }
+            },
+            rotation: labelLayout.rotation,
+            position: [labelLayout.x, labelLayout.y],
+            silent: true
         });
 
         sector.__labelLine = labelLine;
@@ -138,17 +140,19 @@ define(function (require) {
                         ? sector.on('click', onSectorClick)
                         : sector.off('click');
 
-                    labelLine.animateTo({
-                        shape: {
-                            points: labelLayout.linePoints
-                        }
-                    }, 300, 'cubicOut');
-                    labelText.animateTo({
-                        style: {
-                            x: labelLayout.x,
-                            y: labelLayout.y
-                        }
-                    }, 300, 'cubicOut');
+                    if (labelLine) {
+                        labelLine.animateTo({
+                            shape: {
+                                points: labelLayout.linePoints
+                            }
+                        }, 300, 'cubicOut');
+                    }
+                    if (labelText) {
+                        labelText.animateTo({
+                            position: [labelLayout.x, labelLayout.y],
+                            rotation: labelLayout.rotation
+                        }, 300, 'cubicOut');
+                    }
 
                     labelText.setStyle({
                         textAlign: labelLayout.textAlign,

src/chart/pie/labelLayout.js

@@ -4,21 +4,84 @@ define(function (require) {
     'use strict';
 
     var textContain = require('zrender/contain/text');
+    // var BoundingRect = require('zrender/core/BoundingRect');
+    // var vec2 = require('zrender/core/vector');
+    // var v2Set = vec2.set;
 
-    return function (seriesModel) {
+    // var scaleAndAdd = vec2.scaleAndAdd;
+
+    // function forceLabelLayout(labels, cx, cy, r, viewWidth, viewHeight) {
+
+    //     var step = 0;
+
+    //     var len = labels.length;
+
+    //     var v = [];
+
+    //     var center = [cx, cy];
+
+    //     r += 100;
+
+    //     do {
+    //         var energy = 0;
+    //         for (var i = 0; i < len; i++) {
+    //             var label = labels[i];
+    //             v2Set(label.f, 0, 0);
+    //             for (var j = 0; j < len; j++) {
+    //                 if (i === j) {
+    //                     continue;
+    //                 }
+    //                 vec2.sub(v, label.p, labels[j].p);
+    //                 var dist = Math.max(vec2.len(v), 1);
+    //                 var factor = label.rect.intersect(labels[j].rect)
+    //                     ? 10 : 1;
+    //                 scaleAndAdd(label.f, label.f, v, factor * 1000 / (dist * dist));
+    //             }
+    //             // Move to center
+    //             vec2.sub(v, center, label.p);
+    //             var distToCenter = vec2.len(v);
+    //             var dist = Math.abs(distToCenter - label.r);
+    //             vec2.normalize(v, v);
+    //             if (distToCenter < r) {
+    //                 vec2.negate(v, v);
+    //             }
+    //             scaleAndAdd(label.f, label.f, v, dist * dist);
+
+    //             // collision with bounding box
+
+    //             var fScalar = vec2.len(label.f);
+    //             energy += fScalar;
+
+    //             scaleAndAdd(label.p, label.p, label.f, 1 / fScalar);
+
+    //             var labelRect = label.rect;
+    //             labelRect.x = label.p[0];
+    //             labelRect.y = label.p[1]
+    //         }
+
+    //         if (energy < 100) {
+    //             break;
+    //         }
+
+    //         step++;
+    //     } while (step < 200);
+    // }
+
+    return function (seriesModel, viewWidth, viewHeight) {
         var data = seriesModel.getData();
         var labelLineModel = seriesModel.getModel('labelLine');
 
         var labelLineLen = labelLineModel.get('length');
         var labelLineLen2 = labelLineModel.get('length2');
 
-        var avoidLabelOverlap = seriesModel.get('avoidLabelOverlap');
+        // var avoidLabelOverlap = seriesModel.get('avoidLabelOverlap');
+
+        var labelNodes = [];
 
         data.each(function (idx) {
             var layout = data.getItemLayout(idx);
             var itemModel = data.getItemModel(idx);
             var labelModel = itemModel.getModel('label.normal');
-            var font = labelModel.getModel('textStyle').getFont();
             var labelPosition = labelModel.get('position');
 
             var midAngle = (layout.startAngle + layout.endAngle) / 2;
@@ -31,6 +94,7 @@ define(function (require) {
             var textY;
             var linePoints;
             var textAlign;
+
             if (labelPosition === 'center') {
                 textX = layout.cx;
                 textY = layout.cy;
@@ -59,6 +123,10 @@ define(function (require) {
             }
 
             var textBaseline = 'middle';
+            var font = labelModel.getModel('textStyle').getFont();
+
+            var labelRotate = labelModel.get('rotate')
+                ? (dx < 0 ? -midAngle + Math.PI : -midAngle) : 0;
 
             layout.label = {
                 x: textX,
@@ -66,8 +134,46 @@ define(function (require) {
                 linePoints: linePoints,
                 textAlign: textAlign,
                 textBaseline: textBaseline,
-                font: font
+                font: font,
+                rotation: labelRotate
             };
+
+            // if (avoidLabelOverlap) {
+            //     var text = seriesModel.getFormattedLabel(idx, 'normal')
+            //                 || data.getName(idx);
+            //     var rect = textContain.getBoundingRect(text, font, textAlign, textBaseline);
+            //     var p = [textX + rect.x, textY + rect.y];
+            //     labelNodes.push({
+            //         p: p,
+            //         rect: new BoundingRect(textX + rect.x, textY + rect.y, rect.width, rect.height),
+            //         f: [0, 0],
+            //         r: vec2.dist(p, center)
+            //     });
+            // }
         });
+
+        // if (avoidLabelOverlap) {
+        //     var cx;
+        //     var cy;
+
+        //     forceLabelLayout(
+        //         labelNodes, cx, cy, r, viewWidth, viewHeight
+        //     );
+
+        //     data.each(function (idx) {
+        //         var labelLayout = data.getItemLayout(idx).label;
+        //         var forcedLayout = labelNodes[idx];
+        //         var x = forcedLayout.p[0];
+        //         var y = forcedLayout.p[1]
+        //         var linePoints = labelLayout.linePoints;
+
+        //         labelLayout.x = x;
+        //         labelLayout.y = y;
+
+                // if (linePoints) {
+                //     linePoints[2] = x -
+                // }
+        //     });
+        // }
     }
 });
\ No newline at end of file

src/chart/pie/pieLayout.js

@@ -47,7 +47,7 @@ define(function (require) {
                 startAngle = endAngle;
             }, true);
 
-            labelLayout(seriesModel);
+            labelLayout(seriesModel, width, height);
         });
     }
 });
\ No newline at end of file