fix(loading): showLoading aligin center

src/loading/default.ts

@@ -51,7 +51,7 @@ export default function defaultLoading(
     zrUtil.defaults(opts, {
         text: 'loading',
         textColor: '#000',
-        fontSize: '12px',
+        fontSize: 12,
         maskColor: 'rgba(255, 255, 255, 0.8)',
         showSpinner: true,
         color: '#5470c6',
@@ -68,7 +68,8 @@ export default function defaultLoading(
         z: 10000
     });
     group.add(mask);
-    const font = opts.fontSize + ' sans-serif';
+
+    const font = `${parseInt(opts.fontSize + '', 10)}px sans-serif`;
     const labelRect = new graphic.Rect({
         style: {
             fill: 'none'
@@ -127,8 +128,11 @@ export default function defaultLoading(
         // cx = (containerWidth - arcDiameter - textDistance - textWidth) / 2
         // textDistance needs to be calculated when both animation and text exist
         const cx = (api.getWidth() - r * 2 - (opts.showSpinner && textWidth ? 10 : 0) - textWidth) / 2
+            - (opts.showSpinner && textWidth ? 0 : 5 + textWidth / 2)
             // only show the text
-            - (opts.showSpinner ? 0 : textWidth / 2);
+            + (opts.showSpinner ? 0 : textWidth / 2)
+            // only show the spinner
+            + (textWidth ? 0 : r);
         const cy = api.getHeight() / 2;
         opts.showSpinner && arc.setShape({
             cx: cx,

test/loading.html

@@ -46,6 +46,8 @@ under the License.
         <div class="chart" id="main2"></div>
         <h1>fontSzie: 25px, arcRadius: 12, lineWidth: 8</h1>
         <div class="chart" id="main3"></div>
+        <h1>fontSzie: 25, arcRadius: 12, lineWidth: 8</h1>
+        <div class="chart" id="main4"></div>
         <script>
 
             require([
@@ -57,21 +59,36 @@ under the License.
 
                 var chart1 = echarts.init(document.getElementById('main1'));
                 chart1.showLoading({
-                    text: ''
+                    text: '',
+                    spinnerRadius: 50
                 });
 
                 var chart2 = echarts.init(document.getElementById('main2'));
                 chart2.showLoading({
-                    showAnimation: false
+                    text: '没有 spinner 时，文字需要居中显示',
+                    textColor: '#000',
+                    fontSize: 20,
+                    showSpinner: false
                 });
                 var chart3 = echarts.init(document.getElementById('main3'));
                 chart3.showLoading({
-                    text: '暂无数据',
+                    text: '暂时没有数据',
                     textColor: '#000',
                     fontSize: '25px',
                     maskColor: 'rgba(255, 255, 255, 0.8)',
                     color: '#c23531',
-                    arcRadius: 12,
+                    arcRadius: 20,
+                    lineWidth: 8,
+                    zlevel: 0
+                });
+                var chart4 = echarts.init(document.getElementById('main4'));
+                chart4.showLoading({
+                    text: '暂时没有数据',
+                    textColor: '#000',
+                    fontSize: 25,
+                    maskColor: 'rgba(255, 255, 255, 0.8)',
+                    color: '#c23531',
+                    arcRadius: 20,
                     lineWidth: 8,
                     zlevel: 0
                 });
@@ -80,6 +97,7 @@ under the License.
                     chart1.resize();
                     chart2.resize();
                     chart3.resize();
+                    chart4.resize();
                 };
             });
         </script>