diff --git a/src/loading/default.ts b/src/loading/default.ts
index c267e171f8..7bb8fd7994 100644
--- a/src/loading/default.ts
+++ b/src/loading/default.ts
@@ -21,7 +21,6 @@ import * as zrUtil from 'zrender/src/core/util';
 import * as graphic from '../util/graphic';
 import { LoadingEffect } from '../util/types';
 import ExtensionAPI from '../core/ExtensionAPI';
-import * as textContain from 'zrender/src/contain/text';
 
 const PI = Math.PI;
 
@@ -45,13 +44,19 @@ export default function defaultLoading(
         spinnerRadius?: number;
         lineWidth?: number;
         fontSize?: number;
+        fontWeight?: 'normal' | 'bold' | 'bolder' | 'lighter' | number;
+        fontStyle?: 'normal' | 'italic' | 'oblique';
+        fontFamily?: string
     }
 ): LoadingEffect {
     opts = opts || {};
     zrUtil.defaults(opts, {
         text: 'loading',
         textColor: '#000',
-        fontSize: '12px',
+        fontSize: 12,
+        fontWeight: 'normal',
+        fontStyle: 'normal',
+        fontFamily: 'sans-serif',
         maskColor: 'rgba(255, 255, 255, 0.8)',
         showSpinner: true,
         color: '#5470c6',
@@ -68,18 +73,23 @@ export default function defaultLoading(
         z: 10000
     });
     group.add(mask);
-    const font = opts.fontSize + ' sans-serif';
+
+    const textContent = new graphic.Text({
+        style: {
+            text: opts.text,
+            fill: opts.textColor,
+            fontSize: opts.fontSize,
+            fontWeight: opts.fontWeight,
+            fontStyle: opts.fontStyle,
+            fontFamily: opts.fontFamily
+        }
+    });
+
     const labelRect = new graphic.Rect({
         style: {
             fill: 'none'
         },
-        textContent: new graphic.Text({
-            style: {
-                text: opts.text,
-                fill: opts.textColor,
-                font: font
-            }
-        }),
+        textContent: textContent,
         textConfig: {
             position: 'right',
             distance: 10
@@ -122,13 +132,16 @@ export default function defaultLoading(
 
     // Inject resize
     group.resize = function () {
-        const textWidth = textContain.getWidth(opts.text, font);
+        const textWidth = textContent.getBoundingRect().width;
         const r = opts.showSpinner ? opts.spinnerRadius : 0;
         // 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,
diff --git a/test/loading.html b/test/loading.html
index 8d029b5e56..f7b1358038 100644
--- a/test/loading.html
+++ b/test/loading.html
@@ -46,6 +46,10 @@ <h1>only show the text </h1>
         <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>
+        <h1>fontSzie: 25, fontWeight: 'bolder', fontFamily: 'Microsoft YaHei', fontStyle: 'italic'</h1>
+        <div class="chart" id="main5"></div>
         <script>
 
             require([
@@ -57,21 +61,53 @@ <h1>fontSzie: 25px, arcRadius: 12, lineWidth: 8</h1>
 
                 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
+                });
+
+                var chart5 = echarts.init(document.getElementById('main5'));
+                chart5.showLoading({
+                    text: '暂时没有数据',
+                    textColor: '#000',
+                    fontSize: 25,
+                    fontWeight: 'bolder', 
+                    fontFamily: 'Microsoft YaHei', 
+                    fontStyle: 'italic',
+                    maskColor: 'rgba(255, 255, 255, 0.8)',
+                    color: '#c23531',
+                    arcRadius: 20,
                     lineWidth: 8,
                     zlevel: 0
                 });
@@ -80,6 +116,7 @@ <h1>fontSzie: 25px, arcRadius: 12, lineWidth: 8</h1>
                     chart1.resize();
                     chart2.resize();
                     chart3.resize();
+                    chart4.resize();
                 };
             });
         </script>