feat(sunburst): enhance text handling

src/chart/sunburst/SunburstPiece.js

@@ -28,7 +28,7 @@ function SunburstPiece(node, seriesModel, ecModel) {
     });
     var text = new graphic.Text({
         z2: DEFAULT_TEXT_Z,
-        silent: true
+        silent: node.getModel('label.normal').get('silent')
     });
     this.add(sector);
     this.add(text);
@@ -156,6 +156,9 @@ SunburstPieceProto._updateLabel = function (seriesModel, ecModel, visualColor) {
         ),
         this.node.name
     );
+    if (!labelModel.get('show')) {
+        text = '';
+    }
 
     var label = this.childAt(1);
 
@@ -167,19 +170,50 @@ SunburstPieceProto._updateLabel = function (seriesModel, ecModel, visualColor) {
             useInsideStyle: true
         }
     );
-    label.attr('style', {
-        text: text,
-        textAlign: 'center',
-        textVerticalAlign: 'middle',
-        opacity: labelModel.get('opacity')
-    });
 
     var layout = this.node.getLayout();
     var midAngle = (layout.startAngle + layout.endAngle) / 2;
     var dx = Math.cos(midAngle);
     var dy = Math.sin(midAngle);
-    var textX = (layout.r + layout.r0) / 2 * dx + layout.cx;
-    var textY = (layout.r + layout.r0) / 2 * dy + layout.cy;
+
+    var r;
+    var labelPosition = labelModel.get('position');
+    var labelPadding = labelModel.get('padding') || 0;
+    var textAlign = labelModel.get('align');
+    if (labelPosition === 'outside') {
+        r = layout.r + labelPadding;
+        if (!textAlign) {
+            textAlign = midAngle > Math.PI / 2 ? 'right' : 'left';
+        }
+    }
+    else {
+        if (!textAlign) {
+            r = (layout.r + layout.r0) / 2;
+            textAlign = 'center';
+        }
+        else if (textAlign === 'left') {
+            r = layout.r0 + labelPadding;
+            if (midAngle > Math.PI / 2) {
+                textAlign = 'right';
+            }
+        }
+        else if (textAlign === 'right') {
+            r = layout.r - labelPadding;
+            if (midAngle > Math.PI / 2) {
+                textAlign = 'left';
+            }
+        }
+    }
+
+    label.attr('style', {
+        text: text,
+        textAlign: textAlign,
+        textVerticalAlign: labelModel.get('verticalAlign') || 'middle',
+        opacity: labelModel.get('opacity')
+    });
+
+    var textX = r * dx + layout.cx;
+    var textY = r * dy + layout.cy;
     label.attr('position', [textX, textY]);
 
     var rotateType = labelModel.getShallow('rotate');
@@ -192,6 +226,12 @@ SunburstPieceProto._updateLabel = function (seriesModel, ecModel, visualColor) {
     }
     else if (rotateType === 'tangential') {
         rotate = Math.PI / 2 - midAngle;
+        if (rotate > Math.PI / 2) {
+            rotate -= Math.PI;
+        }
+        else if (rotate < -Math.PI / 2) {
+            rotate += Math.PI;
+        }
     }
     label.attr('rotation', rotate);
 };

src/chart/sunburst/SunburstSeries.js

@@ -78,7 +78,12 @@ export default SeriesModel.extend({
                 // could be: 'radial', 'tangential', or 'none'
                 rotate: 'radial',
                 show: true,
-                position: 'inner'
+                // could be 'inner', 'outside', 'left' or 'right'
+                // 'left' is for inner side of inside, and 'right' is for outter
+                // side for inside
+                position: 'inner',
+                padding: 5,
+                silent: true
             },
             emphasis: {}
         },
