TreeSeries.js 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192
  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. var Model = require("../../model/Model");
  24. /*
  25. * Licensed to the Apache Software Foundation (ASF) under one
  26. * or more contributor license agreements. See the NOTICE file
  27. * distributed with this work for additional information
  28. * regarding copyright ownership. The ASF licenses this file
  29. * to you under the Apache License, Version 2.0 (the
  30. * "License"); you may not use this file except in compliance
  31. * with the License. You may obtain a copy of the License at
  32. *
  33. * http://www.apache.org/licenses/LICENSE-2.0
  34. *
  35. * Unless required by applicable law or agreed to in writing,
  36. * software distributed under the License is distributed on an
  37. * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  38. * KIND, either express or implied. See the License for the
  39. * specific language governing permissions and limitations
  40. * under the License.
  41. */
  42. var _default = SeriesModel.extend({
  43. type: 'series.tree',
  44. layoutInfo: null,
  45. // can support the position parameters 'left', 'top','right','bottom', 'width',
  46. // 'height' in the setOption() with 'merge' mode normal.
  47. layoutMode: 'box',
  48. /**
  49. * Init a tree data structure from data in option series
  50. * @param {Object} option the object used to config echarts view
  51. * @return {module:echarts/data/List} storage initial data
  52. */
  53. getInitialData: function (option) {
  54. //create an virtual root
  55. var root = {
  56. name: option.name,
  57. children: option.data
  58. };
  59. var leaves = option.leaves || {};
  60. var leavesModel = new Model(leaves, this, this.ecModel);
  61. var tree = Tree.createTree(root, this, beforeLink);
  62. function beforeLink(nodeData) {
  63. nodeData.wrapMethod('getItemModel', function (model, idx) {
  64. var node = tree.getNodeByDataIndex(idx);
  65. if (!node.children.length || !node.isExpand) {
  66. model.parentModel = leavesModel;
  67. }
  68. return model;
  69. });
  70. }
  71. var treeDepth = 0;
  72. tree.eachNode('preorder', function (node) {
  73. if (node.depth > treeDepth) {
  74. treeDepth = node.depth;
  75. }
  76. });
  77. var expandAndCollapse = option.expandAndCollapse;
  78. var expandTreeDepth = expandAndCollapse && option.initialTreeDepth >= 0 ? option.initialTreeDepth : treeDepth;
  79. tree.root.eachNode('preorder', function (node) {
  80. var item = node.hostTree.data.getRawDataItem(node.dataIndex); // Add item.collapsed != null, because users can collapse node original in the series.data.
  81. node.isExpand = item && item.collapsed != null ? !item.collapsed : node.depth <= expandTreeDepth;
  82. });
  83. return tree.data;
  84. },
  85. /**
  86. * Make the configuration 'orient' backward compatibly, with 'horizontal = LR', 'vertical = TB'.
  87. * @returns {string} orient
  88. */
  89. getOrient: function () {
  90. var orient = this.get('orient');
  91. if (orient === 'horizontal') {
  92. orient = 'LR';
  93. } else if (orient === 'vertical') {
  94. orient = 'TB';
  95. }
  96. return orient;
  97. },
  98. setZoom: function (zoom) {
  99. this.option.zoom = zoom;
  100. },
  101. setCenter: function (center) {
  102. this.option.center = center;
  103. },
  104. /**
  105. * @override
  106. * @param {number} dataIndex
  107. */
  108. formatTooltip: function (dataIndex) {
  109. var tree = this.getData().tree;
  110. var realRoot = tree.root.children[0];
  111. var node = tree.getNodeByDataIndex(dataIndex);
  112. var value = node.getValue();
  113. var name = node.name;
  114. while (node && node !== realRoot) {
  115. name = node.parentNode.name + '.' + name;
  116. node = node.parentNode;
  117. }
  118. return encodeHTML(name + (isNaN(value) || value == null ? '' : ' : ' + value));
  119. },
  120. defaultOption: {
  121. zlevel: 0,
  122. z: 2,
  123. coordinateSystem: 'view',
  124. // the position of the whole view
  125. left: '12%',
  126. top: '12%',
  127. right: '12%',
  128. bottom: '12%',
  129. // the layout of the tree, two value can be selected, 'orthogonal' or 'radial'
  130. layout: 'orthogonal',
  131. // value can be 'polyline'
  132. edgeShape: 'curve',
  133. edgeForkPosition: '50%',
  134. // true | false | 'move' | 'scale', see module:component/helper/RoamController.
  135. roam: false,
  136. // Symbol size scale ratio in roam
  137. nodeScaleRatio: 0.4,
  138. // Default on center of graph
  139. center: null,
  140. zoom: 1,
  141. // The orient of orthoginal layout, can be setted to 'LR', 'TB', 'RL', 'BT'.
  142. // and the backward compatibility configuration 'horizontal = LR', 'vertical = TB'.
  143. orient: 'LR',
  144. symbol: 'emptyCircle',
  145. symbolSize: 7,
  146. expandAndCollapse: true,
  147. initialTreeDepth: 2,
  148. lineStyle: {
  149. color: '#ccc',
  150. width: 1.5,
  151. curveness: 0.5
  152. },
  153. itemStyle: {
  154. color: 'lightsteelblue',
  155. borderColor: '#c23531',
  156. borderWidth: 1.5
  157. },
  158. label: {
  159. show: true,
  160. color: '#555'
  161. },
  162. leaves: {
  163. label: {
  164. show: true
  165. }
  166. },
  167. animationEasing: 'linear',
  168. animationDuration: 700,
  169. animationDurationUpdate: 1000
  170. }
  171. });
  172. module.exports = _default;