sunburst-highlight.html 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596
  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. option = {
  26. silent: true,
  27. series: {
  28. radius: ['15%', '80%'],
  29. type: 'sunburst',
  30. sort: null,
  31. highlightPolicy: 'descendant',
  32. data: [{
  33. value: 10,
  34. children: [{
  35. name: 'target',
  36. value: 4,
  37. children: [{
  38. value: 2,
  39. children: [{
  40. value: 1
  41. }]
  42. }, {
  43. value: 1
  44. }, {
  45. value: 0.5
  46. }]
  47. }, {
  48. value: 2
  49. }]
  50. }, {
  51. value: 4,
  52. children: [{
  53. children: [{
  54. value: 2
  55. }]
  56. }]
  57. }],
  58. label: {
  59. rotate: 'none',
  60. color: '#fff'
  61. },
  62. levels: [],
  63. itemStyle: {
  64. color: 'yellow',
  65. borderWidth: 2
  66. },
  67. emphasis: {
  68. itemStyle: {
  69. color: 'red'
  70. }
  71. },
  72. highlight: {
  73. itemStyle: {
  74. color: 'orange'
  75. }
  76. },
  77. downplay: {
  78. itemStyle: {
  79. color: '#ccc'
  80. }
  81. }
  82. }
  83. };
  84. chart.setOption(option);
  85. chart.dispatchAction({
  86. type: 'sunburstHighlight',
  87. targetNodeId: 'target'
  88. });
  89. });
  90. </script>
  91. </body>
  92. </html>