sunburst-simple.html 6.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201
  1. <html>
  2. <head>
  3. <meta charset="utf-8">
  4. <script src="lib/esl.js"></script>
  5. <script src="lib/config.js"></script>
  6. </head>
  7. <body>
  8. <style>
  9. html, body, #main {
  10. width: 100%;
  11. height: 100%;
  12. /* background-image: url(old_mathematics.png); */
  13. /* background-repeat: repeat; */
  14. }
  15. </style>
  16. <div id="main"></div>
  17. <script>
  18. var chart;
  19. require([
  20. 'echarts'
  21. ], function (echarts) {
  22. chart = echarts.init(document.getElementById('main'), null, {
  23. // renderer: 'svg'
  24. });
  25. var item1 = {
  26. color: '#F54F4A'
  27. };
  28. var item2 = {
  29. color: '#FF8C75'
  30. };
  31. var item3 = {
  32. color: '#FFB499'
  33. };
  34. var data = [{
  35. children: [{
  36. value: 5,
  37. children: [{
  38. value: 1,
  39. itemStyle: item1
  40. }, {
  41. value: 2,
  42. children: [{
  43. value: 1,
  44. itemStyle: item2
  45. }]
  46. }, {
  47. children: [{
  48. value: 1
  49. }]
  50. }],
  51. itemStyle: item1
  52. }, {
  53. value: 10,
  54. children: [{
  55. value: 6,
  56. children: [{
  57. value: 1,
  58. itemStyle: item1
  59. }, {
  60. value: 1
  61. }, {
  62. value: 1,
  63. itemStyle: item2
  64. }, {
  65. value: 1
  66. }],
  67. itemStyle: item3
  68. }, {
  69. value: 2,
  70. children: [{
  71. value: 1
  72. }],
  73. itemStyle: item3
  74. }, {
  75. children: [{
  76. value: 1,
  77. itemStyle: item2
  78. }]
  79. }],
  80. itemStyle: item1
  81. }],
  82. itemStyle: item1
  83. }, {
  84. value: 9,
  85. children: [{
  86. value: 4,
  87. children: [{
  88. value: 2,
  89. itemStyle: item2
  90. }, {
  91. children: [{
  92. value: 1,
  93. itemStyle: item1
  94. }]
  95. }],
  96. itemStyle: item1
  97. }, {
  98. children: [{
  99. value: 3,
  100. children: [{
  101. value: 1
  102. }, {
  103. value: 1,
  104. itemStyle: item2
  105. }]
  106. }],
  107. itemStyle: item3
  108. }],
  109. itemStyle: item2
  110. }, {
  111. value: 7,
  112. children: [{
  113. children: [{
  114. value: 1,
  115. itemStyle: item3
  116. }, {
  117. value: 3,
  118. children: [{
  119. value: 1,
  120. itemStyle: item2
  121. }, {
  122. value: 1
  123. }],
  124. itemStyle: item2
  125. }, {
  126. value: 2,
  127. children: [{
  128. value: 1
  129. }, {
  130. value: 1,
  131. itemStyle: item1
  132. }],
  133. itemStyle: item1
  134. }],
  135. itemStyle: item3
  136. }],
  137. itemStyle: item1
  138. }, {
  139. children: [{
  140. value: 6,
  141. children: [{
  142. value: 1,
  143. itemStyle: item2
  144. }, {
  145. value: 2,
  146. children: [{
  147. value: 2,
  148. itemStyle: item2
  149. }],
  150. itemStyle: item1
  151. }, {
  152. value: 1,
  153. itemStyle: item3
  154. }],
  155. itemStyle: item3
  156. }, {
  157. value: 3,
  158. children: [{
  159. value: 1,
  160. }, {
  161. children: [{
  162. value: 1,
  163. itemStyle: item2
  164. }]
  165. }, {
  166. value: 1
  167. }],
  168. itemStyle: item3
  169. }],
  170. itemStyle: item1
  171. }];
  172. chart.setOption({
  173. series: {
  174. radius: ['15%', '80%'],
  175. type: 'sunburst',
  176. sort: null,
  177. highlightPolicy: 'ancestor',
  178. data: data,
  179. label: {
  180. normal: {
  181. rotate: 'radial'
  182. }
  183. },
  184. levels: [],
  185. itemStyle: {
  186. normal: {
  187. color: '#ddd',
  188. borderWidth: 2
  189. }
  190. }
  191. }
  192. });
  193. });
  194. </script>
  195. </body>
  196. </html>