ChordView.js 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869
  1. var echarts = require("../../echarts");
  2. var RibbonPath = require("./Ribbon");
  3. var graphic = require("../../util/graphic");
  4. var _default = echarts.extendChartView({
  5. type: 'chord',
  6. init: function (option) {},
  7. render: function (seriesModel, ecModel, api) {
  8. var data = seriesModel.getData();
  9. var graph = seriesModel.getGraph();
  10. var edgeData = seriesModel.getEdgeData();
  11. var group = this.group;
  12. group.removeAll();
  13. data.each(function (idx) {
  14. var layout = data.getItemLayout(idx);
  15. var sector = new graphic.Sector({
  16. shape: {
  17. cx: layout.cx,
  18. cy: layout.cy,
  19. clockwise: layout.clockwise,
  20. r0: layout.r0,
  21. r: layout.r,
  22. startAngle: layout.startAngle,
  23. endAngle: layout.endAngle
  24. }
  25. });
  26. sector.setStyle({
  27. fill: data.getItemVisual(idx, 'color')
  28. });
  29. data.setItemLayout(idx);
  30. group.add(sector);
  31. });
  32. var edgeRendered = {};
  33. edgeData.each(function (idx) {
  34. if (edgeRendered[idx]) {
  35. return;
  36. }
  37. var layout = edgeData.getItemLayout(idx);
  38. var edge = graph.getEdgeByIndex(idx);
  39. var otherEdge = graph.getEdge(edge.node2, edge.node1);
  40. var otherEdgeLayout = otherEdge.getLayout();
  41. edgeRendered[idx] = edgeRendered[otherEdge.dataIndex] = true;
  42. var ribbon = new RibbonPath({
  43. shape: {
  44. cx: layout.cx,
  45. cy: layout.cy,
  46. r: layout.r,
  47. s0: layout.startAngle,
  48. s1: layout.endAngle,
  49. t0: otherEdgeLayout.startAngle,
  50. t1: otherEdgeLayout.endAngle,
  51. clockwise: layout.clockwise
  52. }
  53. });
  54. ribbon.setStyle({
  55. // Use color of source
  56. fill: edge.node1.getVisual('color'),
  57. opacity: 0.5
  58. });
  59. group.add(ribbon);
  60. });
  61. },
  62. dispose: function () {}
  63. });
  64. module.exports = _default;