(1) rename `labelDisplayThreshold` to `minShowLabelAngle` (name follow the...

(1) rename `labelDisplayThreshold` to `minShowLabelAngle` (name follow the style of `minAngle` `startAngle`)
(2) move the logic to the "layout" phase, which is able to skip the process that avoid label overlap if do not display.
See more info in #8997

src/chart/pie/PieSeries.js

@@ -118,6 +118,11 @@ var PieSeries = echarts.extendSeriesModel({
         startAngle: 90,
         // 最小角度改为0
         minAngle: 0,
+
+        // If the angle of a sector less than `minShowLabelAngle`,
+        // the label will not be displayed.
+        minShowLabelAngle: 0,
+
         // 选中时扇区偏移量
         selectedOffset: 10,
         // 高亮扇区偏移量

src/chart/pie/PieView.js

@@ -94,9 +94,6 @@ function PiePiece(data, idx) {
     this.add(sector);
     this.add(polyline);
     this.add(text);
-    
-    var valueDim = data.mapDimension('value');
-    this._sum = data.getSum(valueDim) || 0;
 
     this.updateData(data, idx, true);
 }
@@ -204,13 +201,6 @@ piePieceProto.updateData = function (data, idx, firstCreate) {
     graphic.setHoverStyle(this);
 };
 
-piePieceProto._getLabelDisplayThresholdState = function (data, idx) {
-    var seriesModel = data.hostModel;
-    var valueDim = data.mapDimension('value');
-    var labelDisplayThreshold = seriesModel.get('labelDisplayThreshold');
-    return this._sum * labelDisplayThreshold > data.get(valueDim, idx);
-}
-
 piePieceProto._updateLabel = function (data, idx) {
 
     var labelLine = this.childAt(1);
@@ -221,7 +211,12 @@ piePieceProto._updateLabel = function (data, idx) {
     var layout = data.getItemLayout(idx);
     var labelLayout = layout.label;
     var visualColor = data.getItemVisual(idx, 'color');
-    var filterLabelIgnore = this._getLabelDisplayThresholdState(data, idx);
+
+    if (!labelLayout) {
+        labelText.ignore = labelText.normalIgnore = labelText.hoverIgnore =
+        labelLine.ignore = labelLine.normalIgnore = labelLine.hoverIgnore = true;
+        return;
+    }
 
     graphic.updateProps(labelLine, {
         shape: {
@@ -265,11 +260,11 @@ piePieceProto._updateLabel = function (data, idx) {
         }
     );
 
-    labelText.ignore = labelText.normalIgnore = !labelModel.get('show') || filterLabelIgnore;
-    labelText.hoverIgnore = !labelHoverModel.get('show') || filterLabelIgnore;
+    labelText.ignore = labelText.normalIgnore = !labelModel.get('show');
+    labelText.hoverIgnore = !labelHoverModel.get('show');
 
-    labelLine.ignore = labelLine.normalIgnore = !labelLineModel.get('show') || filterLabelIgnore;
-    labelLine.hoverIgnore = !labelLineHoverModel.get('show') || filterLabelIgnore;
+    labelLine.ignore = labelLine.normalIgnore = !labelLineModel.get('show');
+    labelLine.hoverIgnore = !labelLineHoverModel.get('show');
 
     // Default use item visual color
     labelLine.setStyle({

src/chart/pie/labelLayout.js

@@ -21,6 +21,8 @@
 
 import * as textContain from 'zrender/src/contain/text';
 
+var RADIAN = Math.PI / 180;
+
 function adjustSingleSide(list, cx, cy, r, dir, viewWidth, viewHeight) {
     list.sort(function (a, b) {
         return a.y - b.y;
@@ -154,12 +156,13 @@ function isPositionCenter(layout) {
     return layout.position === 'center';
 }
 
-export default function (seriesModel, r, viewWidth, viewHeight) {
+export default function (seriesModel, r, viewWidth, viewHeight, sum) {
     var data = seriesModel.getData();
     var labelLayoutList = [];
     var cx;
     var cy;
     var hasLabelRotate = false;
+    var minShowLabelRadian = (seriesModel.get('minShowLabelAngle') || 0) * RADIAN;
 
     data.each(function (idx) {
         var layout = data.getItemLayout(idx);
@@ -173,6 +176,10 @@ export default function (seriesModel, r, viewWidth, viewHeight) {
         var labelLineLen = labelLineModel.get('length');
         var labelLineLen2 = labelLineModel.get('length2');
 
+        if (layout.angle < minShowLabelRadian) {
+            return;
+        }
+
         var midAngle = (layout.startAngle + layout.endAngle) / 2;
         var dx = Math.cos(midAngle);
         var dy = Math.sin(midAngle);

test/pie-label.html

@@ -41,6 +41,7 @@ under the License.
 
         <div id="main0"></div>
         <div id="main1"></div>
+        <div id="main2"></div>
 
 
         <script>
@@ -144,5 +145,87 @@ under the License.
         </script>
 
 
+
+
+        <script>
+
+            require([
+                'echarts'/*, 'map/js/china' */
+            ], function (echarts) {
+
+                var count = 60;
+
+                function makeData(sign) {
+                    var data = [];
+                    for (var i = 0; i < count; i++) {
+                        var value = Math.random() * 50 * sign;
+                        value = +value.toFixed(2);
+
+                        if (i >= 2
+                            && i <= count - 2
+                            && i % 10 !== 0
+                            // Test the case that the bottom label is normal to display.
+                            && Math.abs(i - Math.round(count / 2)) > 2
+                        ) {
+                            value = sign > 0
+                                ? value - Math.floor(value)
+                                : value - Math.ceil(value);
+                            value = +value.toFixed(2);
+                        }
+
+                        data.push({
+                            name: value,
+                            value: value
+                        });
+                    }
+                    return data;
+                }
+
+                var pos = ['25%', '75%'];
+
+                var option = {
+                    title: [{
+                        text: 'Positive value\nminShowLabelAngle: 10',
+                        textAlign: 'center',
+                        left: pos[0]
+                    }, {
+                        text: 'Negative value\nminShowLabelAngle: 2',
+                        textAlign: 'center',
+                        left: pos[1]
+                    }],
+                    series: [{
+                        type: 'pie',
+                        center: [pos[0], '50%'],
+                        minShowLabelAngle: 10,
+                        label: {show: true},
+                        radius: '30%',
+                        data: makeData(1)
+                    }, {
+                        type: 'pie',
+                        center: [pos[1], '50%'],
+                        minShowLabelAngle: 2,
+                        label: {show: true},
+                        radius: '30%',
+                        data: makeData(-1)
+                    }]
+                };
+
+                var chart = testHelper.create(echarts, 'main2', {
+                    title: [
+                        'minShowLabelAngle: label of small sector should **not be displayed**.',
+                        'other label should **be displayed** in appropriate place.'
+                    ],
+                    option: option
+                });
+            });
+
+        </script>
+
+
+
+
+
+
+
     </body>
 </html>
\ No newline at end of file