RadarView.js 7.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203
  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 AxisBuilder from '../axis/AxisBuilder.js';
  43. import * as graphic from '../../util/graphic.js';
  44. import ComponentView from '../../view/Component.js';
  45. var axisBuilderAttrs = ['axisLine', 'axisTickLabel', 'axisName'];
  46. var RadarView = /** @class */function (_super) {
  47. __extends(RadarView, _super);
  48. function RadarView() {
  49. var _this = _super !== null && _super.apply(this, arguments) || this;
  50. _this.type = RadarView.type;
  51. return _this;
  52. }
  53. RadarView.prototype.render = function (radarModel, ecModel, api) {
  54. var group = this.group;
  55. group.removeAll();
  56. this._buildAxes(radarModel);
  57. this._buildSplitLineAndArea(radarModel);
  58. };
  59. RadarView.prototype._buildAxes = function (radarModel) {
  60. var radar = radarModel.coordinateSystem;
  61. var indicatorAxes = radar.getIndicatorAxes();
  62. var axisBuilders = zrUtil.map(indicatorAxes, function (indicatorAxis) {
  63. var axisName = indicatorAxis.model.get('showName') ? indicatorAxis.name : ''; // hide name
  64. var axisBuilder = new AxisBuilder(indicatorAxis.model, {
  65. axisName: axisName,
  66. position: [radar.cx, radar.cy],
  67. rotation: indicatorAxis.angle,
  68. labelDirection: -1,
  69. tickDirection: -1,
  70. nameDirection: 1
  71. });
  72. return axisBuilder;
  73. });
  74. zrUtil.each(axisBuilders, function (axisBuilder) {
  75. zrUtil.each(axisBuilderAttrs, axisBuilder.add, axisBuilder);
  76. this.group.add(axisBuilder.getGroup());
  77. }, this);
  78. };
  79. RadarView.prototype._buildSplitLineAndArea = function (radarModel) {
  80. var radar = radarModel.coordinateSystem;
  81. var indicatorAxes = radar.getIndicatorAxes();
  82. if (!indicatorAxes.length) {
  83. return;
  84. }
  85. var shape = radarModel.get('shape');
  86. var splitLineModel = radarModel.getModel('splitLine');
  87. var splitAreaModel = radarModel.getModel('splitArea');
  88. var lineStyleModel = splitLineModel.getModel('lineStyle');
  89. var areaStyleModel = splitAreaModel.getModel('areaStyle');
  90. var showSplitLine = splitLineModel.get('show');
  91. var showSplitArea = splitAreaModel.get('show');
  92. var splitLineColors = lineStyleModel.get('color');
  93. var splitAreaColors = areaStyleModel.get('color');
  94. var splitLineColorsArr = zrUtil.isArray(splitLineColors) ? splitLineColors : [splitLineColors];
  95. var splitAreaColorsArr = zrUtil.isArray(splitAreaColors) ? splitAreaColors : [splitAreaColors];
  96. var splitLines = [];
  97. var splitAreas = [];
  98. function getColorIndex(areaOrLine, areaOrLineColorList, idx) {
  99. var colorIndex = idx % areaOrLineColorList.length;
  100. areaOrLine[colorIndex] = areaOrLine[colorIndex] || [];
  101. return colorIndex;
  102. }
  103. if (shape === 'circle') {
  104. var ticksRadius = indicatorAxes[0].getTicksCoords();
  105. var cx = radar.cx;
  106. var cy = radar.cy;
  107. for (var i = 0; i < ticksRadius.length; i++) {
  108. if (showSplitLine) {
  109. var colorIndex = getColorIndex(splitLines, splitLineColorsArr, i);
  110. splitLines[colorIndex].push(new graphic.Circle({
  111. shape: {
  112. cx: cx,
  113. cy: cy,
  114. r: ticksRadius[i].coord
  115. }
  116. }));
  117. }
  118. if (showSplitArea && i < ticksRadius.length - 1) {
  119. var colorIndex = getColorIndex(splitAreas, splitAreaColorsArr, i);
  120. splitAreas[colorIndex].push(new graphic.Ring({
  121. shape: {
  122. cx: cx,
  123. cy: cy,
  124. r0: ticksRadius[i].coord,
  125. r: ticksRadius[i + 1].coord
  126. }
  127. }));
  128. }
  129. }
  130. }
  131. // Polyyon
  132. else {
  133. var realSplitNumber_1;
  134. var axesTicksPoints = zrUtil.map(indicatorAxes, function (indicatorAxis, idx) {
  135. var ticksCoords = indicatorAxis.getTicksCoords();
  136. realSplitNumber_1 = realSplitNumber_1 == null ? ticksCoords.length - 1 : Math.min(ticksCoords.length - 1, realSplitNumber_1);
  137. return zrUtil.map(ticksCoords, function (tickCoord) {
  138. return radar.coordToPoint(tickCoord.coord, idx);
  139. });
  140. });
  141. var prevPoints = [];
  142. for (var i = 0; i <= realSplitNumber_1; i++) {
  143. var points = [];
  144. for (var j = 0; j < indicatorAxes.length; j++) {
  145. points.push(axesTicksPoints[j][i]);
  146. }
  147. // Close
  148. if (points[0]) {
  149. points.push(points[0].slice());
  150. } else {
  151. if (process.env.NODE_ENV !== 'production') {
  152. console.error('Can\'t draw value axis ' + i);
  153. }
  154. }
  155. if (showSplitLine) {
  156. var colorIndex = getColorIndex(splitLines, splitLineColorsArr, i);
  157. splitLines[colorIndex].push(new graphic.Polyline({
  158. shape: {
  159. points: points
  160. }
  161. }));
  162. }
  163. if (showSplitArea && prevPoints) {
  164. var colorIndex = getColorIndex(splitAreas, splitAreaColorsArr, i - 1);
  165. splitAreas[colorIndex].push(new graphic.Polygon({
  166. shape: {
  167. points: points.concat(prevPoints)
  168. }
  169. }));
  170. }
  171. prevPoints = points.slice().reverse();
  172. }
  173. }
  174. var lineStyle = lineStyleModel.getLineStyle();
  175. var areaStyle = areaStyleModel.getAreaStyle();
  176. // Add splitArea before splitLine
  177. zrUtil.each(splitAreas, function (splitAreas, idx) {
  178. this.group.add(graphic.mergePath(splitAreas, {
  179. style: zrUtil.defaults({
  180. stroke: 'none',
  181. fill: splitAreaColorsArr[idx % splitAreaColorsArr.length]
  182. }, areaStyle),
  183. silent: true
  184. }));
  185. }, this);
  186. zrUtil.each(splitLines, function (splitLines, idx) {
  187. this.group.add(graphic.mergePath(splitLines, {
  188. style: zrUtil.defaults({
  189. fill: 'none',
  190. stroke: splitLineColorsArr[idx % splitLineColorsArr.length]
  191. }, lineStyle),
  192. silent: true
  193. }));
  194. }, this);
  195. };
  196. RadarView.type = 'radar';
  197. return RadarView;
  198. }(ComponentView);
  199. export default RadarView;