@@ -98,12 +103,17 @@ export default SeriesModel.extend({
 
         // Animation type canbe expansion, scale
         animationType: 'expansion',
-
-        animationEasing: 'quadraticInOut',
+        animationDuration: 1000,
+        animationUpdateDuration: 300,
+        animationEasing: 'sinusoidalInOut',
 
         data: [],
 
-        levels: []
+        levels: [],
+
+        // null for not sorting,
+        // 'desc' and 'asc' for descend and ascendant order
+        sortOrder: 'desc'
     },
 
     getViewRoot: function () {

src/chart/sunburst/sunburstLayout.js

@@ -32,7 +32,10 @@ export default function (seriesType, ecModel, api, payload) {
 
         var treeRoot = data.tree.root;
 
-        initChildren(treeRoot, true);
+        var sortOrder = seriesModel.get('sortOrder');
+        if (sortOrder != null) {
+            initChildren(treeRoot, sortOrder === 'asc');
+        }
 
         var validDataCount = 0;
         zrUtil.each(treeRoot.children, function (child) {
@@ -83,6 +86,15 @@ export default function (seriesType, ecModel, api, payload) {
 
                 endAngle = startAngle + dir * angle;
 
+                var rStart = r0 + rPerLevel * (root.depth - 1);
+                var rEnd = r0 + rPerLevel * root.depth;
+
+                var itemModel = root.getModel();
+                if (itemModel.get('r0') != null) {
+                    rStart = parsePercent(itemModel.get('r0'), size / 2);
+                    rEnd = parsePercent(itemModel.get('r'), size / 2);
+                }
+
                 root.setLayout({
                     angle: angle,
                     startAngle: startAngle,
@@ -90,8 +102,8 @@ export default function (seriesType, ecModel, api, payload) {
                     clockwise: clockwise,
                     cx: cx,
                     cy: cy,
-                    r0: r0 + rPerLevel * (root.depth - 1),
-                    r: r0 + rPerLevel * root.depth
+                    r0: rStart,
+                    r: rEnd
                 });
             }
 
@@ -108,38 +120,6 @@ export default function (seriesType, ecModel, api, payload) {
         };
 
         renderNode(treeRoot, startAngle);
-
-        // // Some sector is constrained by minAngle
-        // // Rest sectors needs recalculate angle
-        // if (restAngle < PI2 && validDataCount) {
-        //     // Average the angle if rest angle is not enough after all angles is
-        //     // Constrained by minAngle
-        //     if (restAngle <= 1e-3) {
-        //         var angle = PI2 / validDataCount;
-        //         data.each('value', function (value, idx) {
-        //             if (!isNaN(value)) {
-        //                 var layout = data.getItemLayout(idx);
-        //                 layout.angle = angle;
-        //                 layout.startAngle = startAngle + dir * idx * angle;
-        //                 layout.endAngle = startAngle + dir * (idx + 1) * angle;
-        //             }
-        //         });
-        //     }
-        //     else {
-        //         unitRadian = restAngle / valueSumLargerThanMinAngle;
-        //         currentAngle = startAngle;
-        //         data.each('value', function (value, idx) {
-        //             if (!isNaN(value)) {
-        //                 var layout = data.getItemLayout(idx);
-        //                 var angle = layout.angle === minAngle
-        //                     ? minAngle : value * unitRadian;
-        //                 layout.startAngle = currentAngle;
-        //                 layout.endAngle = currentAngle + dir * angle;
-        //                 currentAngle += dir * angle;
-        //             }
-        //         });
-        //     }
-        // }
     });
 }
 
@@ -152,7 +132,7 @@ export default function (seriesType, ecModel, api, payload) {
 function initChildren(node, isAsc) {
     var children = node.children || [];
 
-    node.children = sort(children);
+    node.children = sort(children, isAsc);
 
     // Init children recursively
     if (children.length) {
@@ -170,7 +150,7 @@ function initChildren(node, isAsc) {
  */
 function sort(children, isAsc) {
     return children.sort(function (a, b) {
-        var diff = (a.getValue() - b.getValue()) * (isAsc ? 1 : -1);
+        var diff = (a.getValue() - b.getValue()) * (isAsc ? -1 : 1);
         return diff === 0
             ? (a.dataIndex - b.dataIndex) * (isAsc ? 1 : -1)
             : diff;