interval.js 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177
  1. "use strict";
  2. var Util = require('../../util/common');
  3. var Shape = require('./shape');
  4. var Vector2 = require('../../graphic/util/vector2');
  5. var Global = require('../../global');
  6. function getRectPoints(cfg) {
  7. var x = cfg.x,
  8. y = cfg.y,
  9. y0 = cfg.y0,
  10. size = cfg.size;
  11. var ymin = y0;
  12. var ymax = y;
  13. if (Util.isArray(y)) {
  14. ymax = y[1];
  15. ymin = y[0];
  16. }
  17. var xmin;
  18. var xmax;
  19. if (Util.isArray(x)) {
  20. xmin = x[0];
  21. xmax = x[1];
  22. } else {
  23. xmin = x - size / 2;
  24. xmax = x + size / 2;
  25. }
  26. return [{
  27. x: xmin,
  28. y: ymin
  29. }, {
  30. x: xmin,
  31. y: ymax
  32. }, {
  33. x: xmax,
  34. y: ymax
  35. }, {
  36. x: xmax,
  37. y: ymin
  38. }];
  39. }
  40. function getRectRange(points) {
  41. var xValues = [];
  42. var yValues = [];
  43. for (var i = 0, len = points.length; i < len; i++) {
  44. var point = points[i];
  45. xValues.push(point.x);
  46. yValues.push(point.y);
  47. }
  48. var xMin = Math.min.apply(null, xValues);
  49. var yMin = Math.min.apply(null, yValues);
  50. var xMax = Math.max.apply(null, xValues);
  51. var yMax = Math.max.apply(null, yValues);
  52. return {
  53. x: xMin,
  54. y: yMin,
  55. width: xMax - xMin,
  56. height: yMax - yMin
  57. };
  58. }
  59. function getMiddlePoint(a, b) {
  60. var x = (a.x - b.x) / 2 + b.x;
  61. var y = (a.y - b.y) / 2 + b.y;
  62. return {
  63. x: x,
  64. y: y
  65. };
  66. }
  67. var Interval = Shape.registerFactory('interval', {
  68. defaultShapeType: 'rect',
  69. getDefaultPoints: function getDefaultPoints(cfg) {
  70. return getRectPoints(cfg);
  71. }
  72. });
  73. Shape.registerShape('interval', 'rect', {
  74. draw: function draw(cfg, container) {
  75. var points = this.parsePoints(cfg.points);
  76. var style = Util.mix({
  77. fill: cfg.color
  78. }, Global.shape.interval, cfg.style);
  79. if (cfg.isInCircle) {
  80. var newPoints = points.slice(0);
  81. if (this._coord.transposed) {
  82. newPoints = [points[0], points[3], points[2], points[1]];
  83. }
  84. var _cfg$center = cfg.center,
  85. x = _cfg$center.x,
  86. y = _cfg$center.y;
  87. var v = [1, 0];
  88. var v0 = [newPoints[0].x - x, newPoints[0].y - y];
  89. var v1 = [newPoints[1].x - x, newPoints[1].y - y];
  90. var v2 = [newPoints[2].x - x, newPoints[2].y - y];
  91. var startAngle = Vector2.angleTo(v, v1);
  92. var endAngle = Vector2.angleTo(v, v2);
  93. var r0 = Vector2.length(v0);
  94. var r = Vector2.length(v1);
  95. if (startAngle >= 1.5 * Math.PI) {
  96. startAngle = startAngle - 2 * Math.PI;
  97. }
  98. if (endAngle >= 1.5 * Math.PI) {
  99. endAngle = endAngle - 2 * Math.PI;
  100. }
  101. return container.addShape('Sector', {
  102. className: 'interval',
  103. attrs: Util.mix({
  104. x: x,
  105. y: y,
  106. r: r,
  107. r0: r0,
  108. startAngle: startAngle,
  109. endAngle: endAngle
  110. }, style)
  111. });
  112. }
  113. var rectCfg = getRectRange(points);
  114. return container.addShape('rect', {
  115. className: 'interval',
  116. attrs: Util.mix(rectCfg, style)
  117. });
  118. }
  119. }); // 金字塔 和 漏斗图
  120. ['pyramid', 'funnel'].forEach(function (shapeType) {
  121. Shape.registerShape('interval', shapeType, {
  122. getPoints: function getPoints(cfg) {
  123. cfg.size = cfg.size * 2; // 漏斗图的 size 是柱状图的两倍
  124. return getRectPoints(cfg);
  125. },
  126. draw: function draw(cfg, container) {
  127. var points = this.parsePoints(cfg.points);
  128. var nextPoints = this.parsePoints(cfg.nextPoints);
  129. var polygonPoints = null;
  130. if (nextPoints) {
  131. polygonPoints = [points[0], points[1], nextPoints[1], nextPoints[0]];
  132. } else {
  133. polygonPoints = [points[0], points[1]]; // pyramid 顶部是三角形,所以取中心点就好了,funnel顶部是长方形
  134. if (shapeType === 'pyramid') {
  135. polygonPoints.push(getMiddlePoint(points[2], points[3]));
  136. } else {
  137. polygonPoints.push(points[2], points[3]);
  138. }
  139. }
  140. var attrs = Util.mix({
  141. fill: cfg.color,
  142. points: polygonPoints
  143. }, Global.shape.interval, cfg.style);
  144. return container.addShape('polygon', {
  145. className: 'interval',
  146. attrs: attrs
  147. });
  148. }
  149. });
  150. });
  151. module.exports = Interval;