Merge pull request #12414 from apache/fix-11790

showLoading align center

Merge pull request #12414 from apache/fix-11790
showLoading align center
8925f405 · Yi Shen · GitHub · f6744f13 · d26cd1ae · 8925f405
隐藏空白更改
内联并排

Showing with 90 addition and 45 deletion

src/loading/default.js src/loading/default.js +46 -34

test/loading.html test/loading.html +44 -11

未找到文件。
--- 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,11 +35,16 @@ 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)',
+        showSpinner: true,
+        color: '#c23531',
+        spinnerRadius: 10,
+        lineWidth: 5,
        zlevel: 0
    });
+    var group = new graphic.Group();
    var mask = new graphic.Rect({
        style: {
            fill: opts.maskColor
@@ -46,24 +52,13 @@ export default function (api, opts) {
        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
@@ -71,32 +66,49 @@ export default function (api, opts) {
        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.showSpinner) {
+        var arc = new graphic.Arc({
+            shape: {
+                startAngle: -PI / 2,
+                endAngle: -PI / 2 + 0.1,
+                r: opts.spinnerRadius
+            },
+            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.showSpinner ? opts.spinnerRadius : 0;
+        // cx = (containerWidth - arcDiameter - textDistance - textWidth) / 2
+        // textDistance needs to be calculated when both animation and text exist
+        var cx = (api.getWidth() - r * 2 - (opts.showSpinner && textWidth ? 10 : 0) - textWidth) / 2
+               // only show the text
+               - (opts.showSpinner ? 0 : textWidth / 2);
        var cy = api.getHeight() / 2;
-        arc.setShape({
+        opts.showSpinner && arc.setShape({
            cx: cx,
            cy: cy
        });
-        var r = arc.shape.r;
        labelRect.setShape({
            x: cx - r,
            y: cy - r,

--- a/test/loading.html
+++ b/test/loading.html
@@ -27,27 +27,60 @@ under the License.
    </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>