showLoading align center #11790

apache · Apr 10, 2020 · ecb4de9 · ecb4de9
1 parent 7887f27
commit ecb4de9
Show file tree

Hide file tree

Showing 4 changed files with 92 additions and 45 deletions.
diff --git a/src/loading/default.js b/src/loading/default.js
@@ -19,6 +19,7 @@
 
 import * as zrUtil from 'zrender/src/core/util';
 import * as graphic from '../util/graphic';
+import * as textContain from 'zrender/src/contain/text';
 
 var PI = Math.PI;
 
@@ -34,69 +35,80 @@ export default function (api, opts) {
     opts = opts || {};
     zrUtil.defaults(opts, {
         text: 'loading',
-        color: '#c23531',
         textColor: '#000',
+        fontSize: '12px',
         maskColor: 'rgba(255, 255, 255, 0.8)',
+        showAnimation: true,
+        color: '#c23531',
+        arcRadius: 10,
+        lineWidth: 5,
         zlevel: 0
     });
+    var group = new graphic.Group();
     var mask = new graphic.Rect({
         style: {
             fill: opts.maskColor
         },
         zlevel: opts.zlevel,
         z: 10000
     });
-    var arc = new graphic.Arc({
-        shape: {
-            startAngle: -PI / 2,
-            endAngle: -PI / 2 + 0.1,
-            r: 10
-        },
-        style: {
-            stroke: opts.color,
-            lineCap: 'round',
-            lineWidth: 5
-        },
-        zlevel: opts.zlevel,
-        z: 10001
-    });
+    group.add(mask);
+    var font = opts.fontSize + ' sans-serif';
     var labelRect = new graphic.Rect({
         style: {
             fill: 'none',
             text: opts.text,
+            font: font,
             textPosition: 'right',
             textDistance: 10,
             textFill: opts.textColor
         },
         zlevel: opts.zlevel,
         z: 10001
     });
-
-    arc.animateShape(true)
-        .when(1000, {
-            endAngle: PI * 3 / 2
-        })
-        .start('circularInOut');
-    arc.animateShape(true)
-        .when(1000, {
-            startAngle: PI * 3 / 2
-        })
-        .delay(300)
-        .start('circularInOut');
-
-    var group = new graphic.Group();
-    group.add(arc);
     group.add(labelRect);
-    group.add(mask);
+    if (opts.showAnimation) {
+        var arc = new graphic.Arc({
+            shape: {
+                startAngle: -PI / 2,
+                endAngle: -PI / 2 + 0.1,
+                r: opts.arcRadius
+            },
+            style: {
+                stroke: opts.color,
+                lineCap: 'round',
+                lineWidth: opts.lineWidth
+            },
+            zlevel: opts.zlevel,
+            z: 10001
+        });
+        arc.animateShape(true)
+            .when(1000, {
+                endAngle: PI * 3 / 2
+            })
+            .start('circularInOut');
+        arc.animateShape(true)
+            .when(1000, {
+                startAngle: PI * 3 / 2
+            })
+            .delay(300)
+            .start('circularInOut');
+        group.add(arc);
+    }
     // Inject resize
     group.resize = function () {
-        var cx = api.getWidth() / 2;
+        var textWidth = textContain.getWidth(opts.text, font);
+        var r = opts.showAnimation ? arc.shape.r : 0;
+        // cx = (containerWidth - (arcDiameter + labelRectWidth) - textDistance - textWidth) / 2
+        // textDistance needs to be calculated when both animation and text exist
+        var cx = (api.getWidth() - r * 4 - (opts.showAnimation && textWidth ? 10 : 0) - textWidth) / 2
+               // only show the text
+               - (opts.showAnimation ? 0 : textWidth / 2);
         var cy = api.getHeight() / 2;
-        arc.setShape({
+        opts.showAnimation && arc.setShape({
             cx: cx,
             cy: cy
         });
-        var r = arc.shape.r;
         labelRect.setShape({
             x: cx - r,
             y: cy - r,

diff --git a/test/loading.html b/test/loading.html
@@ -27,27 +27,60 @@
     </head>
     <body>
         <style>
-            html, body, #main {
-                width: 100%;
-                height: 100%;
-                margin: 0;
+            .chart {
+                height: 200px;
             }
-            #main {
-                background: #fff;
+            h1 {
+                font-size: 20px;
+                text-align: center;
+                background: #bbb;
+                padding: 10px 0;
             }
         </style>
-        <div id="main"></div>
+
+        <h1>use the default values </h1>
+        <div class="chart" id="main0"></div>
+        <h1>only show the animation </h1>
+        <div class="chart" id="main1"></div>
+        <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>
         <script>
 
             require([
                 'echarts'
             ], function (echarts) {
 
-                var chart = echarts.init(document.getElementById('main'));
-                chart.showLoading({
-                    text: '暂无数据'
+                var chart0 = echarts.init(document.getElementById('main0'));
+                chart0.showLoading();
+
+                var chart1 = echarts.init(document.getElementById('main1'));
+                chart1.showLoading({
+                    text: ''
+                });
+
+                var chart2 = echarts.init(document.getElementById('main2'));
+                chart2.showLoading({
+                    showAnimation: false
+                });
+                var chart3 = echarts.init(document.getElementById('main3'));
+                chart3.showLoading({
+                    text: '暂无数据',
+                    textColor: '#000',
+                    fontSize: '25px',
+                    maskColor: 'rgba(255, 255, 255, 0.8)',
+                    color: '#c23531',
+                    arcRadius: 12,
+                    lineWidth: 8,
+                    zlevel: 0
                 });
-                window.onresize = chart.resize;
+                window.onresize = function () {
+                    chart0.resize();
+                    chart1.resize();
+                    chart2.resize();
+                    chart3.resize();
+                };
             });
         </script>
     </body>

diff --git a/test/runTest/actions/__meta__.json b/test/runTest/actions/__meta__.json
@@ -92,6 +92,7 @@
   "legend-visualMapColor": 2,
   "line": 1,
   "line-animation": 1,
+  "loading": 2,
   "map": 3,
   "map-contour": 2,
   "map-default": 1,

diff --git a/test/runTest/actions/loading.json b/test/runTest/actions/loading.json
@@ -0,0 +1 @@
+[{"name":"Action 1","ops":[],"scrollY":0,"scrollX":0,"timestamp":1586513969778},{"name":"Action 2","ops":[],"scrollY":502,"scrollX":0,"timestamp":1586514012325}]
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		[{"name":"Action 1","ops":[],"scrollY":0,"scrollX":0,"timestamp":1586513969778},{"name":"Action 2","ops":[],"scrollY":502,"scrollX":0,"timestamp":1586514012325}]