SankeyView.js 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153
  1. var graphic = require("../../util/graphic");
  2. var echarts = require("../../echarts");
  3. /**
  4. * @file The file used to draw sankey view
  5. * @author Deqing Li(annong035@gmail.com)
  6. */
  7. var SankeyShape = graphic.extendShape({
  8. shape: {
  9. x1: 0,
  10. y1: 0,
  11. x2: 0,
  12. y2: 0,
  13. cpx1: 0,
  14. cpy1: 0,
  15. cpx2: 0,
  16. cpy2: 0,
  17. extent: 0
  18. },
  19. buildPath: function (ctx, shape) {
  20. var halfExtent = shape.extent / 2;
  21. ctx.moveTo(shape.x1, shape.y1 - halfExtent);
  22. ctx.bezierCurveTo(shape.cpx1, shape.cpy1 - halfExtent, shape.cpx2, shape.cpy2 - halfExtent, shape.x2, shape.y2 - halfExtent);
  23. ctx.lineTo(shape.x2, shape.y2 + halfExtent);
  24. ctx.bezierCurveTo(shape.cpx2, shape.cpy2 + halfExtent, shape.cpx1, shape.cpy1 + halfExtent, shape.x1, shape.y1 + halfExtent);
  25. ctx.closePath();
  26. }
  27. });
  28. var _default = echarts.extendChartView({
  29. type: 'sankey',
  30. /**
  31. * @private
  32. * @type {module:echarts/chart/sankey/SankeySeries}
  33. */
  34. _model: null,
  35. render: function (seriesModel, ecModel, api) {
  36. var graph = seriesModel.getGraph();
  37. var group = this.group;
  38. var layoutInfo = seriesModel.layoutInfo;
  39. var nodeData = seriesModel.getData();
  40. var edgeData = seriesModel.getData('edge');
  41. this._model = seriesModel;
  42. group.removeAll();
  43. group.attr('position', [layoutInfo.x, layoutInfo.y]); // generate a bezire Curve for each edge
  44. graph.eachEdge(function (edge) {
  45. var curve = new SankeyShape();
  46. curve.dataIndex = edge.dataIndex;
  47. curve.seriesIndex = seriesModel.seriesIndex;
  48. curve.dataType = 'edge';
  49. var lineStyleModel = edge.getModel('lineStyle.normal');
  50. var curvature = lineStyleModel.get('curveness');
  51. var n1Layout = edge.node1.getLayout();
  52. var n2Layout = edge.node2.getLayout();
  53. var edgeLayout = edge.getLayout();
  54. curve.shape.extent = Math.max(1, edgeLayout.dy);
  55. var x1 = n1Layout.x + n1Layout.dx;
  56. var y1 = n1Layout.y + edgeLayout.sy + edgeLayout.dy / 2;
  57. var x2 = n2Layout.x;
  58. var y2 = n2Layout.y + edgeLayout.ty + edgeLayout.dy / 2;
  59. var cpx1 = x1 * (1 - curvature) + x2 * curvature;
  60. var cpy1 = y1;
  61. var cpx2 = x1 * curvature + x2 * (1 - curvature);
  62. var cpy2 = y2;
  63. curve.setShape({
  64. x1: x1,
  65. y1: y1,
  66. x2: x2,
  67. y2: y2,
  68. cpx1: cpx1,
  69. cpy1: cpy1,
  70. cpx2: cpx2,
  71. cpy2: cpy2
  72. });
  73. curve.setStyle(lineStyleModel.getItemStyle()); // Special color, use source node color or target node color
  74. switch (curve.style.fill) {
  75. case 'source':
  76. curve.style.fill = edge.node1.getVisual('color');
  77. break;
  78. case 'target':
  79. curve.style.fill = edge.node2.getVisual('color');
  80. break;
  81. }
  82. graphic.setHoverStyle(curve, edge.getModel('lineStyle.emphasis').getItemStyle());
  83. group.add(curve);
  84. edgeData.setItemGraphicEl(edge.dataIndex, curve);
  85. }); // generate a rect for each node
  86. graph.eachNode(function (node) {
  87. var layout = node.getLayout();
  88. var itemModel = node.getModel();
  89. var labelModel = itemModel.getModel('label.normal');
  90. var labelHoverModel = itemModel.getModel('label.emphasis');
  91. var rect = new graphic.Rect({
  92. shape: {
  93. x: layout.x,
  94. y: layout.y,
  95. width: node.getLayout().dx,
  96. height: node.getLayout().dy
  97. },
  98. style: itemModel.getModel('itemStyle.normal').getItemStyle()
  99. });
  100. var hoverStyle = node.getModel('itemStyle.emphasis').getItemStyle();
  101. graphic.setLabelStyle(rect.style, hoverStyle, labelModel, labelHoverModel, {
  102. labelFetcher: seriesModel,
  103. labelDataIndex: node.dataIndex,
  104. defaultText: node.id,
  105. isRectText: true
  106. });
  107. rect.setStyle('fill', node.getVisual('color'));
  108. graphic.setHoverStyle(rect, hoverStyle);
  109. group.add(rect);
  110. nodeData.setItemGraphicEl(node.dataIndex, rect);
  111. rect.dataType = 'node';
  112. });
  113. if (!this._data && seriesModel.get('animation')) {
  114. group.setClipPath(createGridClipShape(group.getBoundingRect(), seriesModel, function () {
  115. group.removeClipPath();
  116. }));
  117. }
  118. this._data = seriesModel.getData();
  119. },
  120. dispose: function () {}
  121. }); // add animation to the view
  122. function createGridClipShape(rect, seriesModel, cb) {
  123. var rectEl = new graphic.Rect({
  124. shape: {
  125. x: rect.x - 10,
  126. y: rect.y - 10,
  127. width: 0,
  128. height: rect.height + 20
  129. }
  130. });
  131. graphic.initProps(rectEl, {
  132. shape: {
  133. width: rect.width + 20,
  134. height: rect.height + 20
  135. }
  136. }, seriesModel, cb);
  137. return rectEl;
  138. }
  139. module.exports = _default;