AngleAxisView.js 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323
  1. /*
  2. * Licensed to the Apache Software Foundation (ASF) under one
  3. * or more contributor license agreements. See the NOTICE file
  4. * distributed with this work for additional information
  5. * regarding copyright ownership. The ASF licenses this file
  6. * to you under the Apache License, Version 2.0 (the
  7. * "License"); you may not use this file except in compliance
  8. * with the License. You may obtain a copy of the License at
  9. *
  10. * http://www.apache.org/licenses/LICENSE-2.0
  11. *
  12. * Unless required by applicable law or agreed to in writing,
  13. * software distributed under the License is distributed on an
  14. * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  15. * KIND, either express or implied. See the License for the
  16. * specific language governing permissions and limitations
  17. * under the License.
  18. */
  19. /**
  20. * AUTO-GENERATED FILE. DO NOT MODIFY.
  21. */
  22. /*
  23. * Licensed to the Apache Software Foundation (ASF) under one
  24. * or more contributor license agreements. See the NOTICE file
  25. * distributed with this work for additional information
  26. * regarding copyright ownership. The ASF licenses this file
  27. * to you under the Apache License, Version 2.0 (the
  28. * "License"); you may not use this file except in compliance
  29. * with the License. You may obtain a copy of the License at
  30. *
  31. * http://www.apache.org/licenses/LICENSE-2.0
  32. *
  33. * Unless required by applicable law or agreed to in writing,
  34. * software distributed under the License is distributed on an
  35. * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  36. * KIND, either express or implied. See the License for the
  37. * specific language governing permissions and limitations
  38. * under the License.
  39. */
  40. import { __extends } from "tslib";
  41. import * as zrUtil from 'zrender/lib/core/util.js';
  42. import * as graphic from '../../util/graphic.js';
  43. import { createTextStyle } from '../../label/labelStyle.js';
  44. import Model from '../../model/Model.js';
  45. import AxisView from './AxisView.js';
  46. import AxisBuilder from './AxisBuilder.js';
  47. import { getECData } from '../../util/innerStore.js';
  48. var elementList = ['axisLine', 'axisLabel', 'axisTick', 'minorTick', 'splitLine', 'minorSplitLine', 'splitArea'];
  49. function getAxisLineShape(polar, rExtent, angle) {
  50. rExtent[1] > rExtent[0] && (rExtent = rExtent.slice().reverse());
  51. var start = polar.coordToPoint([rExtent[0], angle]);
  52. var end = polar.coordToPoint([rExtent[1], angle]);
  53. return {
  54. x1: start[0],
  55. y1: start[1],
  56. x2: end[0],
  57. y2: end[1]
  58. };
  59. }
  60. function getRadiusIdx(polar) {
  61. var radiusAxis = polar.getRadiusAxis();
  62. return radiusAxis.inverse ? 0 : 1;
  63. }
  64. // Remove the last tick which will overlap the first tick
  65. function fixAngleOverlap(list) {
  66. var firstItem = list[0];
  67. var lastItem = list[list.length - 1];
  68. if (firstItem && lastItem && Math.abs(Math.abs(firstItem.coord - lastItem.coord) - 360) < 1e-4) {
  69. list.pop();
  70. }
  71. }
  72. var AngleAxisView = /** @class */function (_super) {
  73. __extends(AngleAxisView, _super);
  74. function AngleAxisView() {
  75. var _this = _super !== null && _super.apply(this, arguments) || this;
  76. _this.type = AngleAxisView.type;
  77. _this.axisPointerClass = 'PolarAxisPointer';
  78. return _this;
  79. }
  80. AngleAxisView.prototype.render = function (angleAxisModel, ecModel) {
  81. this.group.removeAll();
  82. if (!angleAxisModel.get('show')) {
  83. return;
  84. }
  85. var angleAxis = angleAxisModel.axis;
  86. var polar = angleAxis.polar;
  87. var radiusExtent = polar.getRadiusAxis().getExtent();
  88. var ticksAngles = angleAxis.getTicksCoords();
  89. var minorTickAngles = angleAxis.getMinorTicksCoords();
  90. var labels = zrUtil.map(angleAxis.getViewLabels(), function (labelItem) {
  91. labelItem = zrUtil.clone(labelItem);
  92. var scale = angleAxis.scale;
  93. var tickValue = scale.type === 'ordinal' ? scale.getRawOrdinalNumber(labelItem.tickValue) : labelItem.tickValue;
  94. labelItem.coord = angleAxis.dataToCoord(tickValue);
  95. return labelItem;
  96. });
  97. fixAngleOverlap(labels);
  98. fixAngleOverlap(ticksAngles);
  99. zrUtil.each(elementList, function (name) {
  100. if (angleAxisModel.get([name, 'show']) && (!angleAxis.scale.isBlank() || name === 'axisLine')) {
  101. angelAxisElementsBuilders[name](this.group, angleAxisModel, polar, ticksAngles, minorTickAngles, radiusExtent, labels);
  102. }
  103. }, this);
  104. };
  105. AngleAxisView.type = 'angleAxis';
  106. return AngleAxisView;
  107. }(AxisView);
  108. var angelAxisElementsBuilders = {
  109. axisLine: function (group, angleAxisModel, polar, ticksAngles, minorTickAngles, radiusExtent) {
  110. var lineStyleModel = angleAxisModel.getModel(['axisLine', 'lineStyle']);
  111. var angleAxis = polar.getAngleAxis();
  112. var RADIAN = Math.PI / 180;
  113. var angleExtent = angleAxis.getExtent();
  114. // extent id of the axis radius (r0 and r)
  115. var rId = getRadiusIdx(polar);
  116. var r0Id = rId ? 0 : 1;
  117. var shape;
  118. var shapeType = Math.abs(angleExtent[1] - angleExtent[0]) === 360 ? 'Circle' : 'Arc';
  119. if (radiusExtent[r0Id] === 0) {
  120. shape = new graphic[shapeType]({
  121. shape: {
  122. cx: polar.cx,
  123. cy: polar.cy,
  124. r: radiusExtent[rId],
  125. startAngle: -angleExtent[0] * RADIAN,
  126. endAngle: -angleExtent[1] * RADIAN,
  127. clockwise: angleAxis.inverse
  128. },
  129. style: lineStyleModel.getLineStyle(),
  130. z2: 1,
  131. silent: true
  132. });
  133. } else {
  134. shape = new graphic.Ring({
  135. shape: {
  136. cx: polar.cx,
  137. cy: polar.cy,
  138. r: radiusExtent[rId],
  139. r0: radiusExtent[r0Id]
  140. },
  141. style: lineStyleModel.getLineStyle(),
  142. z2: 1,
  143. silent: true
  144. });
  145. }
  146. shape.style.fill = null;
  147. group.add(shape);
  148. },
  149. axisTick: function (group, angleAxisModel, polar, ticksAngles, minorTickAngles, radiusExtent) {
  150. var tickModel = angleAxisModel.getModel('axisTick');
  151. var tickLen = (tickModel.get('inside') ? -1 : 1) * tickModel.get('length');
  152. var radius = radiusExtent[getRadiusIdx(polar)];
  153. var lines = zrUtil.map(ticksAngles, function (tickAngleItem) {
  154. return new graphic.Line({
  155. shape: getAxisLineShape(polar, [radius, radius + tickLen], tickAngleItem.coord)
  156. });
  157. });
  158. group.add(graphic.mergePath(lines, {
  159. style: zrUtil.defaults(tickModel.getModel('lineStyle').getLineStyle(), {
  160. stroke: angleAxisModel.get(['axisLine', 'lineStyle', 'color'])
  161. })
  162. }));
  163. },
  164. minorTick: function (group, angleAxisModel, polar, tickAngles, minorTickAngles, radiusExtent) {
  165. if (!minorTickAngles.length) {
  166. return;
  167. }
  168. var tickModel = angleAxisModel.getModel('axisTick');
  169. var minorTickModel = angleAxisModel.getModel('minorTick');
  170. var tickLen = (tickModel.get('inside') ? -1 : 1) * minorTickModel.get('length');
  171. var radius = radiusExtent[getRadiusIdx(polar)];
  172. var lines = [];
  173. for (var i = 0; i < minorTickAngles.length; i++) {
  174. for (var k = 0; k < minorTickAngles[i].length; k++) {
  175. lines.push(new graphic.Line({
  176. shape: getAxisLineShape(polar, [radius, radius + tickLen], minorTickAngles[i][k].coord)
  177. }));
  178. }
  179. }
  180. group.add(graphic.mergePath(lines, {
  181. style: zrUtil.defaults(minorTickModel.getModel('lineStyle').getLineStyle(), zrUtil.defaults(tickModel.getLineStyle(), {
  182. stroke: angleAxisModel.get(['axisLine', 'lineStyle', 'color'])
  183. }))
  184. }));
  185. },
  186. axisLabel: function (group, angleAxisModel, polar, ticksAngles, minorTickAngles, radiusExtent, labels) {
  187. var rawCategoryData = angleAxisModel.getCategories(true);
  188. var commonLabelModel = angleAxisModel.getModel('axisLabel');
  189. var labelMargin = commonLabelModel.get('margin');
  190. var triggerEvent = angleAxisModel.get('triggerEvent');
  191. // Use length of ticksAngles because it may remove the last tick to avoid overlapping
  192. zrUtil.each(labels, function (labelItem, idx) {
  193. var labelModel = commonLabelModel;
  194. var tickValue = labelItem.tickValue;
  195. var r = radiusExtent[getRadiusIdx(polar)];
  196. var p = polar.coordToPoint([r + labelMargin, labelItem.coord]);
  197. var cx = polar.cx;
  198. var cy = polar.cy;
  199. var labelTextAlign = Math.abs(p[0] - cx) / r < 0.3 ? 'center' : p[0] > cx ? 'left' : 'right';
  200. var labelTextVerticalAlign = Math.abs(p[1] - cy) / r < 0.3 ? 'middle' : p[1] > cy ? 'top' : 'bottom';
  201. if (rawCategoryData && rawCategoryData[tickValue]) {
  202. var rawCategoryItem = rawCategoryData[tickValue];
  203. if (zrUtil.isObject(rawCategoryItem) && rawCategoryItem.textStyle) {
  204. labelModel = new Model(rawCategoryItem.textStyle, commonLabelModel, commonLabelModel.ecModel);
  205. }
  206. }
  207. var textEl = new graphic.Text({
  208. silent: AxisBuilder.isLabelSilent(angleAxisModel),
  209. style: createTextStyle(labelModel, {
  210. x: p[0],
  211. y: p[1],
  212. fill: labelModel.getTextColor() || angleAxisModel.get(['axisLine', 'lineStyle', 'color']),
  213. text: labelItem.formattedLabel,
  214. align: labelTextAlign,
  215. verticalAlign: labelTextVerticalAlign
  216. })
  217. });
  218. group.add(textEl);
  219. // Pack data for mouse event
  220. if (triggerEvent) {
  221. var eventData = AxisBuilder.makeAxisEventDataBase(angleAxisModel);
  222. eventData.targetType = 'axisLabel';
  223. eventData.value = labelItem.rawLabel;
  224. getECData(textEl).eventData = eventData;
  225. }
  226. }, this);
  227. },
  228. splitLine: function (group, angleAxisModel, polar, ticksAngles, minorTickAngles, radiusExtent) {
  229. var splitLineModel = angleAxisModel.getModel('splitLine');
  230. var lineStyleModel = splitLineModel.getModel('lineStyle');
  231. var lineColors = lineStyleModel.get('color');
  232. var lineCount = 0;
  233. lineColors = lineColors instanceof Array ? lineColors : [lineColors];
  234. var splitLines = [];
  235. for (var i = 0; i < ticksAngles.length; i++) {
  236. var colorIndex = lineCount++ % lineColors.length;
  237. splitLines[colorIndex] = splitLines[colorIndex] || [];
  238. splitLines[colorIndex].push(new graphic.Line({
  239. shape: getAxisLineShape(polar, radiusExtent, ticksAngles[i].coord)
  240. }));
  241. }
  242. // Simple optimization
  243. // Batching the lines if color are the same
  244. for (var i = 0; i < splitLines.length; i++) {
  245. group.add(graphic.mergePath(splitLines[i], {
  246. style: zrUtil.defaults({
  247. stroke: lineColors[i % lineColors.length]
  248. }, lineStyleModel.getLineStyle()),
  249. silent: true,
  250. z: angleAxisModel.get('z')
  251. }));
  252. }
  253. },
  254. minorSplitLine: function (group, angleAxisModel, polar, ticksAngles, minorTickAngles, radiusExtent) {
  255. if (!minorTickAngles.length) {
  256. return;
  257. }
  258. var minorSplitLineModel = angleAxisModel.getModel('minorSplitLine');
  259. var lineStyleModel = minorSplitLineModel.getModel('lineStyle');
  260. var lines = [];
  261. for (var i = 0; i < minorTickAngles.length; i++) {
  262. for (var k = 0; k < minorTickAngles[i].length; k++) {
  263. lines.push(new graphic.Line({
  264. shape: getAxisLineShape(polar, radiusExtent, minorTickAngles[i][k].coord)
  265. }));
  266. }
  267. }
  268. group.add(graphic.mergePath(lines, {
  269. style: lineStyleModel.getLineStyle(),
  270. silent: true,
  271. z: angleAxisModel.get('z')
  272. }));
  273. },
  274. splitArea: function (group, angleAxisModel, polar, ticksAngles, minorTickAngles, radiusExtent) {
  275. if (!ticksAngles.length) {
  276. return;
  277. }
  278. var splitAreaModel = angleAxisModel.getModel('splitArea');
  279. var areaStyleModel = splitAreaModel.getModel('areaStyle');
  280. var areaColors = areaStyleModel.get('color');
  281. var lineCount = 0;
  282. areaColors = areaColors instanceof Array ? areaColors : [areaColors];
  283. var splitAreas = [];
  284. var RADIAN = Math.PI / 180;
  285. var prevAngle = -ticksAngles[0].coord * RADIAN;
  286. var r0 = Math.min(radiusExtent[0], radiusExtent[1]);
  287. var r1 = Math.max(radiusExtent[0], radiusExtent[1]);
  288. var clockwise = angleAxisModel.get('clockwise');
  289. for (var i = 1, len = ticksAngles.length; i <= len; i++) {
  290. var coord = i === len ? ticksAngles[0].coord : ticksAngles[i].coord;
  291. var colorIndex = lineCount++ % areaColors.length;
  292. splitAreas[colorIndex] = splitAreas[colorIndex] || [];
  293. splitAreas[colorIndex].push(new graphic.Sector({
  294. shape: {
  295. cx: polar.cx,
  296. cy: polar.cy,
  297. r0: r0,
  298. r: r1,
  299. startAngle: prevAngle,
  300. endAngle: -coord * RADIAN,
  301. clockwise: clockwise
  302. },
  303. silent: true
  304. }));
  305. prevAngle = -coord * RADIAN;
  306. }
  307. // Simple optimization
  308. // Batching the lines if color are the same
  309. for (var i = 0; i < splitAreas.length; i++) {
  310. group.add(graphic.mergePath(splitAreas[i], {
  311. style: zrUtil.defaults({
  312. fill: areaColors[i % areaColors.length]
  313. }, areaStyleModel.getAreaStyle()),
  314. silent: true
  315. }));
  316. }
  317. }
  318. };
  319. export default AngleAxisView;