treemap-simple.html 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124
  1. <html>
  2. <head>
  3. <meta charset="utf-8">
  4. <script src="lib/esl.js"></script>
  5. <script src="lib/config.js"></script>
  6. <link rel="stylesheet" href="lib/reset.css" />
  7. </head>
  8. <body>
  9. <div id="main"></div>
  10. <script>
  11. require([
  12. 'echarts'
  13. // 'echarts/chart/treemap',
  14. ], function (echarts) {
  15. var chart = echarts.init(document.getElementById('main'), null, {
  16. });
  17. chart.setOption({
  18. series: [
  19. {
  20. name:'矩形树图',
  21. type:'treemap',
  22. label: {
  23. normal: {
  24. // show: false,
  25. position: 'insideRight'
  26. // position: ['100%', 10],
  27. // textStyle: {
  28. // align: 'right'
  29. // }
  30. },
  31. emphasis: {
  32. show: true
  33. }
  34. },
  35. breadcrumb: {
  36. },
  37. levels: [
  38. {
  39. itemStyle: {
  40. normal: {
  41. borderWidth: 15,
  42. gapWidth: 30,
  43. borderColor: '#999'
  44. }
  45. }
  46. },
  47. {
  48. itemStyle: {
  49. normal: {
  50. borderWidth: 15,
  51. gapWidth: 40,
  52. borderColor: '#333'
  53. }
  54. }
  55. },
  56. {
  57. itemStyle: {
  58. normal: {
  59. borderWidth: 10,
  60. borderColor: '#555570'
  61. }
  62. }
  63. }
  64. ],
  65. data:[
  66. {
  67. name: '三星',
  68. value: 6,
  69. },
  70. {
  71. name: '小米',
  72. value: 4,
  73. children: [
  74. {
  75. name: '小米0',
  76. value: 10,
  77. children: [
  78. {
  79. itemStyle: {
  80. normal: {
  81. color: 'yellow'
  82. }
  83. },
  84. name: '小尺',
  85. value: 400
  86. },
  87. {
  88. name: '小寸',
  89. value: 200
  90. },
  91. {
  92. name: '小光年',
  93. value: 100
  94. }
  95. ]
  96. },
  97. {
  98. name: '小米1',
  99. value: 4
  100. },
  101. {
  102. name: '小米2',
  103. value: 4
  104. }
  105. ]
  106. },
  107. {
  108. name: '中兴',
  109. value: 1
  110. }
  111. ]
  112. }
  113. ]
  114. });
  115. });
  116. </script>
  117. </body>
  118. </html>