RadarView.js 6.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208
  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. var _config = require("../../config");
  20. var __DEV__ = _config.__DEV__;
  21. var echarts = require("../../echarts");
  22. var zrUtil = require("zrender/lib/core/util");
  23. var AxisBuilder = require("../axis/AxisBuilder");
  24. var graphic = require("../../util/graphic");
  25. /*
  26. * Licensed to the Apache Software Foundation (ASF) under one
  27. * or more contributor license agreements. See the NOTICE file
  28. * distributed with this work for additional information
  29. * regarding copyright ownership. The ASF licenses this file
  30. * to you under the Apache License, Version 2.0 (the
  31. * "License"); you may not use this file except in compliance
  32. * with the License. You may obtain a copy of the License at
  33. *
  34. * http://www.apache.org/licenses/LICENSE-2.0
  35. *
  36. * Unless required by applicable law or agreed to in writing,
  37. * software distributed under the License is distributed on an
  38. * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  39. * KIND, either express or implied. See the License for the
  40. * specific language governing permissions and limitations
  41. * under the License.
  42. */
  43. var axisBuilderAttrs = ['axisLine', 'axisTickLabel', 'axisName'];
  44. var _default = echarts.extendComponentView({
  45. type: 'radar',
  46. render: function (radarModel, ecModel, api) {
  47. var group = this.group;
  48. group.removeAll();
  49. this._buildAxes(radarModel);
  50. this._buildSplitLineAndArea(radarModel);
  51. },
  52. _buildAxes: function (radarModel) {
  53. var radar = radarModel.coordinateSystem;
  54. var indicatorAxes = radar.getIndicatorAxes();
  55. var axisBuilders = zrUtil.map(indicatorAxes, function (indicatorAxis) {
  56. var axisBuilder = new AxisBuilder(indicatorAxis.model, {
  57. position: [radar.cx, radar.cy],
  58. rotation: indicatorAxis.angle,
  59. labelDirection: -1,
  60. tickDirection: -1,
  61. nameDirection: 1
  62. });
  63. return axisBuilder;
  64. });
  65. zrUtil.each(axisBuilders, function (axisBuilder) {
  66. zrUtil.each(axisBuilderAttrs, axisBuilder.add, axisBuilder);
  67. this.group.add(axisBuilder.getGroup());
  68. }, this);
  69. },
  70. _buildSplitLineAndArea: function (radarModel) {
  71. var radar = radarModel.coordinateSystem;
  72. var indicatorAxes = radar.getIndicatorAxes();
  73. if (!indicatorAxes.length) {
  74. return;
  75. }
  76. var shape = radarModel.get('shape');
  77. var splitLineModel = radarModel.getModel('splitLine');
  78. var splitAreaModel = radarModel.getModel('splitArea');
  79. var lineStyleModel = splitLineModel.getModel('lineStyle');
  80. var areaStyleModel = splitAreaModel.getModel('areaStyle');
  81. var showSplitLine = splitLineModel.get('show');
  82. var showSplitArea = splitAreaModel.get('show');
  83. var splitLineColors = lineStyleModel.get('color');
  84. var splitAreaColors = areaStyleModel.get('color');
  85. splitLineColors = zrUtil.isArray(splitLineColors) ? splitLineColors : [splitLineColors];
  86. splitAreaColors = zrUtil.isArray(splitAreaColors) ? splitAreaColors : [splitAreaColors];
  87. var splitLines = [];
  88. var splitAreas = [];
  89. function getColorIndex(areaOrLine, areaOrLineColorList, idx) {
  90. var colorIndex = idx % areaOrLineColorList.length;
  91. areaOrLine[colorIndex] = areaOrLine[colorIndex] || [];
  92. return colorIndex;
  93. }
  94. if (shape === 'circle') {
  95. var ticksRadius = indicatorAxes[0].getTicksCoords();
  96. var cx = radar.cx;
  97. var cy = radar.cy;
  98. for (var i = 0; i < ticksRadius.length; i++) {
  99. if (showSplitLine) {
  100. var colorIndex = getColorIndex(splitLines, splitLineColors, i);
  101. splitLines[colorIndex].push(new graphic.Circle({
  102. shape: {
  103. cx: cx,
  104. cy: cy,
  105. r: ticksRadius[i].coord
  106. }
  107. }));
  108. }
  109. if (showSplitArea && i < ticksRadius.length - 1) {
  110. var colorIndex = getColorIndex(splitAreas, splitAreaColors, i);
  111. splitAreas[colorIndex].push(new graphic.Ring({
  112. shape: {
  113. cx: cx,
  114. cy: cy,
  115. r0: ticksRadius[i].coord,
  116. r: ticksRadius[i + 1].coord
  117. }
  118. }));
  119. }
  120. }
  121. } // Polyyon
  122. else {
  123. var realSplitNumber;
  124. var axesTicksPoints = zrUtil.map(indicatorAxes, function (indicatorAxis, idx) {
  125. var ticksCoords = indicatorAxis.getTicksCoords();
  126. realSplitNumber = realSplitNumber == null ? ticksCoords.length - 1 : Math.min(ticksCoords.length - 1, realSplitNumber);
  127. return zrUtil.map(ticksCoords, function (tickCoord) {
  128. return radar.coordToPoint(tickCoord.coord, idx);
  129. });
  130. });
  131. var prevPoints = [];
  132. for (var i = 0; i <= realSplitNumber; i++) {
  133. var points = [];
  134. for (var j = 0; j < indicatorAxes.length; j++) {
  135. points.push(axesTicksPoints[j][i]);
  136. } // Close
  137. if (points[0]) {
  138. points.push(points[0].slice());
  139. } else {}
  140. if (showSplitLine) {
  141. var colorIndex = getColorIndex(splitLines, splitLineColors, i);
  142. splitLines[colorIndex].push(new graphic.Polyline({
  143. shape: {
  144. points: points
  145. }
  146. }));
  147. }
  148. if (showSplitArea && prevPoints) {
  149. var colorIndex = getColorIndex(splitAreas, splitAreaColors, i - 1);
  150. splitAreas[colorIndex].push(new graphic.Polygon({
  151. shape: {
  152. points: points.concat(prevPoints)
  153. }
  154. }));
  155. }
  156. prevPoints = points.slice().reverse();
  157. }
  158. }
  159. var lineStyle = lineStyleModel.getLineStyle();
  160. var areaStyle = areaStyleModel.getAreaStyle(); // Add splitArea before splitLine
  161. zrUtil.each(splitAreas, function (splitAreas, idx) {
  162. this.group.add(graphic.mergePath(splitAreas, {
  163. style: zrUtil.defaults({
  164. stroke: 'none',
  165. fill: splitAreaColors[idx % splitAreaColors.length]
  166. }, areaStyle),
  167. silent: true
  168. }));
  169. }, this);
  170. zrUtil.each(splitLines, function (splitLines, idx) {
  171. this.group.add(graphic.mergePath(splitLines, {
  172. style: zrUtil.defaults({
  173. fill: 'none',
  174. stroke: splitLineColors[idx % splitLineColors.length]
  175. }, lineStyle),
  176. silent: true
  177. }));
  178. }, this);
  179. }
  180. });
  181. module.exports = _default;