graph-grid.html 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990
  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. </head>
  8. <body>
  9. <style>
  10. html, body, #main {
  11. width: 100%;
  12. height: 100%;
  13. margin: 0;
  14. }
  15. </style>
  16. <div id="main"></div>
  17. <script>
  18. require([
  19. 'echarts',
  20. 'echarts/component/grid',
  21. 'echarts/chart/graph',
  22. 'echarts/component/title',
  23. 'echarts/component/legend',
  24. 'echarts/component/tooltip',
  25. 'echarts/component/toolbox',
  26. 'echarts/component/dataZoomInside',
  27. 'zrender/vml/vml',
  28. 'theme/vintage'
  29. ], function (echarts) {
  30. var chart = echarts.init(document.getElementById('main'), 'vintage');
  31. var axisData = ['周一','周二','周三','周四','周五','周六','周日'];
  32. var data = axisData.map(function (item, i) {
  33. return Math.round(Math.random() * 1000 * (i + 1));
  34. });
  35. var links = data.map(function (item, i) {
  36. return {
  37. source: i,
  38. target: i + 1
  39. };
  40. });
  41. links.pop();
  42. var option = {
  43. tooltip: {},
  44. xAxis: {
  45. type : 'category',
  46. boundaryGap : false,
  47. data : axisData
  48. },
  49. yAxis: {
  50. type : 'value'
  51. },
  52. toolbox: {
  53. feature: {
  54. dataZoom: {
  55. yAxisIndex: false
  56. }
  57. }
  58. },
  59. dataZoom: {
  60. type: 'inside'
  61. },
  62. series: [
  63. {
  64. type: 'graph',
  65. layout: 'none',
  66. coordinateSystem: 'cartesian2d',
  67. symbolSize: 40,
  68. label: {
  69. normal: {
  70. show: true
  71. }
  72. },
  73. edgeSymbol: ['circle', 'arrow'],
  74. edgeSymbolSize: [4, 10],
  75. data: data,
  76. links: links
  77. }
  78. ]
  79. };
  80. chart.setOption(option);
  81. });
  82. </script>
  83. </body>
  84. </html>