treemap-simple.html 5.0 KB

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