AngleAxisView.js 6.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210
  1. var zrUtil = require("zrender/lib/core/util");
  2. var graphic = require("../../util/graphic");
  3. var Model = require("../../model/Model");
  4. var AxisView = require("./AxisView");
  5. var elementList = ['axisLine', 'axisLabel', 'axisTick', 'splitLine', 'splitArea'];
  6. function getAxisLineShape(polar, rExtent, angle) {
  7. rExtent[1] > rExtent[0] && (rExtent = rExtent.slice().reverse());
  8. var start = polar.coordToPoint([rExtent[0], angle]);
  9. var end = polar.coordToPoint([rExtent[1], angle]);
  10. return {
  11. x1: start[0],
  12. y1: start[1],
  13. x2: end[0],
  14. y2: end[1]
  15. };
  16. }
  17. function getRadiusIdx(polar) {
  18. var radiusAxis = polar.getRadiusAxis();
  19. return radiusAxis.inverse ? 0 : 1;
  20. }
  21. var _default = AxisView.extend({
  22. type: 'angleAxis',
  23. axisPointerClass: 'PolarAxisPointer',
  24. render: function (angleAxisModel, ecModel) {
  25. this.group.removeAll();
  26. if (!angleAxisModel.get('show')) {
  27. return;
  28. }
  29. var angleAxis = angleAxisModel.axis;
  30. var polar = angleAxis.polar;
  31. var radiusExtent = polar.getRadiusAxis().getExtent();
  32. var ticksAngles = angleAxis.getTicksCoords();
  33. if (angleAxis.type !== 'category') {
  34. // Remove the last tick which will overlap the first tick
  35. ticksAngles.pop();
  36. }
  37. zrUtil.each(elementList, function (name) {
  38. if (angleAxisModel.get(name + '.show') && (!angleAxis.scale.isBlank() || name === 'axisLine')) {
  39. this['_' + name](angleAxisModel, polar, ticksAngles, radiusExtent);
  40. }
  41. }, this);
  42. },
  43. /**
  44. * @private
  45. */
  46. _axisLine: function (angleAxisModel, polar, ticksAngles, radiusExtent) {
  47. var lineStyleModel = angleAxisModel.getModel('axisLine.lineStyle');
  48. var circle = new graphic.Circle({
  49. shape: {
  50. cx: polar.cx,
  51. cy: polar.cy,
  52. r: radiusExtent[getRadiusIdx(polar)]
  53. },
  54. style: lineStyleModel.getLineStyle(),
  55. z2: 1,
  56. silent: true
  57. });
  58. circle.style.fill = null;
  59. this.group.add(circle);
  60. },
  61. /**
  62. * @private
  63. */
  64. _axisTick: function (angleAxisModel, polar, ticksAngles, radiusExtent) {
  65. var tickModel = angleAxisModel.getModel('axisTick');
  66. var tickLen = (tickModel.get('inside') ? -1 : 1) * tickModel.get('length');
  67. var radius = radiusExtent[getRadiusIdx(polar)];
  68. var lines = zrUtil.map(ticksAngles, function (tickAngle) {
  69. return new graphic.Line({
  70. shape: getAxisLineShape(polar, [radius, radius + tickLen], tickAngle)
  71. });
  72. });
  73. this.group.add(graphic.mergePath(lines, {
  74. style: zrUtil.defaults(tickModel.getModel('lineStyle').getLineStyle(), {
  75. stroke: angleAxisModel.get('axisLine.lineStyle.color')
  76. })
  77. }));
  78. },
  79. /**
  80. * @private
  81. */
  82. _axisLabel: function (angleAxisModel, polar, ticksAngles, radiusExtent) {
  83. var axis = angleAxisModel.axis;
  84. var categoryData = angleAxisModel.get('data');
  85. var labelModel = angleAxisModel.getModel('axisLabel');
  86. var labels = angleAxisModel.getFormattedLabels();
  87. var labelMargin = labelModel.get('margin');
  88. var labelsAngles = axis.getLabelsCoords(); // Use length of ticksAngles because it may remove the last tick to avoid overlapping
  89. for (var i = 0; i < ticksAngles.length; i++) {
  90. var r = radiusExtent[getRadiusIdx(polar)];
  91. var p = polar.coordToPoint([r + labelMargin, labelsAngles[i]]);
  92. var cx = polar.cx;
  93. var cy = polar.cy;
  94. var labelTextAlign = Math.abs(p[0] - cx) / r < 0.3 ? 'center' : p[0] > cx ? 'left' : 'right';
  95. var labelTextVerticalAlign = Math.abs(p[1] - cy) / r < 0.3 ? 'middle' : p[1] > cy ? 'top' : 'bottom';
  96. if (categoryData && categoryData[i] && categoryData[i].textStyle) {
  97. labelModel = new Model(categoryData[i].textStyle, labelModel, labelModel.ecModel);
  98. }
  99. var textEl = new graphic.Text({
  100. silent: true
  101. });
  102. this.group.add(textEl);
  103. graphic.setTextStyle(textEl.style, labelModel, {
  104. x: p[0],
  105. y: p[1],
  106. textFill: labelModel.getTextColor() || angleAxisModel.get('axisLine.lineStyle.color'),
  107. text: labels[i],
  108. textAlign: labelTextAlign,
  109. textVerticalAlign: labelTextVerticalAlign
  110. });
  111. }
  112. },
  113. /**
  114. * @private
  115. */
  116. _splitLine: function (angleAxisModel, polar, ticksAngles, radiusExtent) {
  117. var splitLineModel = angleAxisModel.getModel('splitLine');
  118. var lineStyleModel = splitLineModel.getModel('lineStyle');
  119. var lineColors = lineStyleModel.get('color');
  120. var lineCount = 0;
  121. lineColors = lineColors instanceof Array ? lineColors : [lineColors];
  122. var splitLines = [];
  123. for (var i = 0; i < ticksAngles.length; i++) {
  124. var colorIndex = lineCount++ % lineColors.length;
  125. splitLines[colorIndex] = splitLines[colorIndex] || [];
  126. splitLines[colorIndex].push(new graphic.Line({
  127. shape: getAxisLineShape(polar, radiusExtent, ticksAngles[i])
  128. }));
  129. } // Simple optimization
  130. // Batching the lines if color are the same
  131. for (var i = 0; i < splitLines.length; i++) {
  132. this.group.add(graphic.mergePath(splitLines[i], {
  133. style: zrUtil.defaults({
  134. stroke: lineColors[i % lineColors.length]
  135. }, lineStyleModel.getLineStyle()),
  136. silent: true,
  137. z: angleAxisModel.get('z')
  138. }));
  139. }
  140. },
  141. /**
  142. * @private
  143. */
  144. _splitArea: function (angleAxisModel, polar, ticksAngles, radiusExtent) {
  145. var splitAreaModel = angleAxisModel.getModel('splitArea');
  146. var areaStyleModel = splitAreaModel.getModel('areaStyle');
  147. var areaColors = areaStyleModel.get('color');
  148. var lineCount = 0;
  149. areaColors = areaColors instanceof Array ? areaColors : [areaColors];
  150. var splitAreas = [];
  151. var RADIAN = Math.PI / 180;
  152. var prevAngle = -ticksAngles[0] * RADIAN;
  153. var r0 = Math.min(radiusExtent[0], radiusExtent[1]);
  154. var r1 = Math.max(radiusExtent[0], radiusExtent[1]);
  155. var clockwise = angleAxisModel.get('clockwise');
  156. for (var i = 1; i < ticksAngles.length; i++) {
  157. var colorIndex = lineCount++ % areaColors.length;
  158. splitAreas[colorIndex] = splitAreas[colorIndex] || [];
  159. splitAreas[colorIndex].push(new graphic.Sector({
  160. shape: {
  161. cx: polar.cx,
  162. cy: polar.cy,
  163. r0: r0,
  164. r: r1,
  165. startAngle: prevAngle,
  166. endAngle: -ticksAngles[i] * RADIAN,
  167. clockwise: clockwise
  168. },
  169. silent: true
  170. }));
  171. prevAngle = -ticksAngles[i] * RADIAN;
  172. } // Simple optimization
  173. // Batching the lines if color are the same
  174. for (var i = 0; i < splitAreas.length; i++) {
  175. this.group.add(graphic.mergePath(splitAreas[i], {
  176. style: zrUtil.defaults({
  177. fill: areaColors[i % areaColors.length]
  178. }, areaStyleModel.getAreaStyle()),
  179. silent: true
  180. }));
  181. }
  182. }
  183. });
  184. module.exports = _default;