default.js 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147
  1. /*
  2. * Licensed to the Apache Software Foundation (ASF) under one
  3. * or more contributor license agreements. See the NOTICE file
  4. * distributed with this work for additional information
  5. * regarding copyright ownership. The ASF licenses this file
  6. * to you under the Apache License, Version 2.0 (the
  7. * "License"); you may not use this file except in compliance
  8. * with the License. You may obtain a copy of the License at
  9. *
  10. * http://www.apache.org/licenses/LICENSE-2.0
  11. *
  12. * Unless required by applicable law or agreed to in writing,
  13. * software distributed under the License is distributed on an
  14. * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  15. * KIND, either express or implied. See the License for the
  16. * specific language governing permissions and limitations
  17. * under the License.
  18. */
  19. var zrUtil = require("zrender/lib/core/util");
  20. var graphic = require("../util/graphic");
  21. var textContain = require("zrender/lib/contain/text");
  22. /*
  23. * Licensed to the Apache Software Foundation (ASF) under one
  24. * or more contributor license agreements. See the NOTICE file
  25. * distributed with this work for additional information
  26. * regarding copyright ownership. The ASF licenses this file
  27. * to you under the Apache License, Version 2.0 (the
  28. * "License"); you may not use this file except in compliance
  29. * with the License. You may obtain a copy of the License at
  30. *
  31. * http://www.apache.org/licenses/LICENSE-2.0
  32. *
  33. * Unless required by applicable law or agreed to in writing,
  34. * software distributed under the License is distributed on an
  35. * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  36. * KIND, either express or implied. See the License for the
  37. * specific language governing permissions and limitations
  38. * under the License.
  39. */
  40. var PI = Math.PI;
  41. /**
  42. * @param {module:echarts/ExtensionAPI} api
  43. * @param {Object} [opts]
  44. * @param {string} [opts.text]
  45. * @param {string} [opts.color]
  46. * @param {string} [opts.textColor]
  47. * @return {module:zrender/Element}
  48. */
  49. function _default(api, opts) {
  50. opts = opts || {};
  51. zrUtil.defaults(opts, {
  52. text: 'loading',
  53. textColor: '#000',
  54. fontSize: '12px',
  55. maskColor: 'rgba(255, 255, 255, 0.8)',
  56. showSpinner: true,
  57. color: '#c23531',
  58. spinnerRadius: 10,
  59. lineWidth: 5,
  60. zlevel: 0
  61. });
  62. var group = new graphic.Group();
  63. var mask = new graphic.Rect({
  64. style: {
  65. fill: opts.maskColor
  66. },
  67. zlevel: opts.zlevel,
  68. z: 10000
  69. });
  70. group.add(mask);
  71. var font = opts.fontSize + ' sans-serif';
  72. var labelRect = new graphic.Rect({
  73. style: {
  74. fill: 'none',
  75. text: opts.text,
  76. font: font,
  77. textPosition: 'right',
  78. textDistance: 10,
  79. textFill: opts.textColor
  80. },
  81. zlevel: opts.zlevel,
  82. z: 10001
  83. });
  84. group.add(labelRect);
  85. if (opts.showSpinner) {
  86. var arc = new graphic.Arc({
  87. shape: {
  88. startAngle: -PI / 2,
  89. endAngle: -PI / 2 + 0.1,
  90. r: opts.spinnerRadius
  91. },
  92. style: {
  93. stroke: opts.color,
  94. lineCap: 'round',
  95. lineWidth: opts.lineWidth
  96. },
  97. zlevel: opts.zlevel,
  98. z: 10001
  99. });
  100. arc.animateShape(true).when(1000, {
  101. endAngle: PI * 3 / 2
  102. }).start('circularInOut');
  103. arc.animateShape(true).when(1000, {
  104. startAngle: PI * 3 / 2
  105. }).delay(300).start('circularInOut');
  106. group.add(arc);
  107. } // Inject resize
  108. group.resize = function () {
  109. var textWidth = textContain.getWidth(opts.text, font);
  110. var r = opts.showSpinner ? opts.spinnerRadius : 0; // cx = (containerWidth - arcDiameter - textDistance - textWidth) / 2
  111. // textDistance needs to be calculated when both animation and text exist
  112. var cx = (api.getWidth() - r * 2 - (opts.showSpinner && textWidth ? 10 : 0) - textWidth) / 2 // only show the text
  113. - (opts.showSpinner ? 0 : textWidth / 2);
  114. var cy = api.getHeight() / 2;
  115. opts.showSpinner && arc.setShape({
  116. cx: cx,
  117. cy: cy
  118. });
  119. labelRect.setShape({
  120. x: cx - r,
  121. y: cy - r,
  122. width: r * 2,
  123. height: r * 2
  124. });
  125. mask.setShape({
  126. x: 0,
  127. y: 0,
  128. width: api.getWidth(),
  129. height: api.getHeight()
  130. });
  131. };
  132. group.resize();
  133. return group;
  134. }
  135. module.exports = _default;