TreemapSeries.js 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373
  1. var zrUtil = require("zrender/lib/core/util");
  2. var SeriesModel = require("../../model/Series");
  3. var Tree = require("../../data/Tree");
  4. var Model = require("../../model/Model");
  5. var _format = require("../../util/format");
  6. var encodeHTML = _format.encodeHTML;
  7. var addCommas = _format.addCommas;
  8. var _helper = require("./helper");
  9. var wrapTreePathInfo = _helper.wrapTreePathInfo;
  10. var _default = SeriesModel.extend({
  11. type: 'series.treemap',
  12. layoutMode: 'box',
  13. dependencies: ['grid', 'polar'],
  14. /**
  15. * @type {module:echarts/data/Tree~Node}
  16. */
  17. _viewRoot: null,
  18. defaultOption: {
  19. // Disable progressive rendering
  20. progressive: 0,
  21. hoverLayerThreshold: Infinity,
  22. // center: ['50%', '50%'], // not supported in ec3.
  23. // size: ['80%', '80%'], // deprecated, compatible with ec2.
  24. left: 'center',
  25. top: 'middle',
  26. right: null,
  27. bottom: null,
  28. width: '80%',
  29. height: '80%',
  30. sort: true,
  31. // Can be null or false or true
  32. // (order by desc default, asc not supported yet (strange effect))
  33. clipWindow: 'origin',
  34. // Size of clipped window when zooming. 'origin' or 'fullscreen'
  35. squareRatio: 0.5 * (1 + Math.sqrt(5)),
  36. // golden ratio
  37. leafDepth: null,
  38. // Nodes on depth from root are regarded as leaves.
  39. // Count from zero (zero represents only view root).
  40. drillDownIcon: '▶',
  41. // Use html character temporarily because it is complicated
  42. // to align specialized icon. ▷▶❒❐▼✚
  43. zoomToNodeRatio: 0.32 * 0.32,
  44. // Be effective when using zoomToNode. Specify the proportion of the
  45. // target node area in the view area.
  46. roam: true,
  47. // true, false, 'scale' or 'zoom', 'move'.
  48. nodeClick: 'zoomToNode',
  49. // Leaf node click behaviour: 'zoomToNode', 'link', false.
  50. // If leafDepth is set and clicking a node which has children but
  51. // be on left depth, the behaviour would be changing root. Otherwise
  52. // use behavious defined above.
  53. animation: true,
  54. animationDurationUpdate: 900,
  55. animationEasing: 'quinticInOut',
  56. breadcrumb: {
  57. show: true,
  58. height: 22,
  59. left: 'center',
  60. top: 'bottom',
  61. // right
  62. // bottom
  63. emptyItemWidth: 25,
  64. // Width of empty node.
  65. itemStyle: {
  66. normal: {
  67. color: 'rgba(0,0,0,0.7)',
  68. //'#5793f3',
  69. borderColor: 'rgba(255,255,255,0.7)',
  70. borderWidth: 1,
  71. shadowColor: 'rgba(150,150,150,1)',
  72. shadowBlur: 3,
  73. shadowOffsetX: 0,
  74. shadowOffsetY: 0,
  75. textStyle: {
  76. color: '#fff'
  77. }
  78. },
  79. emphasis: {
  80. textStyle: {}
  81. }
  82. }
  83. },
  84. label: {
  85. normal: {
  86. show: true,
  87. // Do not use textDistance, for ellipsis rect just the same as treemap node rect.
  88. distance: 0,
  89. padding: 5,
  90. position: 'inside',
  91. // Can be [5, '5%'] or position stirng like 'insideTopLeft', ...
  92. // formatter: null,
  93. color: '#fff',
  94. ellipsis: true // align
  95. // verticalAlign
  96. }
  97. },
  98. upperLabel: {
  99. // Label when node is parent.
  100. normal: {
  101. show: false,
  102. position: [0, '50%'],
  103. height: 20,
  104. // formatter: null,
  105. color: '#fff',
  106. ellipsis: true,
  107. // align: null,
  108. verticalAlign: 'middle'
  109. },
  110. emphasis: {
  111. show: true,
  112. position: [0, '50%'],
  113. color: '#fff',
  114. ellipsis: true,
  115. verticalAlign: 'middle'
  116. }
  117. },
  118. itemStyle: {
  119. normal: {
  120. color: null,
  121. // Can be 'none' if not necessary.
  122. colorAlpha: null,
  123. // Can be 'none' if not necessary.
  124. colorSaturation: null,
  125. // Can be 'none' if not necessary.
  126. borderWidth: 0,
  127. gapWidth: 0,
  128. borderColor: '#fff',
  129. borderColorSaturation: null // If specified, borderColor will be ineffective, and the
  130. // border color is evaluated by color of current node and
  131. // borderColorSaturation.
  132. },
  133. emphasis: {}
  134. },
  135. visualDimension: 0,
  136. // Can be 0, 1, 2, 3.
  137. visualMin: null,
  138. visualMax: null,
  139. color: [],
  140. // + treemapSeries.color should not be modified. Please only modified
  141. // level[n].color (if necessary).
  142. // + Specify color list of each level. level[0].color would be global
  143. // color list if not specified. (see method `setDefault`).
  144. // + But set as a empty array to forbid fetch color from global palette
  145. // when using nodeModel.get('color'), otherwise nodes on deep level
  146. // will always has color palette set and are not able to inherit color
  147. // from parent node.
  148. // + TreemapSeries.color can not be set as 'none', otherwise effect
  149. // legend color fetching (see seriesColor.js).
  150. colorAlpha: null,
  151. // Array. Specify color alpha range of each level, like [0.2, 0.8]
  152. colorSaturation: null,
  153. // Array. Specify color saturation of each level, like [0.2, 0.5]
  154. colorMappingBy: 'index',
  155. // 'value' or 'index' or 'id'.
  156. visibleMin: 10,
  157. // If area less than this threshold (unit: pixel^2), node will not
  158. // be rendered. Only works when sort is 'asc' or 'desc'.
  159. childrenVisibleMin: null,
  160. // If area of a node less than this threshold (unit: pixel^2),
  161. // grandchildren will not show.
  162. // Why grandchildren? If not grandchildren but children,
  163. // some siblings show children and some not,
  164. // the appearance may be mess and not consistent,
  165. levels: [] // Each item: {
  166. // visibleMin, itemStyle, visualDimension, label
  167. // }
  168. // data: {
  169. // value: [],
  170. // children: [],
  171. // link: 'http://xxx.xxx.xxx',
  172. // target: 'blank' or 'self'
  173. // }
  174. },
  175. /**
  176. * @override
  177. */
  178. getInitialData: function (option, ecModel) {
  179. // Create a virtual root.
  180. var root = {
  181. name: option.name,
  182. children: option.data
  183. };
  184. completeTreeValue(root);
  185. var levels = option.levels || [];
  186. levels = option.levels = setDefault(levels, ecModel);
  187. var treeOption = {};
  188. treeOption.levels = levels; // Make sure always a new tree is created when setOption,
  189. // in TreemapView, we check whether oldTree === newTree
  190. // to choose mappings approach among old shapes and new shapes.
  191. return Tree.createTree(root, this, treeOption).data;
  192. },
  193. optionUpdated: function () {
  194. this.resetViewRoot();
  195. },
  196. /**
  197. * @override
  198. * @param {number} dataIndex
  199. * @param {boolean} [mutipleSeries=false]
  200. */
  201. formatTooltip: function (dataIndex) {
  202. var data = this.getData();
  203. var value = this.getRawValue(dataIndex);
  204. var formattedValue = zrUtil.isArray(value) ? addCommas(value[0]) : addCommas(value);
  205. var name = data.getName(dataIndex);
  206. return encodeHTML(name + ': ' + formattedValue);
  207. },
  208. /**
  209. * Add tree path to tooltip param
  210. *
  211. * @override
  212. * @param {number} dataIndex
  213. * @return {Object}
  214. */
  215. getDataParams: function (dataIndex) {
  216. var params = SeriesModel.prototype.getDataParams.apply(this, arguments);
  217. var node = this.getData().tree.getNodeByDataIndex(dataIndex);
  218. params.treePathInfo = wrapTreePathInfo(node, this);
  219. return params;
  220. },
  221. /**
  222. * @public
  223. * @param {Object} layoutInfo {
  224. * x: containerGroup x
  225. * y: containerGroup y
  226. * width: containerGroup width
  227. * height: containerGroup height
  228. * }
  229. */
  230. setLayoutInfo: function (layoutInfo) {
  231. /**
  232. * @readOnly
  233. * @type {Object}
  234. */
  235. this.layoutInfo = this.layoutInfo || {};
  236. zrUtil.extend(this.layoutInfo, layoutInfo);
  237. },
  238. /**
  239. * @param {string} id
  240. * @return {number} index
  241. */
  242. mapIdToIndex: function (id) {
  243. // A feature is implemented:
  244. // index is monotone increasing with the sequence of
  245. // input id at the first time.
  246. // This feature can make sure that each data item and its
  247. // mapped color have the same index between data list and
  248. // color list at the beginning, which is useful for user
  249. // to adjust data-color mapping.
  250. /**
  251. * @private
  252. * @type {Object}
  253. */
  254. var idIndexMap = this._idIndexMap;
  255. if (!idIndexMap) {
  256. idIndexMap = this._idIndexMap = zrUtil.createHashMap();
  257. /**
  258. * @private
  259. * @type {number}
  260. */
  261. this._idIndexMapCount = 0;
  262. }
  263. var index = idIndexMap.get(id);
  264. if (index == null) {
  265. idIndexMap.set(id, index = this._idIndexMapCount++);
  266. }
  267. return index;
  268. },
  269. getViewRoot: function () {
  270. return this._viewRoot;
  271. },
  272. /**
  273. * @param {module:echarts/data/Tree~Node} [viewRoot]
  274. */
  275. resetViewRoot: function (viewRoot) {
  276. viewRoot ? this._viewRoot = viewRoot : viewRoot = this._viewRoot;
  277. var root = this.getData().tree.root;
  278. if (!viewRoot || viewRoot !== root && !root.contains(viewRoot)) {
  279. this._viewRoot = root;
  280. }
  281. }
  282. });
  283. /**
  284. * @param {Object} dataNode
  285. */
  286. function completeTreeValue(dataNode) {
  287. // Postorder travel tree.
  288. // If value of none-leaf node is not set,
  289. // calculate it by suming up the value of all children.
  290. var sum = 0;
  291. zrUtil.each(dataNode.children, function (child) {
  292. completeTreeValue(child);
  293. var childValue = child.value;
  294. zrUtil.isArray(childValue) && (childValue = childValue[0]);
  295. sum += childValue;
  296. });
  297. var thisValue = dataNode.value;
  298. if (zrUtil.isArray(thisValue)) {
  299. thisValue = thisValue[0];
  300. }
  301. if (thisValue == null || isNaN(thisValue)) {
  302. thisValue = sum;
  303. } // Value should not less than 0.
  304. if (thisValue < 0) {
  305. thisValue = 0;
  306. }
  307. zrUtil.isArray(dataNode.value) ? dataNode.value[0] = thisValue : dataNode.value = thisValue;
  308. }
  309. /**
  310. * set default to level configuration
  311. */
  312. function setDefault(levels, ecModel) {
  313. var globalColorList = ecModel.get('color');
  314. if (!globalColorList) {
  315. return;
  316. }
  317. levels = levels || [];
  318. var hasColorDefine;
  319. zrUtil.each(levels, function (levelDefine) {
  320. var model = new Model(levelDefine);
  321. var modelColor = model.get('color');
  322. if (model.get('itemStyle.normal.color') || modelColor && modelColor !== 'none') {
  323. hasColorDefine = true;
  324. }
  325. });
  326. if (!hasColorDefine) {
  327. var level0 = levels[0] || (levels[0] = {});
  328. level0.color = globalColorList.slice();
  329. }
  330. return levels;
  331. }
  332. module.exports = _default;