CartesianAxisView.js 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200
  1. var zrUtil = require("zrender/lib/core/util");
  2. var graphic = require("../../util/graphic");
  3. var AxisBuilder = require("./AxisBuilder");
  4. var AxisView = require("./AxisView");
  5. var cartesianAxisHelper = require("./cartesianAxisHelper");
  6. var ifIgnoreOnTick = AxisBuilder.ifIgnoreOnTick;
  7. var getInterval = AxisBuilder.getInterval;
  8. var axisBuilderAttrs = ['axisLine', 'axisTickLabel', 'axisName'];
  9. var selfBuilderAttrs = ['splitArea', 'splitLine']; // function getAlignWithLabel(model, axisModel) {
  10. // var alignWithLabel = model.get('alignWithLabel');
  11. // if (alignWithLabel === 'auto') {
  12. // alignWithLabel = axisModel.get('axisTick.alignWithLabel');
  13. // }
  14. // return alignWithLabel;
  15. // }
  16. var CartesianAxisView = AxisView.extend({
  17. type: 'cartesianAxis',
  18. axisPointerClass: 'CartesianAxisPointer',
  19. /**
  20. * @override
  21. */
  22. render: function (axisModel, ecModel, api, payload) {
  23. this.group.removeAll();
  24. var oldAxisGroup = this._axisGroup;
  25. this._axisGroup = new graphic.Group();
  26. this.group.add(this._axisGroup);
  27. if (!axisModel.get('show')) {
  28. return;
  29. }
  30. var gridModel = axisModel.getCoordSysModel();
  31. var layout = cartesianAxisHelper.layout(gridModel, axisModel);
  32. var axisBuilder = new AxisBuilder(axisModel, layout);
  33. zrUtil.each(axisBuilderAttrs, axisBuilder.add, axisBuilder);
  34. this._axisGroup.add(axisBuilder.getGroup());
  35. zrUtil.each(selfBuilderAttrs, function (name) {
  36. if (axisModel.get(name + '.show')) {
  37. this['_' + name](axisModel, gridModel, layout.labelInterval);
  38. }
  39. }, this);
  40. graphic.groupTransition(oldAxisGroup, this._axisGroup, axisModel);
  41. CartesianAxisView.superCall(this, 'render', axisModel, ecModel, api, payload);
  42. },
  43. /**
  44. * @param {module:echarts/coord/cartesian/AxisModel} axisModel
  45. * @param {module:echarts/coord/cartesian/GridModel} gridModel
  46. * @param {number|Function} labelInterval
  47. * @private
  48. */
  49. _splitLine: function (axisModel, gridModel, labelInterval) {
  50. var axis = axisModel.axis;
  51. if (axis.scale.isBlank()) {
  52. return;
  53. }
  54. var splitLineModel = axisModel.getModel('splitLine');
  55. var lineStyleModel = splitLineModel.getModel('lineStyle');
  56. var lineColors = lineStyleModel.get('color');
  57. var lineInterval = getInterval(splitLineModel, labelInterval);
  58. lineColors = zrUtil.isArray(lineColors) ? lineColors : [lineColors];
  59. var gridRect = gridModel.coordinateSystem.getRect();
  60. var isHorizontal = axis.isHorizontal();
  61. var lineCount = 0;
  62. var ticksCoords = axis.getTicksCoords();
  63. var ticks = axis.scale.getTicks();
  64. var showMinLabel = axisModel.get('axisLabel.showMinLabel');
  65. var showMaxLabel = axisModel.get('axisLabel.showMaxLabel');
  66. var p1 = [];
  67. var p2 = []; // Simple optimization
  68. // Batching the lines if color are the same
  69. var lineStyle = lineStyleModel.getLineStyle();
  70. for (var i = 0; i < ticksCoords.length; i++) {
  71. if (ifIgnoreOnTick(axis, i, lineInterval, ticksCoords.length, showMinLabel, showMaxLabel)) {
  72. continue;
  73. }
  74. var tickCoord = axis.toGlobalCoord(ticksCoords[i]);
  75. if (isHorizontal) {
  76. p1[0] = tickCoord;
  77. p1[1] = gridRect.y;
  78. p2[0] = tickCoord;
  79. p2[1] = gridRect.y + gridRect.height;
  80. } else {
  81. p1[0] = gridRect.x;
  82. p1[1] = tickCoord;
  83. p2[0] = gridRect.x + gridRect.width;
  84. p2[1] = tickCoord;
  85. }
  86. var colorIndex = lineCount++ % lineColors.length;
  87. this._axisGroup.add(new graphic.Line(graphic.subPixelOptimizeLine({
  88. anid: 'line_' + ticks[i],
  89. shape: {
  90. x1: p1[0],
  91. y1: p1[1],
  92. x2: p2[0],
  93. y2: p2[1]
  94. },
  95. style: zrUtil.defaults({
  96. stroke: lineColors[colorIndex]
  97. }, lineStyle),
  98. silent: true
  99. })));
  100. }
  101. },
  102. /**
  103. * @param {module:echarts/coord/cartesian/AxisModel} axisModel
  104. * @param {module:echarts/coord/cartesian/GridModel} gridModel
  105. * @param {number|Function} labelInterval
  106. * @private
  107. */
  108. _splitArea: function (axisModel, gridModel, labelInterval) {
  109. var axis = axisModel.axis;
  110. if (axis.scale.isBlank()) {
  111. return;
  112. }
  113. var splitAreaModel = axisModel.getModel('splitArea');
  114. var areaStyleModel = splitAreaModel.getModel('areaStyle');
  115. var areaColors = areaStyleModel.get('color');
  116. var gridRect = gridModel.coordinateSystem.getRect();
  117. var ticksCoords = axis.getTicksCoords();
  118. var ticks = axis.scale.getTicks();
  119. var prevX = axis.toGlobalCoord(ticksCoords[0]);
  120. var prevY = axis.toGlobalCoord(ticksCoords[0]);
  121. var count = 0;
  122. var areaInterval = getInterval(splitAreaModel, labelInterval);
  123. var areaStyle = areaStyleModel.getAreaStyle();
  124. areaColors = zrUtil.isArray(areaColors) ? areaColors : [areaColors];
  125. var showMinLabel = axisModel.get('axisLabel.showMinLabel');
  126. var showMaxLabel = axisModel.get('axisLabel.showMaxLabel');
  127. for (var i = 1; i < ticksCoords.length; i++) {
  128. if (ifIgnoreOnTick(axis, i, areaInterval, ticksCoords.length, showMinLabel, showMaxLabel)) {
  129. continue;
  130. }
  131. var tickCoord = axis.toGlobalCoord(ticksCoords[i]);
  132. var x;
  133. var y;
  134. var width;
  135. var height;
  136. if (axis.isHorizontal()) {
  137. x = prevX;
  138. y = gridRect.y;
  139. width = tickCoord - x;
  140. height = gridRect.height;
  141. } else {
  142. x = gridRect.x;
  143. y = prevY;
  144. width = gridRect.width;
  145. height = tickCoord - y;
  146. }
  147. var colorIndex = count++ % areaColors.length;
  148. this._axisGroup.add(new graphic.Rect({
  149. anid: 'area_' + ticks[i],
  150. shape: {
  151. x: x,
  152. y: y,
  153. width: width,
  154. height: height
  155. },
  156. style: zrUtil.defaults({
  157. fill: areaColors[colorIndex]
  158. }, areaStyle),
  159. silent: true
  160. }));
  161. prevX = x + width;
  162. prevY = y + height;
  163. }
  164. }
  165. });
  166. CartesianAxisView.extend({
  167. type: 'xAxis'
  168. });
  169. CartesianAxisView.extend({
  170. type: 'yAxis'
  171. });