meter-gauge.js 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354
  1. "use strict";
  2. Object.defineProperty(exports, "__esModule", { value: true });
  3. var g2_1 = require("@antv/g2");
  4. var util_1 = require("@antv/util");
  5. /**
  6. * 自定义 Shape 部分: 自定义米轨仪表盘
  7. * 定义 STEP, STEP_RATIO. 可绘制区域: 1 / (STEP + 1) * i -> 1 / (STEP + 1) * i + (STEP_RATIO / (STEP + 1))
  8. */
  9. (0, g2_1.registerShape)('interval', 'meter-gauge', {
  10. draw: function (cfg, container) {
  11. // 使用 customInfo 传递参数
  12. var _a = cfg.customInfo.meter, meter = _a === void 0 ? {} : _a;
  13. var _b = meter.steps, STEP = _b === void 0 ? 50 : _b, _c = meter.stepRatio, STEP_RATIO = _c === void 0 ? 0.5 : _c;
  14. STEP = STEP < 1 ? 1 : STEP;
  15. // stepRatio 取值范围: (0, 1]
  16. STEP_RATIO = (0, util_1.clamp)(STEP_RATIO, 0, 1);
  17. var _d = this.coordinate, COORD_START_ANGLE = _d.startAngle, COORD_END_ANGLE = _d.endAngle;
  18. var GAP = 0;
  19. if (STEP_RATIO > 0 && STEP_RATIO < 1) {
  20. var TOTAL = COORD_END_ANGLE - COORD_START_ANGLE;
  21. GAP = TOTAL / STEP / (STEP_RATIO / (1 - STEP_RATIO) + 1 - 1 / STEP);
  22. }
  23. var INTERVAL = (GAP / (1 - STEP_RATIO)) * STEP_RATIO;
  24. var group = container.addGroup();
  25. // 绘制图形的时候,留下 gap
  26. var center = this.coordinate.getCenter();
  27. var radius = this.coordinate.getRadius();
  28. var _e = g2_1.Util.getAngle(cfg, this.coordinate), START_ANGLE = _e.startAngle, END_ANGLE = _e.endAngle;
  29. for (var startAngle = START_ANGLE; startAngle < END_ANGLE;) {
  30. var endAngle = void 0;
  31. var r = (startAngle - COORD_START_ANGLE) % (INTERVAL + GAP);
  32. if (r < INTERVAL) {
  33. endAngle = startAngle + (INTERVAL - r);
  34. }
  35. else {
  36. startAngle += INTERVAL + GAP - r;
  37. endAngle = startAngle + INTERVAL;
  38. }
  39. var path = g2_1.Util.getSectorPath(center.x, center.y, radius, startAngle, Math.min(endAngle, END_ANGLE), radius * this.coordinate.innerRadius);
  40. group.addShape('path', {
  41. name: 'meter-gauge',
  42. attrs: {
  43. path: path,
  44. fill: cfg.color,
  45. stroke: cfg.color,
  46. lineWidth: 0.5,
  47. },
  48. });
  49. startAngle = endAngle + GAP;
  50. }
  51. return group;
  52. },
  53. });
  54. //# sourceMappingURL=meter-gauge.js.map