GraphSeries.js 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236
  1. var echarts = require("../../echarts");
  2. var List = require("../../data/List");
  3. var zrUtil = require("zrender/lib/core/util");
  4. var _model = require("../../util/model");
  5. var defaultEmphasis = _model.defaultEmphasis;
  6. var Model = require("../../model/Model");
  7. var _format = require("../../util/format");
  8. var encodeHTML = _format.encodeHTML;
  9. var createGraphFromNodeEdge = require("../helper/createGraphFromNodeEdge");
  10. var GraphSeries = echarts.extendSeriesModel({
  11. type: 'series.graph',
  12. init: function (option) {
  13. GraphSeries.superApply(this, 'init', arguments); // Provide data for legend select
  14. this.legendDataProvider = function () {
  15. return this._categoriesData;
  16. };
  17. this.fillDataTextStyle(option.edges || option.links);
  18. this._updateCategoriesData();
  19. },
  20. mergeOption: function (option) {
  21. GraphSeries.superApply(this, 'mergeOption', arguments);
  22. this.fillDataTextStyle(option.edges || option.links);
  23. this._updateCategoriesData();
  24. },
  25. mergeDefaultAndTheme: function (option) {
  26. GraphSeries.superApply(this, 'mergeDefaultAndTheme', arguments);
  27. defaultEmphasis(option.edgeLabel, ['show']);
  28. },
  29. getInitialData: function (option, ecModel) {
  30. var edges = option.edges || option.links || [];
  31. var nodes = option.data || option.nodes || [];
  32. var self = this;
  33. if (nodes && edges) {
  34. return createGraphFromNodeEdge(nodes, edges, this, true, beforeLink).data;
  35. }
  36. function beforeLink(nodeData, edgeData) {
  37. // Overwrite nodeData.getItemModel to
  38. nodeData.wrapMethod('getItemModel', function (model) {
  39. var categoriesModels = self._categoriesModels;
  40. var categoryIdx = model.getShallow('category');
  41. var categoryModel = categoriesModels[categoryIdx];
  42. if (categoryModel) {
  43. categoryModel.parentModel = model.parentModel;
  44. model.parentModel = categoryModel;
  45. }
  46. return model;
  47. });
  48. var edgeLabelModel = self.getModel('edgeLabel'); // For option `edgeLabel` can be found by label.xxx.xxx on item mode.
  49. var fakeSeriesModel = new Model({
  50. label: edgeLabelModel.option
  51. }, edgeLabelModel.parentModel, ecModel);
  52. edgeData.wrapMethod('getItemModel', function (model) {
  53. model.customizeGetParent(edgeGetParent);
  54. return model;
  55. });
  56. function edgeGetParent(path) {
  57. path = this.parsePath(path);
  58. return path && path[0] === 'label' ? fakeSeriesModel : this.parentModel;
  59. }
  60. }
  61. },
  62. /**
  63. * @return {module:echarts/data/Graph}
  64. */
  65. getGraph: function () {
  66. return this.getData().graph;
  67. },
  68. /**
  69. * @return {module:echarts/data/List}
  70. */
  71. getEdgeData: function () {
  72. return this.getGraph().edgeData;
  73. },
  74. /**
  75. * @return {module:echarts/data/List}
  76. */
  77. getCategoriesData: function () {
  78. return this._categoriesData;
  79. },
  80. /**
  81. * @override
  82. */
  83. formatTooltip: function (dataIndex, multipleSeries, dataType) {
  84. if (dataType === 'edge') {
  85. var nodeData = this.getData();
  86. var params = this.getDataParams(dataIndex, dataType);
  87. var edge = nodeData.graph.getEdgeByIndex(dataIndex);
  88. var sourceName = nodeData.getName(edge.node1.dataIndex);
  89. var targetName = nodeData.getName(edge.node2.dataIndex);
  90. var html = [];
  91. sourceName != null && html.push(sourceName);
  92. targetName != null && html.push(targetName);
  93. html = encodeHTML(html.join(' > '));
  94. if (params.value) {
  95. html += ' : ' + encodeHTML(params.value);
  96. }
  97. return html;
  98. } else {
  99. // dataType === 'node' or empty
  100. return GraphSeries.superApply(this, 'formatTooltip', arguments);
  101. }
  102. },
  103. _updateCategoriesData: function () {
  104. var categories = zrUtil.map(this.option.categories || [], function (category) {
  105. // Data must has value
  106. return category.value != null ? category : zrUtil.extend({
  107. value: 0
  108. }, category);
  109. });
  110. var categoriesData = new List(['value'], this);
  111. categoriesData.initData(categories);
  112. this._categoriesData = categoriesData;
  113. this._categoriesModels = categoriesData.mapArray(function (idx) {
  114. return categoriesData.getItemModel(idx, true);
  115. });
  116. },
  117. setZoom: function (zoom) {
  118. this.option.zoom = zoom;
  119. },
  120. setCenter: function (center) {
  121. this.option.center = center;
  122. },
  123. isAnimationEnabled: function () {
  124. return GraphSeries.superCall(this, 'isAnimationEnabled') // Not enable animation when do force layout
  125. && !(this.get('layout') === 'force' && this.get('force.layoutAnimation'));
  126. },
  127. defaultOption: {
  128. zlevel: 0,
  129. z: 2,
  130. coordinateSystem: 'view',
  131. // Default option for all coordinate systems
  132. // xAxisIndex: 0,
  133. // yAxisIndex: 0,
  134. // polarIndex: 0,
  135. // geoIndex: 0,
  136. legendHoverLink: true,
  137. hoverAnimation: true,
  138. layout: null,
  139. focusNodeAdjacency: false,
  140. // Configuration of circular layout
  141. circular: {
  142. rotateLabel: false
  143. },
  144. // Configuration of force directed layout
  145. force: {
  146. initLayout: null,
  147. // Node repulsion. Can be an array to represent range.
  148. repulsion: [0, 50],
  149. gravity: 0.1,
  150. // Edge length. Can be an array to represent range.
  151. edgeLength: 30,
  152. layoutAnimation: true
  153. },
  154. left: 'center',
  155. top: 'center',
  156. // right: null,
  157. // bottom: null,
  158. // width: '80%',
  159. // height: '80%',
  160. symbol: 'circle',
  161. symbolSize: 10,
  162. edgeSymbol: ['none', 'none'],
  163. edgeSymbolSize: 10,
  164. edgeLabel: {
  165. normal: {
  166. position: 'middle'
  167. },
  168. emphasis: {}
  169. },
  170. draggable: false,
  171. roam: false,
  172. // Default on center of graph
  173. center: null,
  174. zoom: 1,
  175. // Symbol size scale ratio in roam
  176. nodeScaleRatio: 0.6,
  177. // cursor: null,
  178. // categories: [],
  179. // data: []
  180. // Or
  181. // nodes: []
  182. //
  183. // links: []
  184. // Or
  185. // edges: []
  186. label: {
  187. normal: {
  188. show: false,
  189. formatter: '{b}'
  190. },
  191. emphasis: {
  192. show: true
  193. }
  194. },
  195. itemStyle: {
  196. normal: {},
  197. emphasis: {}
  198. },
  199. lineStyle: {
  200. normal: {
  201. color: '#aaa',
  202. width: 1,
  203. curveness: 0,
  204. opacity: 0.5
  205. },
  206. emphasis: {}
  207. }
  208. }
  209. });
  210. var _default = GraphSeries;
  211. module.exports = _default;