force3.html 2.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788
  1. <html>
  2. <head>
  3. <meta charset="utf-8">
  4. <script src="lib/esl.js"></script>
  5. <script src="lib/config.js"></script>
  6. <script src="lib/jquery.min.js"></script>
  7. <script src="lib/dat.gui.min.js"></script>
  8. </head>
  9. <body>
  10. <style>
  11. html, body, #main {
  12. width: 100%;
  13. height: 100%;
  14. margin: 0;
  15. }
  16. </style>
  17. <div id="main"></div>
  18. <script>
  19. require([
  20. 'echarts',
  21. // 'extension/dataTool/gexf'
  22. // 'echarts/chart/graph',
  23. // 'echarts/component/title',
  24. // 'echarts/component/legend',
  25. // 'echarts/component/geo',
  26. // 'echarts/component/tooltip',
  27. // 'echarts/component/visualMap'
  28. ], function (echarts) {
  29. var chart = echarts.init(document.getElementById('main'), null, {
  30. });
  31. var data = [{
  32. fixed: true,
  33. x: chart.getWidth() / 2,
  34. y: chart.getHeight() / 2,
  35. symbolSize: 20,
  36. id: '-1'
  37. }];
  38. var edges = [];
  39. chart.setOption({
  40. series: [{
  41. type: 'graph',
  42. layout: 'force',
  43. animation: false,
  44. data: data,
  45. force: {
  46. // initLayout: 'circular'
  47. // gravity: 0
  48. repulsion: 100,
  49. edgeLength: 5
  50. },
  51. edges: edges
  52. }]
  53. });
  54. setInterval(function () {
  55. data.push({
  56. id: data.length
  57. });
  58. var source = Math.round((data.length - 1) * Math.random());
  59. var target = Math.round((data.length - 1) * Math.random());
  60. if (source !== target) {
  61. edges.push({
  62. source: source,
  63. target: target
  64. });
  65. }
  66. chart.setOption({
  67. series: [{
  68. roam: true,
  69. data: data,
  70. edges: edges
  71. }]
  72. });
  73. console.log('nodes: ' + data.length);
  74. console.log('links: ' + data.length);
  75. }, 500);
  76. });
  77. </script>
  78. </body>
  79. </html>