RadarView.js 7.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219
  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. var symbolRotate = data.getItemVisual(idx, 'symbolRotate') || 0;
  63. symbolPath.attr({
  64. style: {
  65. strokeNoScale: true
  66. },
  67. z2: 100,
  68. scale: [symbolSize[0] / 2, symbolSize[1] / 2],
  69. rotation: symbolRotate * Math.PI / 180 || 0
  70. });
  71. return symbolPath;
  72. }
  73. function updateSymbols(oldPoints, newPoints, symbolGroup, data, idx, isInit) {
  74. // Simply rerender all
  75. symbolGroup.removeAll();
  76. for (var i = 0; i < newPoints.length - 1; i++) {
  77. var symbolPath = createSymbol(data, idx);
  78. if (symbolPath) {
  79. symbolPath.__dimIdx = i;
  80. if (oldPoints[i]) {
  81. symbolPath.attr('position', oldPoints[i]);
  82. graphic[isInit ? 'initProps' : 'updateProps'](symbolPath, {
  83. position: newPoints[i]
  84. }, seriesModel, idx);
  85. } else {
  86. symbolPath.attr('position', newPoints[i]);
  87. }
  88. symbolGroup.add(symbolPath);
  89. }
  90. }
  91. }
  92. function getInitialPoints(points) {
  93. return zrUtil.map(points, function (pt) {
  94. return [polar.cx, polar.cy];
  95. });
  96. }
  97. data.diff(oldData).add(function (idx) {
  98. var points = data.getItemLayout(idx);
  99. if (!points) {
  100. return;
  101. }
  102. var polygon = new graphic.Polygon();
  103. var polyline = new graphic.Polyline();
  104. var target = {
  105. shape: {
  106. points: points
  107. }
  108. };
  109. polygon.shape.points = getInitialPoints(points);
  110. polyline.shape.points = getInitialPoints(points);
  111. graphic.initProps(polygon, target, seriesModel, idx);
  112. graphic.initProps(polyline, target, seriesModel, idx);
  113. var itemGroup = new graphic.Group();
  114. var symbolGroup = new graphic.Group();
  115. itemGroup.add(polyline);
  116. itemGroup.add(polygon);
  117. itemGroup.add(symbolGroup);
  118. updateSymbols(polyline.shape.points, points, symbolGroup, data, idx, true);
  119. data.setItemGraphicEl(idx, itemGroup);
  120. }).update(function (newIdx, oldIdx) {
  121. var itemGroup = oldData.getItemGraphicEl(oldIdx);
  122. var polyline = itemGroup.childAt(0);
  123. var polygon = itemGroup.childAt(1);
  124. var symbolGroup = itemGroup.childAt(2);
  125. var target = {
  126. shape: {
  127. points: data.getItemLayout(newIdx)
  128. }
  129. };
  130. if (!target.shape.points) {
  131. return;
  132. }
  133. updateSymbols(polyline.shape.points, target.shape.points, symbolGroup, data, newIdx, false);
  134. graphic.updateProps(polyline, target, seriesModel);
  135. graphic.updateProps(polygon, target, seriesModel);
  136. data.setItemGraphicEl(newIdx, itemGroup);
  137. }).remove(function (idx) {
  138. group.remove(oldData.getItemGraphicEl(idx));
  139. }).execute();
  140. data.eachItemGraphicEl(function (itemGroup, idx) {
  141. var itemModel = data.getItemModel(idx);
  142. var polyline = itemGroup.childAt(0);
  143. var polygon = itemGroup.childAt(1);
  144. var symbolGroup = itemGroup.childAt(2);
  145. var color = data.getItemVisual(idx, 'color');
  146. group.add(itemGroup);
  147. polyline.useStyle(zrUtil.defaults(itemModel.getModel('lineStyle').getLineStyle(), {
  148. fill: 'none',
  149. stroke: color
  150. }));
  151. polyline.hoverStyle = itemModel.getModel('emphasis.lineStyle').getLineStyle();
  152. var areaStyleModel = itemModel.getModel('areaStyle');
  153. var hoverAreaStyleModel = itemModel.getModel('emphasis.areaStyle');
  154. var polygonIgnore = areaStyleModel.isEmpty() && areaStyleModel.parentModel.isEmpty();
  155. var hoverPolygonIgnore = hoverAreaStyleModel.isEmpty() && hoverAreaStyleModel.parentModel.isEmpty();
  156. hoverPolygonIgnore = hoverPolygonIgnore && polygonIgnore;
  157. polygon.ignore = polygonIgnore;
  158. polygon.useStyle(zrUtil.defaults(areaStyleModel.getAreaStyle(), {
  159. fill: color,
  160. opacity: 0.7
  161. }));
  162. polygon.hoverStyle = hoverAreaStyleModel.getAreaStyle();
  163. var itemStyle = itemModel.getModel('itemStyle').getItemStyle(['color']);
  164. var itemHoverStyle = itemModel.getModel('emphasis.itemStyle').getItemStyle();
  165. var labelModel = itemModel.getModel('label');
  166. var labelHoverModel = itemModel.getModel('emphasis.label');
  167. symbolGroup.eachChild(function (symbolPath) {
  168. symbolPath.setStyle(itemStyle);
  169. symbolPath.hoverStyle = zrUtil.clone(itemHoverStyle);
  170. var defaultText = data.get(data.dimensions[symbolPath.__dimIdx], idx);
  171. (defaultText == null || isNaN(defaultText)) && (defaultText = '');
  172. graphic.setLabelStyle(symbolPath.style, symbolPath.hoverStyle, labelModel, labelHoverModel, {
  173. labelFetcher: data.hostModel,
  174. labelDataIndex: idx,
  175. labelDimIndex: symbolPath.__dimIdx,
  176. defaultText: defaultText,
  177. autoColor: color,
  178. isRectText: true
  179. });
  180. });
  181. itemGroup.highDownOnUpdate = function (fromState, toState) {
  182. polygon.attr('ignore', toState === 'emphasis' ? hoverPolygonIgnore : polygonIgnore);
  183. };
  184. graphic.setHoverStyle(itemGroup);
  185. });
  186. this._data = data;
  187. },
  188. remove: function () {
  189. this.group.removeAll();
  190. this._data = null;
  191. },
  192. dispose: function () {}
  193. });
  194. module.exports = _default;