force3.html 2.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182
  1. <html>
  2. <head>
  3. <meta charset="utf-8">
  4. <script src="esl.js"></script>
  5. <script src="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. renderer: 'canvas'
  31. });
  32. var data = [];
  33. var edges = [];
  34. chart.setOption({
  35. series: [{
  36. type: 'graph',
  37. layout: 'force',
  38. animation: false,
  39. data: data,
  40. force: {
  41. // initLayout: 'circular'
  42. // gravity: 0
  43. repulsion: 100,
  44. edgeLength: 5
  45. },
  46. edges: edges
  47. }]
  48. });
  49. setInterval(function () {
  50. data.push({
  51. id: data.length
  52. });
  53. var source = Math.round((data.length - 1) * Math.random());
  54. var target = Math.round((data.length - 1) * Math.random());
  55. if (source !== target) {
  56. edges.push({
  57. source: source,
  58. target: target
  59. });
  60. }
  61. chart.setOption({
  62. series: [{
  63. roam: true,
  64. data: data,
  65. edges: edges
  66. }]
  67. });
  68. console.log('nodes: ' + data.length);
  69. console.log('links: ' + data.length);
  70. }, 500);
  71. });
  72. </script>
  73. </body>
  74. </html>