default.js 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293
  1. var zrUtil = require("zrender/lib/core/util");
  2. var graphic = require("../util/graphic");
  3. var PI = Math.PI;
  4. /**
  5. * @param {module:echarts/ExtensionAPI} api
  6. * @param {Object} [opts]
  7. * @param {string} [opts.text]
  8. * @param {string} [opts.color]
  9. * @param {string} [opts.textColor]
  10. * @return {module:zrender/Element}
  11. */
  12. function _default(api, opts) {
  13. opts = opts || {};
  14. zrUtil.defaults(opts, {
  15. text: 'loading',
  16. color: '#c23531',
  17. textColor: '#000',
  18. maskColor: 'rgba(255, 255, 255, 0.8)',
  19. zlevel: 0
  20. });
  21. var mask = new graphic.Rect({
  22. style: {
  23. fill: opts.maskColor
  24. },
  25. zlevel: opts.zlevel,
  26. z: 10000
  27. });
  28. var arc = new graphic.Arc({
  29. shape: {
  30. startAngle: -PI / 2,
  31. endAngle: -PI / 2 + 0.1,
  32. r: 10
  33. },
  34. style: {
  35. stroke: opts.color,
  36. lineCap: 'round',
  37. lineWidth: 5
  38. },
  39. zlevel: opts.zlevel,
  40. z: 10001
  41. });
  42. var labelRect = new graphic.Rect({
  43. style: {
  44. fill: 'none',
  45. text: opts.text,
  46. textPosition: 'right',
  47. textDistance: 10,
  48. textFill: opts.textColor
  49. },
  50. zlevel: opts.zlevel,
  51. z: 10001
  52. });
  53. arc.animateShape(true).when(1000, {
  54. endAngle: PI * 3 / 2
  55. }).start('circularInOut');
  56. arc.animateShape(true).when(1000, {
  57. startAngle: PI * 3 / 2
  58. }).delay(300).start('circularInOut');
  59. var group = new graphic.Group();
  60. group.add(arc);
  61. group.add(labelRect);
  62. group.add(mask); // Inject resize
  63. group.resize = function () {
  64. var cx = api.getWidth() / 2;
  65. var cy = api.getHeight() / 2;
  66. arc.setShape({
  67. cx: cx,
  68. cy: cy
  69. });
  70. var r = arc.shape.r;
  71. labelRect.setShape({
  72. x: cx - r,
  73. y: cy - r,
  74. width: r * 2,
  75. height: r * 2
  76. });
  77. mask.setShape({
  78. x: 0,
  79. y: 0,
  80. width: api.getWidth(),
  81. height: api.getHeight()
  82. });
  83. };
  84. group.resize();
  85. return group;
  86. }
  87. module.exports = _default;