force-case.html 6.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168
  1. <!DOCTYPE>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1" />
  6. <script src="lib/esl.js"></script>
  7. <script src="lib/config.js"></script>
  8. <script src="lib/jquery.min.js"></script>
  9. <script src="lib/facePrint.js"></script>
  10. <script src="lib/testHelper.js"></script>
  11. <link rel="stylesheet" href="lib/reset.css">
  12. </head>
  13. <body>
  14. <style>
  15. h1 {
  16. line-height: 60px;
  17. height: 60px;
  18. background: #146402;
  19. text-align: center;
  20. font-weight: bold;
  21. color: #eee;
  22. font-size: 14px;
  23. }
  24. .chart {
  25. height: 500px;
  26. }
  27. </style>
  28. <div class="chart" id="main"></div>
  29. <script>
  30. var echarts;
  31. var chart;
  32. var myChart;
  33. var groupCategories = [];
  34. var groupColors = [];
  35. require([
  36. 'echarts'
  37. // 'echarts/chart/line',
  38. // 'echarts/chart/bar',
  39. // 'echarts/chart/pie',
  40. // 'echarts/chart/scatter',
  41. // 'echarts/chart/map',
  42. // 'echarts/chart/parallel',
  43. // 'echarts/chart/radar',
  44. // 'echarts/chart/graph',
  45. // 'echarts/component/grid',
  46. // 'echarts/component/polar',
  47. // 'echarts/component/geo',
  48. // 'echarts/component/singleAxis',
  49. // 'echarts/component/legend',
  50. // 'echarts/component/tooltip',
  51. // 'echarts/component/toolbox',
  52. // 'echarts/component/visualMap',
  53. // 'echarts/component/dataZoom'
  54. ], function (ec) {
  55. echarts = ec;
  56. option = {
  57. "title": {
  58. "text": "兴趣点",
  59. "top": "top",
  60. "left": "left"
  61. },
  62. "tooltip": { },
  63. "legend": [
  64. {
  65. "data": [ "长期", "短期" ],
  66. "selected": {
  67. "长期": true,
  68. "短期": true
  69. },
  70. "orient": "vertical",
  71. "left": "right"
  72. }
  73. ],
  74. "series": [
  75. {
  76. "type": "graph",
  77. "layout": "force",
  78. "data": [
  79. {
  80. "name": "戴胜",
  81. "value": 31,
  82. "symbolSize": 0.6,
  83. "category": 1,
  84. "x": null,
  85. "y": null,
  86. "label": {
  87. "normal": {
  88. "position": "right",
  89. "show": true
  90. }
  91. }
  92. }, {
  93. "name": "石榴",
  94. "value": 30,
  95. "symbolSize": 0.3,
  96. "category": 1,
  97. "x": null,
  98. "y": null,
  99. "label": {
  100. "normal": {
  101. "position": "right",
  102. "show": true
  103. }
  104. }
  105. }, {
  106. "name": "水果",
  107. "value": 30,
  108. "symbolSize": 0.3,
  109. "category": 1,
  110. "x": null,
  111. "y": null,
  112. "label": {
  113. "normal": {
  114. "position": "right",
  115. "show": true
  116. }
  117. }
  118. }
  119. ],
  120. "links": [
  121. {
  122. "source": "石榴",
  123. "target": "水果"
  124. }
  125. ],
  126. "categories": [
  127. {
  128. "key": "longAttentionList",
  129. "name": "长期"
  130. }, {
  131. "key": "shortAttentionList",
  132. "name": "短期"
  133. }
  134. ],
  135. "roam": true,
  136. "focusNodeAdjacency": true,
  137. "label": {
  138. "emphasis": {
  139. "position": "right",
  140. "show": true
  141. }
  142. },
  143. "lineStyle": {
  144. "normal": {
  145. "width": 0.5,
  146. "curveness": 0.3,
  147. "opacity": 0.7
  148. }
  149. }
  150. }
  151. ]
  152. };
  153. testHelper.createChart(echarts, 'main', option);
  154. });
  155. </script>
  156. </body>
  157. </html>