TreeSeries.js 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189
  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 SeriesModel = require("../../model/Series");
  20. var Tree = require("../../data/Tree");
  21. var _format = require("../../util/format");
  22. var encodeHTML = _format.encodeHTML;
  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. var _default = SeriesModel.extend({
  42. type: 'series.tree',
  43. layoutInfo: null,
  44. // can support the position parameters 'left', 'top','right','bottom', 'width',
  45. // 'height' in the setOption() with 'merge' mode normal.
  46. layoutMode: 'box',
  47. /**
  48. * Init a tree data structure from data in option series
  49. * @param {Object} option the object used to config echarts view
  50. * @return {module:echarts/data/List} storage initial data
  51. */
  52. getInitialData: function (option) {
  53. //create an virtual root
  54. var root = {
  55. name: option.name,
  56. children: option.data
  57. };
  58. var leaves = option.leaves || {};
  59. var treeOption = {};
  60. treeOption.leaves = leaves;
  61. var tree = Tree.createTree(root, this, treeOption, beforeLink);
  62. function beforeLink(nodeData) {
  63. nodeData.wrapMethod('getItemModel', function (model, idx) {
  64. var node = tree.getNodeByDataIndex(idx);
  65. var leavesModel = node.getLeavesModel();
  66. if (!node.children.length || !node.isExpand) {
  67. model.parentModel = leavesModel;
  68. }
  69. return model;
  70. });
  71. }
  72. var treeDepth = 0;
  73. tree.eachNode('preorder', function (node) {
  74. if (node.depth > treeDepth) {
  75. treeDepth = node.depth;
  76. }
  77. });
  78. var expandAndCollapse = option.expandAndCollapse;
  79. var expandTreeDepth = expandAndCollapse && option.initialTreeDepth >= 0 ? option.initialTreeDepth : treeDepth;
  80. tree.root.eachNode('preorder', function (node) {
  81. var item = node.hostTree.data.getRawDataItem(node.dataIndex); // Add item.collapsed != null, because users can collapse node original in the series.data.
  82. node.isExpand = item && item.collapsed != null ? !item.collapsed : node.depth <= expandTreeDepth;
  83. });
  84. return tree.data;
  85. },
  86. /**
  87. * Make the configuration 'orient' backward compatibly, with 'horizontal = LR', 'vertical = TB'.
  88. * @returns {string} orient
  89. */
  90. getOrient: function () {
  91. var orient = this.get('orient');
  92. if (orient === 'horizontal') {
  93. orient = 'LR';
  94. } else if (orient === 'vertical') {
  95. orient = 'TB';
  96. }
  97. return orient;
  98. },
  99. setZoom: function (zoom) {
  100. this.option.zoom = zoom;
  101. },
  102. setCenter: function (center) {
  103. this.option.center = center;
  104. },
  105. /**
  106. * @override
  107. * @param {number} dataIndex
  108. */
  109. formatTooltip: function (dataIndex) {
  110. var tree = this.getData().tree;
  111. var realRoot = tree.root.children[0];
  112. var node = tree.getNodeByDataIndex(dataIndex);
  113. var value = node.getValue();
  114. var name = node.name;
  115. while (node && node !== realRoot) {
  116. name = node.parentNode.name + '.' + name;
  117. node = node.parentNode;
  118. }
  119. return encodeHTML(name + (isNaN(value) || value == null ? '' : ' : ' + value));
  120. },
  121. defaultOption: {
  122. zlevel: 0,
  123. z: 2,
  124. coordinateSystem: 'view',
  125. // the position of the whole view
  126. left: '12%',
  127. top: '12%',
  128. right: '12%',
  129. bottom: '12%',
  130. // the layout of the tree, two value can be selected, 'orthogonal' or 'radial'
  131. layout: 'orthogonal',
  132. // true | false | 'move' | 'scale', see module:component/helper/RoamController.
  133. roam: false,
  134. // Symbol size scale ratio in roam
  135. nodeScaleRatio: 0.4,
  136. // Default on center of graph
  137. center: null,
  138. zoom: 1,
  139. // The orient of orthoginal layout, can be setted to 'LR', 'TB', 'RL', 'BT'.
  140. // and the backward compatibility configuration 'horizontal = LR', 'vertical = TB'.
  141. orient: 'LR',
  142. symbol: 'emptyCircle',
  143. symbolSize: 7,
  144. expandAndCollapse: true,
  145. initialTreeDepth: 2,
  146. lineStyle: {
  147. color: '#ccc',
  148. width: 1.5,
  149. curveness: 0.5
  150. },
  151. itemStyle: {
  152. color: 'lightsteelblue',
  153. borderColor: '#c23531',
  154. borderWidth: 1.5
  155. },
  156. label: {
  157. show: true,
  158. color: '#555'
  159. },
  160. leaves: {
  161. label: {
  162. show: true
  163. }
  164. },
  165. animationEasing: 'linear',
  166. animationDuration: 700,
  167. animationDurationUpdate: 1000
  168. }
  169. });
  170. module.exports = _default;