You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by yu...@apache.org on 2020/04/10 10:29:37 UTC
[incubator-echarts] branch fix-11790 created (now ecb4de9)
This is an automated email from the ASF dual-hosted git repository.
yufeng04 pushed a change to branch fix-11790
in repository https://gitbox.apache.org/repos/asf/incubator-echarts.git.
at ecb4de9 showLoading align center #11790
This branch includes the following new commits:
new ecb4de9 showLoading align center #11790
The 1 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails. The revisions
listed as "add" were already present in the repository and have only
been added to this reference.
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[incubator-echarts] 01/01: showLoading align center #11790
Posted by yu...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
yufeng04 pushed a commit to branch fix-11790
in repository https://gitbox.apache.org/repos/asf/incubator-echarts.git
commit ecb4de9a6f4bd10820fd7ae61eb6e204fd574cee
Author: yufeng04 <74...@qq.com>
AuthorDate: Fri Apr 10 18:27:58 2020 +0800
showLoading align center #11790
---
src/loading/default.js | 80 ++++++++++++++++++++++----------------
test/loading.html | 55 ++++++++++++++++++++------
test/runTest/actions/__meta__.json | 1 +
test/runTest/actions/loading.json | 1 +
4 files changed, 92 insertions(+), 45 deletions(-)
diff --git a/src/loading/default.js b/src/loading/default.js
index 13d90d5..0792eda 100644
--- 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)',
+ showAnimation: true,
+ color: '#c23531',
+ arcRadius: 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.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
index 7173dff..8d029b5 100644
--- 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>
diff --git a/test/runTest/actions/__meta__.json b/test/runTest/actions/__meta__.json
index 4915a31..cc3142a 100644
--- 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
new file mode 100644
index 0000000..9f7e561
--- /dev/null
+++ 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}]
\ No newline at end of file
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org