SunburstPiece.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395
  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 zrUtil = require("zrender/lib/core/util");
  20. var graphic = require("../../util/graphic");
  21. /*
  22. * Licensed to the Apache Software Foundation (ASF) under one
  23. * or more contributor license agreements. See the NOTICE file
  24. * distributed with this work for additional information
  25. * regarding copyright ownership. The ASF licenses this file
  26. * to you under the Apache License, Version 2.0 (the
  27. * "License"); you may not use this file except in compliance
  28. * with the License. You may obtain a copy of the License at
  29. *
  30. * http://www.apache.org/licenses/LICENSE-2.0
  31. *
  32. * Unless required by applicable law or agreed to in writing,
  33. * software distributed under the License is distributed on an
  34. * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  35. * KIND, either express or implied. See the License for the
  36. * specific language governing permissions and limitations
  37. * under the License.
  38. */
  39. var NodeHighlightPolicy = {
  40. NONE: 'none',
  41. // not downplay others
  42. DESCENDANT: 'descendant',
  43. ANCESTOR: 'ancestor',
  44. SELF: 'self'
  45. };
  46. var DEFAULT_SECTOR_Z = 2;
  47. var DEFAULT_TEXT_Z = 4;
  48. /**
  49. * Sunburstce of Sunburst including Sector, Label, LabelLine
  50. * @constructor
  51. * @extends {module:zrender/graphic/Group}
  52. */
  53. function SunburstPiece(node, seriesModel, ecModel) {
  54. graphic.Group.call(this);
  55. var sector = new graphic.Sector({
  56. z2: DEFAULT_SECTOR_Z
  57. });
  58. sector.seriesIndex = seriesModel.seriesIndex;
  59. var text = new graphic.Text({
  60. z2: DEFAULT_TEXT_Z,
  61. silent: node.getModel('label').get('silent')
  62. });
  63. this.add(sector);
  64. this.add(text);
  65. this.updateData(true, node, 'normal', seriesModel, ecModel); // Hover to change label and labelLine
  66. function onEmphasis() {
  67. text.ignore = text.hoverIgnore;
  68. }
  69. function onNormal() {
  70. text.ignore = text.normalIgnore;
  71. }
  72. this.on('emphasis', onEmphasis).on('normal', onNormal).on('mouseover', onEmphasis).on('mouseout', onNormal);
  73. }
  74. var SunburstPieceProto = SunburstPiece.prototype;
  75. SunburstPieceProto.updateData = function (firstCreate, node, state, seriesModel, ecModel) {
  76. this.node = node;
  77. node.piece = this;
  78. seriesModel = seriesModel || this._seriesModel;
  79. ecModel = ecModel || this._ecModel;
  80. var sector = this.childAt(0);
  81. sector.dataIndex = node.dataIndex;
  82. var itemModel = node.getModel();
  83. var layout = node.getLayout(); // if (!layout) {
  84. // console.log(node.getLayout());
  85. // }
  86. var sectorShape = zrUtil.extend({}, layout);
  87. sectorShape.label = null;
  88. var visualColor = getNodeColor(node, seriesModel, ecModel);
  89. fillDefaultColor(node, seriesModel, visualColor);
  90. var normalStyle = itemModel.getModel('itemStyle').getItemStyle();
  91. var style;
  92. if (state === 'normal') {
  93. style = normalStyle;
  94. } else {
  95. var stateStyle = itemModel.getModel(state + '.itemStyle').getItemStyle();
  96. style = zrUtil.merge(stateStyle, normalStyle);
  97. }
  98. style = zrUtil.defaults({
  99. lineJoin: 'bevel',
  100. fill: style.fill || visualColor
  101. }, style);
  102. if (firstCreate) {
  103. sector.setShape(sectorShape);
  104. sector.shape.r = layout.r0;
  105. graphic.updateProps(sector, {
  106. shape: {
  107. r: layout.r
  108. }
  109. }, seriesModel, node.dataIndex);
  110. sector.useStyle(style);
  111. } else if (typeof style.fill === 'object' && style.fill.type || typeof sector.style.fill === 'object' && sector.style.fill.type) {
  112. // Disable animation for gradient since no interpolation method
  113. // is supported for gradient
  114. graphic.updateProps(sector, {
  115. shape: sectorShape
  116. }, seriesModel);
  117. sector.useStyle(style);
  118. } else {
  119. graphic.updateProps(sector, {
  120. shape: sectorShape,
  121. style: style
  122. }, seriesModel);
  123. }
  124. this._updateLabel(seriesModel, visualColor, state);
  125. var cursorStyle = itemModel.getShallow('cursor');
  126. cursorStyle && sector.attr('cursor', cursorStyle);
  127. if (firstCreate) {
  128. var highlightPolicy = seriesModel.getShallow('highlightPolicy');
  129. this._initEvents(sector, node, seriesModel, highlightPolicy);
  130. }
  131. this._seriesModel = seriesModel || this._seriesModel;
  132. this._ecModel = ecModel || this._ecModel;
  133. graphic.setHoverStyle(this);
  134. };
  135. SunburstPieceProto.onEmphasis = function (highlightPolicy) {
  136. var that = this;
  137. this.node.hostTree.root.eachNode(function (n) {
  138. if (n.piece) {
  139. if (that.node === n) {
  140. n.piece.updateData(false, n, 'emphasis');
  141. } else if (isNodeHighlighted(n, that.node, highlightPolicy)) {
  142. n.piece.childAt(0).trigger('highlight');
  143. } else if (highlightPolicy !== NodeHighlightPolicy.NONE) {
  144. n.piece.childAt(0).trigger('downplay');
  145. }
  146. }
  147. });
  148. };
  149. SunburstPieceProto.onNormal = function () {
  150. this.node.hostTree.root.eachNode(function (n) {
  151. if (n.piece) {
  152. n.piece.updateData(false, n, 'normal');
  153. }
  154. });
  155. };
  156. SunburstPieceProto.onHighlight = function () {
  157. this.updateData(false, this.node, 'highlight');
  158. };
  159. SunburstPieceProto.onDownplay = function () {
  160. this.updateData(false, this.node, 'downplay');
  161. };
  162. SunburstPieceProto._updateLabel = function (seriesModel, visualColor, state) {
  163. var itemModel = this.node.getModel();
  164. var normalModel = itemModel.getModel('label');
  165. var labelModel = state === 'normal' || state === 'emphasis' ? normalModel : itemModel.getModel(state + '.label');
  166. var labelHoverModel = itemModel.getModel('emphasis.label');
  167. var labelFormatter = labelModel.get('formatter'); // Use normal formatter if no state formatter is defined
  168. var labelState = labelFormatter ? state : 'normal';
  169. var text = zrUtil.retrieve(seriesModel.getFormattedLabel(this.node.dataIndex, labelState, null, null, 'label'), this.node.name);
  170. if (getLabelAttr('show') === false) {
  171. text = '';
  172. }
  173. var layout = this.node.getLayout();
  174. var labelMinAngle = labelModel.get('minAngle');
  175. if (labelMinAngle == null) {
  176. labelMinAngle = normalModel.get('minAngle');
  177. }
  178. labelMinAngle = labelMinAngle / 180 * Math.PI;
  179. var angle = layout.endAngle - layout.startAngle;
  180. if (labelMinAngle != null && Math.abs(angle) < labelMinAngle) {
  181. // Not displaying text when angle is too small
  182. text = '';
  183. }
  184. var label = this.childAt(1);
  185. graphic.setLabelStyle(label.style, label.hoverStyle || {}, normalModel, labelHoverModel, {
  186. defaultText: labelModel.getShallow('show') ? text : null,
  187. autoColor: visualColor,
  188. useInsideStyle: true
  189. });
  190. var midAngle = (layout.startAngle + layout.endAngle) / 2;
  191. var dx = Math.cos(midAngle);
  192. var dy = Math.sin(midAngle);
  193. var r;
  194. var labelPosition = getLabelAttr('position');
  195. var labelPadding = getLabelAttr('distance') || 0;
  196. var textAlign = getLabelAttr('align');
  197. if (labelPosition === 'outside') {
  198. r = layout.r + labelPadding;
  199. textAlign = midAngle > Math.PI / 2 ? 'right' : 'left';
  200. } else {
  201. if (!textAlign || textAlign === 'center') {
  202. r = (layout.r + layout.r0) / 2;
  203. textAlign = 'center';
  204. } else if (textAlign === 'left') {
  205. r = layout.r0 + labelPadding;
  206. if (midAngle > Math.PI / 2) {
  207. textAlign = 'right';
  208. }
  209. } else if (textAlign === 'right') {
  210. r = layout.r - labelPadding;
  211. if (midAngle > Math.PI / 2) {
  212. textAlign = 'left';
  213. }
  214. }
  215. }
  216. label.attr('style', {
  217. text: text,
  218. textAlign: textAlign,
  219. textVerticalAlign: getLabelAttr('verticalAlign') || 'middle',
  220. opacity: getLabelAttr('opacity')
  221. });
  222. var textX = r * dx + layout.cx;
  223. var textY = r * dy + layout.cy;
  224. label.attr('position', [textX, textY]);
  225. var rotateType = getLabelAttr('rotate');
  226. var rotate = 0;
  227. if (rotateType === 'radial') {
  228. rotate = -midAngle;
  229. if (rotate < -Math.PI / 2) {
  230. rotate += Math.PI;
  231. }
  232. } else if (rotateType === 'tangential') {
  233. rotate = Math.PI / 2 - midAngle;
  234. if (rotate > Math.PI / 2) {
  235. rotate -= Math.PI;
  236. } else if (rotate < -Math.PI / 2) {
  237. rotate += Math.PI;
  238. }
  239. } else if (typeof rotateType === 'number') {
  240. rotate = rotateType * Math.PI / 180;
  241. }
  242. label.attr('rotation', rotate);
  243. function getLabelAttr(name) {
  244. var stateAttr = labelModel.get(name);
  245. if (stateAttr == null) {
  246. return normalModel.get(name);
  247. } else {
  248. return stateAttr;
  249. }
  250. }
  251. };
  252. SunburstPieceProto._initEvents = function (sector, node, seriesModel, highlightPolicy) {
  253. sector.off('mouseover').off('mouseout').off('emphasis').off('normal');
  254. var that = this;
  255. var onEmphasis = function () {
  256. that.onEmphasis(highlightPolicy);
  257. };
  258. var onNormal = function () {
  259. that.onNormal();
  260. };
  261. var onDownplay = function () {
  262. that.onDownplay();
  263. };
  264. var onHighlight = function () {
  265. that.onHighlight();
  266. };
  267. if (seriesModel.isAnimationEnabled()) {
  268. sector.on('mouseover', onEmphasis).on('mouseout', onNormal).on('emphasis', onEmphasis).on('normal', onNormal).on('downplay', onDownplay).on('highlight', onHighlight);
  269. }
  270. };
  271. zrUtil.inherits(SunburstPiece, graphic.Group);
  272. var _default = SunburstPiece;
  273. /**
  274. * Get node color
  275. *
  276. * @param {TreeNode} node the node to get color
  277. * @param {module:echarts/model/Series} seriesModel series
  278. * @param {module:echarts/model/Global} ecModel echarts defaults
  279. */
  280. function getNodeColor(node, seriesModel, ecModel) {
  281. // Color from visualMap
  282. var visualColor = node.getVisual('color');
  283. var visualMetaList = node.getVisual('visualMeta');
  284. if (!visualMetaList || visualMetaList.length === 0) {
  285. // Use first-generation color if has no visualMap
  286. visualColor = null;
  287. } // Self color or level color
  288. var color = node.getModel('itemStyle').get('color');
  289. if (color) {
  290. return color;
  291. } else if (visualColor) {
  292. // Color mapping
  293. return visualColor;
  294. } else if (node.depth === 0) {
  295. // Virtual root node
  296. return ecModel.option.color[0];
  297. } else {
  298. // First-generation color
  299. var length = ecModel.option.color.length;
  300. color = ecModel.option.color[getRootId(node) % length];
  301. }
  302. return color;
  303. }
  304. /**
  305. * Get index of root in sorted order
  306. *
  307. * @param {TreeNode} node current node
  308. * @return {number} index in root
  309. */
  310. function getRootId(node) {
  311. var ancestor = node;
  312. while (ancestor.depth > 1) {
  313. ancestor = ancestor.parentNode;
  314. }
  315. var virtualRoot = node.getAncestors()[0];
  316. return zrUtil.indexOf(virtualRoot.children, ancestor);
  317. }
  318. function isNodeHighlighted(node, activeNode, policy) {
  319. if (policy === NodeHighlightPolicy.NONE) {
  320. return false;
  321. } else if (policy === NodeHighlightPolicy.SELF) {
  322. return node === activeNode;
  323. } else if (policy === NodeHighlightPolicy.ANCESTOR) {
  324. return node === activeNode || node.isAncestorOf(activeNode);
  325. } else {
  326. return node === activeNode || node.isDescendantOf(activeNode);
  327. }
  328. } // Fix tooltip callback function params.color incorrect when pick a default color
  329. function fillDefaultColor(node, seriesModel, color) {
  330. var data = seriesModel.getData();
  331. data.setItemVisual(node.dataIndex, 'color', color);
  332. }
  333. module.exports = _default;