RadarView.js 7.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217
  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 echarts = require("../../echarts");
  20. var graphic = require("../../util/graphic");
  21. var zrUtil = require("zrender/lib/core/util");
  22. var symbolUtil = require("../../util/symbol");
  23. /*
  24. * Licensed to the Apache Software Foundation (ASF) under one
  25. * or more contributor license agreements. See the NOTICE file
  26. * distributed with this work for additional information
  27. * regarding copyright ownership. The ASF licenses this file
  28. * to you under the Apache License, Version 2.0 (the
  29. * "License"); you may not use this file except in compliance
  30. * with the License. You may obtain a copy of the License at
  31. *
  32. * http://www.apache.org/licenses/LICENSE-2.0
  33. *
  34. * Unless required by applicable law or agreed to in writing,
  35. * software distributed under the License is distributed on an
  36. * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  37. * KIND, either express or implied. See the License for the
  38. * specific language governing permissions and limitations
  39. * under the License.
  40. */
  41. function normalizeSymbolSize(symbolSize) {
  42. if (!zrUtil.isArray(symbolSize)) {
  43. symbolSize = [+symbolSize, +symbolSize];
  44. }
  45. return symbolSize;
  46. }
  47. var _default = echarts.extendChartView({
  48. type: 'radar',
  49. render: function (seriesModel, ecModel, api) {
  50. var polar = seriesModel.coordinateSystem;
  51. var group = this.group;
  52. var data = seriesModel.getData();
  53. var oldData = this._data;
  54. function createSymbol(data, idx) {
  55. var symbolType = data.getItemVisual(idx, 'symbol') || 'circle';
  56. var color = data.getItemVisual(idx, 'color');
  57. if (symbolType === 'none') {
  58. return;
  59. }
  60. var symbolSize = normalizeSymbolSize(data.getItemVisual(idx, 'symbolSize'));
  61. var symbolPath = symbolUtil.createSymbol(symbolType, -1, -1, 2, 2, color);
  62. symbolPath.attr({
  63. style: {
  64. strokeNoScale: true
  65. },
  66. z2: 100,
  67. scale: [symbolSize[0] / 2, symbolSize[1] / 2]
  68. });
  69. return symbolPath;
  70. }
  71. function updateSymbols(oldPoints, newPoints, symbolGroup, data, idx, isInit) {
  72. // Simply rerender all
  73. symbolGroup.removeAll();
  74. for (var i = 0; i < newPoints.length - 1; i++) {
  75. var symbolPath = createSymbol(data, idx);
  76. if (symbolPath) {
  77. symbolPath.__dimIdx = i;
  78. if (oldPoints[i]) {
  79. symbolPath.attr('position', oldPoints[i]);
  80. graphic[isInit ? 'initProps' : 'updateProps'](symbolPath, {
  81. position: newPoints[i]
  82. }, seriesModel, idx);
  83. } else {
  84. symbolPath.attr('position', newPoints[i]);
  85. }
  86. symbolGroup.add(symbolPath);
  87. }
  88. }
  89. }
  90. function getInitialPoints(points) {
  91. return zrUtil.map(points, function (pt) {
  92. return [polar.cx, polar.cy];
  93. });
  94. }
  95. data.diff(oldData).add(function (idx) {
  96. var points = data.getItemLayout(idx);
  97. if (!points) {
  98. return;
  99. }
  100. var polygon = new graphic.Polygon();
  101. var polyline = new graphic.Polyline();
  102. var target = {
  103. shape: {
  104. points: points
  105. }
  106. };
  107. polygon.shape.points = getInitialPoints(points);
  108. polyline.shape.points = getInitialPoints(points);
  109. graphic.initProps(polygon, target, seriesModel, idx);
  110. graphic.initProps(polyline, target, seriesModel, idx);
  111. var itemGroup = new graphic.Group();
  112. var symbolGroup = new graphic.Group();
  113. itemGroup.add(polyline);
  114. itemGroup.add(polygon);
  115. itemGroup.add(symbolGroup);
  116. updateSymbols(polyline.shape.points, points, symbolGroup, data, idx, true);
  117. data.setItemGraphicEl(idx, itemGroup);
  118. }).update(function (newIdx, oldIdx) {
  119. var itemGroup = oldData.getItemGraphicEl(oldIdx);
  120. var polyline = itemGroup.childAt(0);
  121. var polygon = itemGroup.childAt(1);
  122. var symbolGroup = itemGroup.childAt(2);
  123. var target = {
  124. shape: {
  125. points: data.getItemLayout(newIdx)
  126. }
  127. };
  128. if (!target.shape.points) {
  129. return;
  130. }
  131. updateSymbols(polyline.shape.points, target.shape.points, symbolGroup, data, newIdx, false);
  132. graphic.updateProps(polyline, target, seriesModel);
  133. graphic.updateProps(polygon, target, seriesModel);
  134. data.setItemGraphicEl(newIdx, itemGroup);
  135. }).remove(function (idx) {
  136. group.remove(oldData.getItemGraphicEl(idx));
  137. }).execute();
  138. data.eachItemGraphicEl(function (itemGroup, idx) {
  139. var itemModel = data.getItemModel(idx);
  140. var polyline = itemGroup.childAt(0);
  141. var polygon = itemGroup.childAt(1);
  142. var symbolGroup = itemGroup.childAt(2);
  143. var color = data.getItemVisual(idx, 'color');
  144. group.add(itemGroup);
  145. polyline.useStyle(zrUtil.defaults(itemModel.getModel('lineStyle').getLineStyle(), {
  146. fill: 'none',
  147. stroke: color
  148. }));
  149. polyline.hoverStyle = itemModel.getModel('emphasis.lineStyle').getLineStyle();
  150. var areaStyleModel = itemModel.getModel('areaStyle');
  151. var hoverAreaStyleModel = itemModel.getModel('emphasis.areaStyle');
  152. var polygonIgnore = areaStyleModel.isEmpty() && areaStyleModel.parentModel.isEmpty();
  153. var hoverPolygonIgnore = hoverAreaStyleModel.isEmpty() && hoverAreaStyleModel.parentModel.isEmpty();
  154. hoverPolygonIgnore = hoverPolygonIgnore && polygonIgnore;
  155. polygon.ignore = polygonIgnore;
  156. polygon.useStyle(zrUtil.defaults(areaStyleModel.getAreaStyle(), {
  157. fill: color,
  158. opacity: 0.7
  159. }));
  160. polygon.hoverStyle = hoverAreaStyleModel.getAreaStyle();
  161. var itemStyle = itemModel.getModel('itemStyle').getItemStyle(['color']);
  162. var itemHoverStyle = itemModel.getModel('emphasis.itemStyle').getItemStyle();
  163. var labelModel = itemModel.getModel('label');
  164. var labelHoverModel = itemModel.getModel('emphasis.label');
  165. symbolGroup.eachChild(function (symbolPath) {
  166. symbolPath.setStyle(itemStyle);
  167. symbolPath.hoverStyle = zrUtil.clone(itemHoverStyle);
  168. var defaultText = data.get(data.dimensions[symbolPath.__dimIdx], idx);
  169. (defaultText == null || isNaN(defaultText)) && (defaultText = '');
  170. graphic.setLabelStyle(symbolPath.style, symbolPath.hoverStyle, labelModel, labelHoverModel, {
  171. labelFetcher: data.hostModel,
  172. labelDataIndex: idx,
  173. labelDimIndex: symbolPath.__dimIdx,
  174. defaultText: defaultText,
  175. autoColor: color,
  176. isRectText: true
  177. });
  178. });
  179. itemGroup.highDownOnUpdate = function (fromState, toState) {
  180. polygon.attr('ignore', toState === 'emphasis' ? hoverPolygonIgnore : polygonIgnore);
  181. };
  182. graphic.setHoverStyle(itemGroup);
  183. });
  184. this._data = data;
  185. },
  186. remove: function () {
  187. this.group.removeAll();
  188. this._data = null;
  189. },
  190. dispose: function () {}
  191. });
  192. module.exports = _default;