TreemapSeries.js 13 KB

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