RadarView.js 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170
  1. var _config = require("../../config");
  2. var __DEV__ = _config.__DEV__;
  3. var echarts = require("../../echarts");
  4. var zrUtil = require("zrender/lib/core/util");
  5. var AxisBuilder = require("../axis/AxisBuilder");
  6. var graphic = require("../../util/graphic");
  7. var axisBuilderAttrs = ['axisLine', 'axisTickLabel', 'axisName'];
  8. var _default = echarts.extendComponentView({
  9. type: 'radar',
  10. render: function (radarModel, ecModel, api) {
  11. var group = this.group;
  12. group.removeAll();
  13. this._buildAxes(radarModel);
  14. this._buildSplitLineAndArea(radarModel);
  15. },
  16. _buildAxes: function (radarModel) {
  17. var radar = radarModel.coordinateSystem;
  18. var indicatorAxes = radar.getIndicatorAxes();
  19. var axisBuilders = zrUtil.map(indicatorAxes, function (indicatorAxis) {
  20. var axisBuilder = new AxisBuilder(indicatorAxis.model, {
  21. position: [radar.cx, radar.cy],
  22. rotation: indicatorAxis.angle,
  23. labelDirection: -1,
  24. tickDirection: -1,
  25. nameDirection: 1
  26. });
  27. return axisBuilder;
  28. });
  29. zrUtil.each(axisBuilders, function (axisBuilder) {
  30. zrUtil.each(axisBuilderAttrs, axisBuilder.add, axisBuilder);
  31. this.group.add(axisBuilder.getGroup());
  32. }, this);
  33. },
  34. _buildSplitLineAndArea: function (radarModel) {
  35. var radar = radarModel.coordinateSystem;
  36. var indicatorAxes = radar.getIndicatorAxes();
  37. if (!indicatorAxes.length) {
  38. return;
  39. }
  40. var shape = radarModel.get('shape');
  41. var splitLineModel = radarModel.getModel('splitLine');
  42. var splitAreaModel = radarModel.getModel('splitArea');
  43. var lineStyleModel = splitLineModel.getModel('lineStyle');
  44. var areaStyleModel = splitAreaModel.getModel('areaStyle');
  45. var showSplitLine = splitLineModel.get('show');
  46. var showSplitArea = splitAreaModel.get('show');
  47. var splitLineColors = lineStyleModel.get('color');
  48. var splitAreaColors = areaStyleModel.get('color');
  49. splitLineColors = zrUtil.isArray(splitLineColors) ? splitLineColors : [splitLineColors];
  50. splitAreaColors = zrUtil.isArray(splitAreaColors) ? splitAreaColors : [splitAreaColors];
  51. var splitLines = [];
  52. var splitAreas = [];
  53. function getColorIndex(areaOrLine, areaOrLineColorList, idx) {
  54. var colorIndex = idx % areaOrLineColorList.length;
  55. areaOrLine[colorIndex] = areaOrLine[colorIndex] || [];
  56. return colorIndex;
  57. }
  58. if (shape === 'circle') {
  59. var ticksRadius = indicatorAxes[0].getTicksCoords();
  60. var cx = radar.cx;
  61. var cy = radar.cy;
  62. for (var i = 0; i < ticksRadius.length; i++) {
  63. if (showSplitLine) {
  64. var colorIndex = getColorIndex(splitLines, splitLineColors, i);
  65. splitLines[colorIndex].push(new graphic.Circle({
  66. shape: {
  67. cx: cx,
  68. cy: cy,
  69. r: ticksRadius[i]
  70. }
  71. }));
  72. }
  73. if (showSplitArea && i < ticksRadius.length - 1) {
  74. var colorIndex = getColorIndex(splitAreas, splitAreaColors, i);
  75. splitAreas[colorIndex].push(new graphic.Ring({
  76. shape: {
  77. cx: cx,
  78. cy: cy,
  79. r0: ticksRadius[i],
  80. r: ticksRadius[i + 1]
  81. }
  82. }));
  83. }
  84. }
  85. } // Polyyon
  86. else {
  87. var realSplitNumber;
  88. var axesTicksPoints = zrUtil.map(indicatorAxes, function (indicatorAxis, idx) {
  89. var ticksCoords = indicatorAxis.getTicksCoords();
  90. realSplitNumber = realSplitNumber == null ? ticksCoords.length - 1 : Math.min(ticksCoords.length - 1, realSplitNumber);
  91. return zrUtil.map(ticksCoords, function (tickCoord) {
  92. return radar.coordToPoint(tickCoord, idx);
  93. });
  94. });
  95. var prevPoints = [];
  96. for (var i = 0; i <= realSplitNumber; i++) {
  97. var points = [];
  98. for (var j = 0; j < indicatorAxes.length; j++) {
  99. points.push(axesTicksPoints[j][i]);
  100. } // Close
  101. if (points[0]) {
  102. points.push(points[0].slice());
  103. } else {}
  104. if (showSplitLine) {
  105. var colorIndex = getColorIndex(splitLines, splitLineColors, i);
  106. splitLines[colorIndex].push(new graphic.Polyline({
  107. shape: {
  108. points: points
  109. }
  110. }));
  111. }
  112. if (showSplitArea && prevPoints) {
  113. var colorIndex = getColorIndex(splitAreas, splitAreaColors, i - 1);
  114. splitAreas[colorIndex].push(new graphic.Polygon({
  115. shape: {
  116. points: points.concat(prevPoints)
  117. }
  118. }));
  119. }
  120. prevPoints = points.slice().reverse();
  121. }
  122. }
  123. var lineStyle = lineStyleModel.getLineStyle();
  124. var areaStyle = areaStyleModel.getAreaStyle(); // Add splitArea before splitLine
  125. zrUtil.each(splitAreas, function (splitAreas, idx) {
  126. this.group.add(graphic.mergePath(splitAreas, {
  127. style: zrUtil.defaults({
  128. stroke: 'none',
  129. fill: splitAreaColors[idx % splitAreaColors.length]
  130. }, areaStyle),
  131. silent: true
  132. }));
  133. }, this);
  134. zrUtil.each(splitLines, function (splitLines, idx) {
  135. this.group.add(graphic.mergePath(splitLines, {
  136. style: zrUtil.defaults({
  137. fill: 'none',
  138. stroke: splitLineColors[idx % splitLineColors.length]
  139. }, lineStyle),
  140. silent: true
  141. }));
  142. }, this);
  143. }
  144. });
  145. module.exports = _default;