Fix #9657 (label is not always at center when pie label position 'cen…

…ter')
apache · Dec 29, 2018 · 73af4bf · 73af4bf
1 parent e7a9e50
commit 73af4bf
Show file tree

Hide file tree

Showing 3 changed files with 168 additions and 17 deletions.
diff --git a/src/chart/pie/labelLayout.js b/src/chart/pie/labelLayout.js
@@ -26,7 +26,6 @@ function adjustSingleSide(list, cx, cy, r, dir, viewWidth, viewHeight) {
         return a.y - b.y;
     });
 
-    // 压
     function shiftDown(start, end, delta, dir) {
         for (var j = start; j < end; j++) {
             list[j].y += delta;
@@ -42,7 +41,6 @@ function adjustSingleSide(list, cx, cy, r, dir, viewWidth, viewHeight) {
         shiftUp(end - 1, delta / 2);
     }
 
-    // 弹
     function shiftUp(end, delta) {
         for (var j = end; j >= 0; j--) {
             list[j].y -= delta;
@@ -56,18 +54,14 @@ function adjustSingleSide(list, cx, cy, r, dir, viewWidth, viewHeight) {
 
     function changeX(list, isDownList, cx, cy, r, dir) {
         var lastDeltaX = dir > 0
-            ? isDownList                // 右侧
-                ? Number.MAX_VALUE      // 下
-                : 0                     // 上
-            : isDownList                // 左侧
-                ? Number.MAX_VALUE      // 下
-                : 0;                    // 上
+            ? isDownList                // right-side
+                ? Number.MAX_VALUE      // down
+                : 0                     // up
+            : isDownList                // left-side
+                ? Number.MAX_VALUE      // down
+                : 0;                    // up
 
         for (var i = 0, l = list.length; i < l; i++) {
-            // Not change x for center label
-            if (list[i].position === 'center') {
-                continue;
-            }
             var deltaY = Math.abs(list[i].y - cy);
             var length = list[i].len;
             var length2 = list[i].len2;
@@ -78,11 +72,11 @@ function adjustSingleSide(list, cx, cy, r, dir, viewWidth, viewHeight) {
                     )
                 : Math.abs(list[i].x - cx);
             if (isDownList && deltaX >= lastDeltaX) {
-                // 右下，左下
+                // right-down, left-down
                 deltaX = lastDeltaX - 10;
             }
             if (!isDownList && deltaX <= lastDeltaX) {
-                // 右上，左上
+                // right-up, left-up
                 deltaX = lastDeltaX + 10;
             }
 
@@ -122,6 +116,9 @@ function avoidOverlap(labelLayoutList, cx, cy, r, viewWidth, viewHeight) {
     var leftList = [];
     var rightList = [];
     for (var i = 0; i < labelLayoutList.length; i++) {
+        if (isPositionCenter(labelLayoutList[i])) {
+            continue;
+        }
         if (labelLayoutList[i].x < cx) {
             leftList.push(labelLayoutList[i]);
         }
@@ -134,6 +131,9 @@ function avoidOverlap(labelLayoutList, cx, cy, r, viewWidth, viewHeight) {
     adjustSingleSide(leftList, cx, cy, r, -1, viewWidth, viewHeight);
 
     for (var i = 0; i < labelLayoutList.length; i++) {
+        if (isPositionCenter(labelLayoutList[i])) {
+            continue;
+        }
         var linePoints = labelLayoutList[i].linePoints;
         if (linePoints) {
             var dist = linePoints[1][0] - linePoints[2][0];
@@ -149,6 +149,11 @@ function avoidOverlap(labelLayoutList, cx, cy, r, viewWidth, viewHeight) {
     }
 }
 
+function isPositionCenter(layout) {
+    // Not change x for center label
+    return layout.position === 'center';
+}
+
 export default function (seriesModel, r, viewWidth, viewHeight) {
     var data = seriesModel.getData();
     var labelLayoutList = [];

diff --git a/test/pie-label.html b/test/pie-label.html
@@ -0,0 +1,148 @@
+<!DOCTYPE html>
+<!--
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+   http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+-->
+
+
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <script src="lib/esl.js"></script>
+        <script src="lib/config.js"></script>
+        <script src="lib/jquery.min.js"></script>
+        <script src="lib/facePrint.js"></script>
+        <script src="lib/testHelper.js"></script>
+        <link rel="stylesheet" href="lib/reset.css" />
+    </head>
+    <body>
+        <style>
+            .test-title {
+                background: #146402;
+                color: #fff;
+            }
+        </style>
+
+
+        <div id="main0"></div>
+        <div id="main1"></div>
+
+
+        <script>
+
+            require([
+                'echarts'/*, 'map/js/china' */
+            ], function (echarts) {
+
+                var value2 = 400;
+                var total = 1000;
+
+                function getData() {
+                    return [{
+                        name: '',
+                        value: total - value2,
+                        itemStyle: { color: 'rgb(8,90,150)' },
+                        label: { show: false }
+                    }, {
+                        name: '50%',
+                        value: value2,
+                        itemStyle: { color: 'rgb(23,235,255)'},
+                        label: { position: 'center', color: '#999', fontSize: '100' }
+                    }]
+                }
+
+                var option = {
+                    animation: false,
+                    series: [{
+                        type: 'pie',
+                        radius: ['60%','80%'],
+                        labelLine: { show: false },
+                        hoverAnimation: false,
+                        data: getData()
+                    }]
+                };
+
+                var chart = testHelper.create(echarts, 'main0', {
+                    title: 'Label should be always at center of the pie',
+                    option: option,
+                    info: {
+                        data: [{
+                            label: {position: 'center'}
+                        }]
+                    }
+                });
+
+                setInterval(function () {
+                    value2 += 3;
+                    if (value2 > total) {
+                        value2 = 0;
+                    }
+                    chart.setOption({
+                        series: [{
+                            data: getData()
+                        }]
+                    });
+                }, 20);
+            });
+
+        </script>
+
+
+
+        <script>
+
+            require([
+                'echarts'/*, 'map/js/china' */
+            ], function (echarts) {
+
+                var count = 60;
+                var data = [];
+                for (var i = 0; i < count; i++) {
+                    var label = i === 30
+                        ? {
+                            position: 'center',
+                            fontSize: 30,
+                            color: '#fff'
+                        }
+                        : null;
+                    data.push({
+                        name: i + 'A',
+                        value: Math.random(),
+                        label: label
+                    });
+                }
+
+                var option = {
+                    series: [{
+                        type: 'pie',
+                        radius: '50%',
+                        data: data
+                    }]
+                };
+
+                var chart = testHelper.create(echarts, 'main1', {
+                    title: 'Too many',
+                    option: option
+                });
+            });
+
+        </script>
+
+
+    </body>
+</html>
diff --git a/test/tmp-base.html b/test/tmp-base.html
@@ -44,8 +44,6 @@
 
         <script>
 
-            var chart;
-            var myChart;
             var option;
 
             require([
@@ -55,7 +53,7 @@
                 // $.getJSON('./data/nutrients.json', function (data) {
                 // });
 
-                chart = myChart = testHelper.create(echarts, 'main0', {
+                var chart = testHelper.create(echarts, 'main0', {
                     option: option
                 });
             });