AngleAxisView.js 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346
  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. } // Remove the last tick which will overlap the first tick
  64. function fixAngleOverlap(list) {
  65. var firstItem = list[0];
  66. var lastItem = list[list.length - 1];
  67. if (firstItem && lastItem && Math.abs(Math.abs(firstItem.coord - lastItem.coord) - 360) < 1e-4) {
  68. list.pop();
  69. }
  70. }
  71. var AngleAxisView =
  72. /** @class */
  73. function (_super) {
  74. __extends(AngleAxisView, _super);
  75. function AngleAxisView() {
  76. var _this = _super !== null && _super.apply(this, arguments) || this;
  77. _this.type = AngleAxisView.type;
  78. _this.axisPointerClass = 'PolarAxisPointer';
  79. return _this;
  80. }
  81. AngleAxisView.prototype.render = function (angleAxisModel, ecModel) {
  82. this.group.removeAll();
  83. if (!angleAxisModel.get('show')) {
  84. return;
  85. }
  86. var angleAxis = angleAxisModel.axis;
  87. var polar = angleAxis.polar;
  88. var radiusExtent = polar.getRadiusAxis().getExtent();
  89. var ticksAngles = angleAxis.getTicksCoords();
  90. var minorTickAngles = angleAxis.getMinorTicksCoords();
  91. var labels = zrUtil.map(angleAxis.getViewLabels(), function (labelItem) {
  92. labelItem = zrUtil.clone(labelItem);
  93. var scale = angleAxis.scale;
  94. var tickValue = scale.type === 'ordinal' ? scale.getRawOrdinalNumber(labelItem.tickValue) : labelItem.tickValue;
  95. labelItem.coord = angleAxis.dataToCoord(tickValue);
  96. return labelItem;
  97. });
  98. fixAngleOverlap(labels);
  99. fixAngleOverlap(ticksAngles);
  100. zrUtil.each(elementList, function (name) {
  101. if (angleAxisModel.get([name, 'show']) && (!angleAxis.scale.isBlank() || name === 'axisLine')) {
  102. angelAxisElementsBuilders[name](this.group, angleAxisModel, polar, ticksAngles, minorTickAngles, radiusExtent, labels);
  103. }
  104. }, this);
  105. };
  106. AngleAxisView.type = 'angleAxis';
  107. return AngleAxisView;
  108. }(AxisView);
  109. var angelAxisElementsBuilders = {
  110. axisLine: function (group, angleAxisModel, polar, ticksAngles, minorTickAngles, radiusExtent) {
  111. var lineStyleModel = angleAxisModel.getModel(['axisLine', 'lineStyle']); // extent id of the axis radius (r0 and r)
  112. var rId = getRadiusIdx(polar);
  113. var r0Id = rId ? 0 : 1;
  114. var shape;
  115. if (radiusExtent[r0Id] === 0) {
  116. shape = new graphic.Circle({
  117. shape: {
  118. cx: polar.cx,
  119. cy: polar.cy,
  120. r: radiusExtent[rId]
  121. },
  122. style: lineStyleModel.getLineStyle(),
  123. z2: 1,
  124. silent: true
  125. });
  126. } else {
  127. shape = new graphic.Ring({
  128. shape: {
  129. cx: polar.cx,
  130. cy: polar.cy,
  131. r: radiusExtent[rId],
  132. r0: radiusExtent[r0Id]
  133. },
  134. style: lineStyleModel.getLineStyle(),
  135. z2: 1,
  136. silent: true
  137. });
  138. }
  139. shape.style.fill = null;
  140. group.add(shape);
  141. },
  142. axisTick: function (group, angleAxisModel, polar, ticksAngles, minorTickAngles, radiusExtent) {
  143. var tickModel = angleAxisModel.getModel('axisTick');
  144. var tickLen = (tickModel.get('inside') ? -1 : 1) * tickModel.get('length');
  145. var radius = radiusExtent[getRadiusIdx(polar)];
  146. var lines = zrUtil.map(ticksAngles, function (tickAngleItem) {
  147. return new graphic.Line({
  148. shape: getAxisLineShape(polar, [radius, radius + tickLen], tickAngleItem.coord)
  149. });
  150. });
  151. group.add(graphic.mergePath(lines, {
  152. style: zrUtil.defaults(tickModel.getModel('lineStyle').getLineStyle(), {
  153. stroke: angleAxisModel.get(['axisLine', 'lineStyle', 'color'])
  154. })
  155. }));
  156. },
  157. minorTick: function (group, angleAxisModel, polar, tickAngles, minorTickAngles, radiusExtent) {
  158. if (!minorTickAngles.length) {
  159. return;
  160. }
  161. var tickModel = angleAxisModel.getModel('axisTick');
  162. var minorTickModel = angleAxisModel.getModel('minorTick');
  163. var tickLen = (tickModel.get('inside') ? -1 : 1) * minorTickModel.get('length');
  164. var radius = radiusExtent[getRadiusIdx(polar)];
  165. var lines = [];
  166. for (var i = 0; i < minorTickAngles.length; i++) {
  167. for (var k = 0; k < minorTickAngles[i].length; k++) {
  168. lines.push(new graphic.Line({
  169. shape: getAxisLineShape(polar, [radius, radius + tickLen], minorTickAngles[i][k].coord)
  170. }));
  171. }
  172. }
  173. group.add(graphic.mergePath(lines, {
  174. style: zrUtil.defaults(minorTickModel.getModel('lineStyle').getLineStyle(), zrUtil.defaults(tickModel.getLineStyle(), {
  175. stroke: angleAxisModel.get(['axisLine', 'lineStyle', 'color'])
  176. }))
  177. }));
  178. },
  179. axisLabel: function (group, angleAxisModel, polar, ticksAngles, minorTickAngles, radiusExtent, labels) {
  180. var rawCategoryData = angleAxisModel.getCategories(true);
  181. var commonLabelModel = angleAxisModel.getModel('axisLabel');
  182. var labelMargin = commonLabelModel.get('margin');
  183. var triggerEvent = angleAxisModel.get('triggerEvent'); // Use length of ticksAngles because it may remove the last tick to avoid overlapping
  184. zrUtil.each(labels, function (labelItem, idx) {
  185. var labelModel = commonLabelModel;
  186. var tickValue = labelItem.tickValue;
  187. var r = radiusExtent[getRadiusIdx(polar)];
  188. var p = polar.coordToPoint([r + labelMargin, labelItem.coord]);
  189. var cx = polar.cx;
  190. var cy = polar.cy;
  191. var labelTextAlign = Math.abs(p[0] - cx) / r < 0.3 ? 'center' : p[0] > cx ? 'left' : 'right';
  192. var labelTextVerticalAlign = Math.abs(p[1] - cy) / r < 0.3 ? 'middle' : p[1] > cy ? 'top' : 'bottom';
  193. if (rawCategoryData && rawCategoryData[tickValue]) {
  194. var rawCategoryItem = rawCategoryData[tickValue];
  195. if (zrUtil.isObject(rawCategoryItem) && rawCategoryItem.textStyle) {
  196. labelModel = new Model(rawCategoryItem.textStyle, commonLabelModel, commonLabelModel.ecModel);
  197. }
  198. }
  199. var textEl = new graphic.Text({
  200. silent: AxisBuilder.isLabelSilent(angleAxisModel),
  201. style: createTextStyle(labelModel, {
  202. x: p[0],
  203. y: p[1],
  204. fill: labelModel.getTextColor() || angleAxisModel.get(['axisLine', 'lineStyle', 'color']),
  205. text: labelItem.formattedLabel,
  206. align: labelTextAlign,
  207. verticalAlign: labelTextVerticalAlign
  208. })
  209. });
  210. group.add(textEl); // Pack data for mouse event
  211. if (triggerEvent) {
  212. var eventData = AxisBuilder.makeAxisEventDataBase(angleAxisModel);
  213. eventData.targetType = 'axisLabel';
  214. eventData.value = labelItem.rawLabel;
  215. getECData(textEl).eventData = eventData;
  216. }
  217. }, this);
  218. },
  219. splitLine: function (group, angleAxisModel, polar, ticksAngles, minorTickAngles, radiusExtent) {
  220. var splitLineModel = angleAxisModel.getModel('splitLine');
  221. var lineStyleModel = splitLineModel.getModel('lineStyle');
  222. var lineColors = lineStyleModel.get('color');
  223. var lineCount = 0;
  224. lineColors = lineColors instanceof Array ? lineColors : [lineColors];
  225. var splitLines = [];
  226. for (var i = 0; i < ticksAngles.length; i++) {
  227. var colorIndex = lineCount++ % lineColors.length;
  228. splitLines[colorIndex] = splitLines[colorIndex] || [];
  229. splitLines[colorIndex].push(new graphic.Line({
  230. shape: getAxisLineShape(polar, radiusExtent, ticksAngles[i].coord)
  231. }));
  232. } // Simple optimization
  233. // Batching the lines if color are the same
  234. for (var i = 0; i < splitLines.length; i++) {
  235. group.add(graphic.mergePath(splitLines[i], {
  236. style: zrUtil.defaults({
  237. stroke: lineColors[i % lineColors.length]
  238. }, lineStyleModel.getLineStyle()),
  239. silent: true,
  240. z: angleAxisModel.get('z')
  241. }));
  242. }
  243. },
  244. minorSplitLine: function (group, angleAxisModel, polar, ticksAngles, minorTickAngles, radiusExtent) {
  245. if (!minorTickAngles.length) {
  246. return;
  247. }
  248. var minorSplitLineModel = angleAxisModel.getModel('minorSplitLine');
  249. var lineStyleModel = minorSplitLineModel.getModel('lineStyle');
  250. var lines = [];
  251. for (var i = 0; i < minorTickAngles.length; i++) {
  252. for (var k = 0; k < minorTickAngles[i].length; k++) {
  253. lines.push(new graphic.Line({
  254. shape: getAxisLineShape(polar, radiusExtent, minorTickAngles[i][k].coord)
  255. }));
  256. }
  257. }
  258. group.add(graphic.mergePath(lines, {
  259. style: lineStyleModel.getLineStyle(),
  260. silent: true,
  261. z: angleAxisModel.get('z')
  262. }));
  263. },
  264. splitArea: function (group, angleAxisModel, polar, ticksAngles, minorTickAngles, radiusExtent) {
  265. if (!ticksAngles.length) {
  266. return;
  267. }
  268. var splitAreaModel = angleAxisModel.getModel('splitArea');
  269. var areaStyleModel = splitAreaModel.getModel('areaStyle');
  270. var areaColors = areaStyleModel.get('color');
  271. var lineCount = 0;
  272. areaColors = areaColors instanceof Array ? areaColors : [areaColors];
  273. var splitAreas = [];
  274. var RADIAN = Math.PI / 180;
  275. var prevAngle = -ticksAngles[0].coord * RADIAN;
  276. var r0 = Math.min(radiusExtent[0], radiusExtent[1]);
  277. var r1 = Math.max(radiusExtent[0], radiusExtent[1]);
  278. var clockwise = angleAxisModel.get('clockwise');
  279. for (var i = 1, len = ticksAngles.length; i <= len; i++) {
  280. var coord = i === len ? ticksAngles[0].coord : ticksAngles[i].coord;
  281. var colorIndex = lineCount++ % areaColors.length;
  282. splitAreas[colorIndex] = splitAreas[colorIndex] || [];
  283. splitAreas[colorIndex].push(new graphic.Sector({
  284. shape: {
  285. cx: polar.cx,
  286. cy: polar.cy,
  287. r0: r0,
  288. r: r1,
  289. startAngle: prevAngle,
  290. endAngle: -coord * RADIAN,
  291. clockwise: clockwise
  292. },
  293. silent: true
  294. }));
  295. prevAngle = -coord * RADIAN;
  296. } // Simple optimization
  297. // Batching the lines if color are the same
  298. for (var i = 0; i < splitAreas.length; i++) {
  299. group.add(graphic.mergePath(splitAreas[i], {
  300. style: zrUtil.defaults({
  301. fill: areaColors[i % areaColors.length]
  302. }, areaStyleModel.getAreaStyle()),
  303. silent: true
  304. }));
  305. }
  306. }
  307. };
  308. export default AngleAxisView;