| /* |
| * 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/src/core/util'; |
| import * as graphic from '../util/graphic'; |
| 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 (api, opts) { |
| opts = opts || {}; |
| zrUtil.defaults(opts, { |
| text: 'loading', |
| color: '#c23531', |
| textColor: '#000', |
| maskColor: 'rgba(255, 255, 255, 0.8)', |
| zlevel: 0 |
| }); |
| 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 |
| }); |
| var labelRect = new graphic.Rect({ |
| style: { |
| fill: 'none', |
| text: opts.text, |
| 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); // Inject resize |
| |
| group.resize = function () { |
| var cx = api.getWidth() / 2; |
| var cy = api.getHeight() / 2; |
| arc.setShape({ |
| cx: cx, |
| cy: cy |
| }); |
| var r = arc.shape.r; |
| 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; |
| } |