You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
162 lines
4.5 KiB
162 lines
4.5 KiB
|
|
/* |
|
* Licensed to the Apache Software Foundation (ASF) under one |
|
* or more contributor license agreements. See the NOTICE file |
|
* distributed with this work for additional information |
|
* regarding copyright ownership. The ASF licenses this file |
|
* to you under the Apache License, Version 2.0 (the |
|
* "License"); you may not use this file except in compliance |
|
* with the License. You may obtain a copy of the License at |
|
* |
|
* http://www.apache.org/licenses/LICENSE-2.0 |
|
* |
|
* Unless required by applicable law or agreed to in writing, |
|
* software distributed under the License is distributed on an |
|
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY |
|
* KIND, either express or implied. See the License for the |
|
* specific language governing permissions and limitations |
|
* under the License. |
|
*/ |
|
|
|
|
|
/** |
|
* AUTO-GENERATED FILE. DO NOT MODIFY. |
|
*/ |
|
|
|
/* |
|
* Licensed to the Apache Software Foundation (ASF) under one |
|
* or more contributor license agreements. See the NOTICE file |
|
* distributed with this work for additional information |
|
* regarding copyright ownership. The ASF licenses this file |
|
* to you under the Apache License, Version 2.0 (the |
|
* "License"); you may not use this file except in compliance |
|
* with the License. You may obtain a copy of the License at |
|
* |
|
* http://www.apache.org/licenses/LICENSE-2.0 |
|
* |
|
* Unless required by applicable law or agreed to in writing, |
|
* software distributed under the License is distributed on an |
|
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY |
|
* KIND, either express or implied. See the License for the |
|
* specific language governing permissions and limitations |
|
* under the License. |
|
*/ |
|
import * as zrUtil from 'zrender/lib/core/util.js'; |
|
import * as graphic from '../util/graphic.js'; |
|
var PI = Math.PI; |
|
/** |
|
* @param {module:echarts/ExtensionAPI} api |
|
* @param {Object} [opts] |
|
* @param {string} [opts.text] |
|
* @param {string} [opts.color] |
|
* @param {string} [opts.textColor] |
|
* @return {module:zrender/Element} |
|
*/ |
|
|
|
export default function defaultLoading(api, opts) { |
|
opts = opts || {}; |
|
zrUtil.defaults(opts, { |
|
text: 'loading', |
|
textColor: '#000', |
|
fontSize: 12, |
|
fontWeight: 'normal', |
|
fontStyle: 'normal', |
|
fontFamily: 'sans-serif', |
|
maskColor: 'rgba(255, 255, 255, 0.8)', |
|
showSpinner: true, |
|
color: '#5470c6', |
|
spinnerRadius: 10, |
|
lineWidth: 5, |
|
zlevel: 0 |
|
}); |
|
var group = new graphic.Group(); |
|
var mask = new graphic.Rect({ |
|
style: { |
|
fill: opts.maskColor |
|
}, |
|
zlevel: opts.zlevel, |
|
z: 10000 |
|
}); |
|
group.add(mask); |
|
var textContent = new graphic.Text({ |
|
style: { |
|
text: opts.text, |
|
fill: opts.textColor, |
|
fontSize: opts.fontSize, |
|
fontWeight: opts.fontWeight, |
|
fontStyle: opts.fontStyle, |
|
fontFamily: opts.fontFamily |
|
}, |
|
zlevel: opts.zlevel, |
|
z: 10001 |
|
}); |
|
var labelRect = new graphic.Rect({ |
|
style: { |
|
fill: 'none' |
|
}, |
|
textContent: textContent, |
|
textConfig: { |
|
position: 'right', |
|
distance: 10 |
|
}, |
|
zlevel: opts.zlevel, |
|
z: 10001 |
|
}); |
|
group.add(labelRect); |
|
var arc; |
|
|
|
if (opts.showSpinner) { |
|
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 textWidth = textContent.getBoundingRect().width; |
|
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 - (opts.showSpinner && textWidth ? 0 : 5 + textWidth / 2) // only show the text |
|
+ (opts.showSpinner ? 0 : textWidth / 2) // only show the spinner |
|
+ (textWidth ? 0 : r); |
|
var cy = api.getHeight() / 2; |
|
opts.showSpinner && arc.setShape({ |
|
cx: cx, |
|
cy: cy |
|
}); |
|
labelRect.setShape({ |
|
x: cx - r, |
|
y: cy - r, |
|
width: r * 2, |
|
height: r * 2 |
|
}); |
|
mask.setShape({ |
|
x: 0, |
|
y: 0, |
|
width: api.getWidth(), |
|
height: api.getHeight() |
|
}); |
|
}; |
|
|
|
group.resize(); |
|
return group; |
|
} |