RadarView.js 6.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183
  1. var echarts = require("../../echarts");
  2. var graphic = require("../../util/graphic");
  3. var zrUtil = require("zrender/lib/core/util");
  4. var symbolUtil = require("../../util/symbol");
  5. function normalizeSymbolSize(symbolSize) {
  6. if (!zrUtil.isArray(symbolSize)) {
  7. symbolSize = [+symbolSize, +symbolSize];
  8. }
  9. return symbolSize;
  10. }
  11. var _default = echarts.extendChartView({
  12. type: 'radar',
  13. render: function (seriesModel, ecModel, api) {
  14. var polar = seriesModel.coordinateSystem;
  15. var group = this.group;
  16. var data = seriesModel.getData();
  17. var oldData = this._data;
  18. function createSymbol(data, idx) {
  19. var symbolType = data.getItemVisual(idx, 'symbol') || 'circle';
  20. var color = data.getItemVisual(idx, 'color');
  21. if (symbolType === 'none') {
  22. return;
  23. }
  24. var symbolSize = normalizeSymbolSize(data.getItemVisual(idx, 'symbolSize'));
  25. var symbolPath = symbolUtil.createSymbol(symbolType, -1, -1, 2, 2, color);
  26. symbolPath.attr({
  27. style: {
  28. strokeNoScale: true
  29. },
  30. z2: 100,
  31. scale: [symbolSize[0] / 2, symbolSize[1] / 2]
  32. });
  33. return symbolPath;
  34. }
  35. function updateSymbols(oldPoints, newPoints, symbolGroup, data, idx, isInit) {
  36. // Simply rerender all
  37. symbolGroup.removeAll();
  38. for (var i = 0; i < newPoints.length - 1; i++) {
  39. var symbolPath = createSymbol(data, idx);
  40. if (symbolPath) {
  41. symbolPath.__dimIdx = i;
  42. if (oldPoints[i]) {
  43. symbolPath.attr('position', oldPoints[i]);
  44. graphic[isInit ? 'initProps' : 'updateProps'](symbolPath, {
  45. position: newPoints[i]
  46. }, seriesModel, idx);
  47. } else {
  48. symbolPath.attr('position', newPoints[i]);
  49. }
  50. symbolGroup.add(symbolPath);
  51. }
  52. }
  53. }
  54. function getInitialPoints(points) {
  55. return zrUtil.map(points, function (pt) {
  56. return [polar.cx, polar.cy];
  57. });
  58. }
  59. data.diff(oldData).add(function (idx) {
  60. var points = data.getItemLayout(idx);
  61. if (!points) {
  62. return;
  63. }
  64. var polygon = new graphic.Polygon();
  65. var polyline = new graphic.Polyline();
  66. var target = {
  67. shape: {
  68. points: points
  69. }
  70. };
  71. polygon.shape.points = getInitialPoints(points);
  72. polyline.shape.points = getInitialPoints(points);
  73. graphic.initProps(polygon, target, seriesModel, idx);
  74. graphic.initProps(polyline, target, seriesModel, idx);
  75. var itemGroup = new graphic.Group();
  76. var symbolGroup = new graphic.Group();
  77. itemGroup.add(polyline);
  78. itemGroup.add(polygon);
  79. itemGroup.add(symbolGroup);
  80. updateSymbols(polyline.shape.points, points, symbolGroup, data, idx, true);
  81. data.setItemGraphicEl(idx, itemGroup);
  82. }).update(function (newIdx, oldIdx) {
  83. var itemGroup = oldData.getItemGraphicEl(oldIdx);
  84. var polyline = itemGroup.childAt(0);
  85. var polygon = itemGroup.childAt(1);
  86. var symbolGroup = itemGroup.childAt(2);
  87. var target = {
  88. shape: {
  89. points: data.getItemLayout(newIdx)
  90. }
  91. };
  92. if (!target.shape.points) {
  93. return;
  94. }
  95. updateSymbols(polyline.shape.points, target.shape.points, symbolGroup, data, newIdx, false);
  96. graphic.updateProps(polyline, target, seriesModel);
  97. graphic.updateProps(polygon, target, seriesModel);
  98. data.setItemGraphicEl(newIdx, itemGroup);
  99. }).remove(function (idx) {
  100. group.remove(oldData.getItemGraphicEl(idx));
  101. }).execute();
  102. data.eachItemGraphicEl(function (itemGroup, idx) {
  103. var itemModel = data.getItemModel(idx);
  104. var polyline = itemGroup.childAt(0);
  105. var polygon = itemGroup.childAt(1);
  106. var symbolGroup = itemGroup.childAt(2);
  107. var color = data.getItemVisual(idx, 'color');
  108. group.add(itemGroup);
  109. polyline.useStyle(zrUtil.defaults(itemModel.getModel('lineStyle.normal').getLineStyle(), {
  110. fill: 'none',
  111. stroke: color
  112. }));
  113. polyline.hoverStyle = itemModel.getModel('lineStyle.emphasis').getLineStyle();
  114. var areaStyleModel = itemModel.getModel('areaStyle.normal');
  115. var hoverAreaStyleModel = itemModel.getModel('areaStyle.emphasis');
  116. var polygonIgnore = areaStyleModel.isEmpty() && areaStyleModel.parentModel.isEmpty();
  117. var hoverPolygonIgnore = hoverAreaStyleModel.isEmpty() && hoverAreaStyleModel.parentModel.isEmpty();
  118. hoverPolygonIgnore = hoverPolygonIgnore && polygonIgnore;
  119. polygon.ignore = polygonIgnore;
  120. polygon.useStyle(zrUtil.defaults(areaStyleModel.getAreaStyle(), {
  121. fill: color,
  122. opacity: 0.7
  123. }));
  124. polygon.hoverStyle = hoverAreaStyleModel.getAreaStyle();
  125. var itemStyle = itemModel.getModel('itemStyle.normal').getItemStyle(['color']);
  126. var itemHoverStyle = itemModel.getModel('itemStyle.emphasis').getItemStyle();
  127. var labelModel = itemModel.getModel('label.normal');
  128. var labelHoverModel = itemModel.getModel('label.emphasis');
  129. symbolGroup.eachChild(function (symbolPath) {
  130. symbolPath.setStyle(itemStyle);
  131. symbolPath.hoverStyle = zrUtil.clone(itemHoverStyle);
  132. graphic.setLabelStyle(symbolPath.style, symbolPath.hoverStyle, labelModel, labelHoverModel, {
  133. labelFetcher: data.hostModel,
  134. labelDataIndex: idx,
  135. labelDimIndex: symbolPath.__dimIdx,
  136. defaultText: data.get(data.dimensions[symbolPath.__dimIdx], idx),
  137. autoColor: color,
  138. isRectText: true
  139. });
  140. });
  141. function onEmphasis() {
  142. polygon.attr('ignore', hoverPolygonIgnore);
  143. }
  144. function onNormal() {
  145. polygon.attr('ignore', polygonIgnore);
  146. }
  147. itemGroup.off('mouseover').off('mouseout').off('normal').off('emphasis');
  148. itemGroup.on('emphasis', onEmphasis).on('mouseover', onEmphasis).on('normal', onNormal).on('mouseout', onNormal);
  149. graphic.setHoverStyle(itemGroup);
  150. });
  151. this._data = data;
  152. },
  153. remove: function () {
  154. this.group.removeAll();
  155. this._data = null;
  156. },
  157. dispose: function () {}
  158. });
  159. module.exports = _default;