Treemap is an analysis tool used to represent proportional data in groups and hierarchies. It can not only display complex data relations through rectangular area, arrangement and color, and has the function of group and hierarchical relationship display, but also can intuitively reflect the comparison between the same level, presenting the data proportion relationship of tree structure.
The number of customers received by sales representatives led by each sales manager in a certain company in a month is shown in the table.
The number of customers received by sales representatives led by sales managers in a certain company in a certain month is used to show the hierarchical relationship among sales managers, sales representatives and customers, as shown in the figure. As can be seen from the figure, the rectangles in the figure have three different gray scales and areas. Among them, each gray level represents a sales manager, and the size of the area represents the number of customers.
Source code is as follows:
<html> <head> <meta charset="utf-8"> <! <script SRC ="js/echarts.js"></script> </head> <body> <! <div id="main" style="width: 700px; height: 600px"></div> <script type="text/javascript"> Var myChart = echarts.init(document.getelementById ("main")); Function getLevelOption() {return [{itemStyle: {borderWidth: 0, gapWidth: 5}}, {itemStyle: {gapWidth: 1}}, {colorSaturation: [0.35, 0.5], itemStyle: {gapWidth: 1, borderColorSaturation: 0.6}}]; } var option = {// specify the chart configuration item and data title: {// configure the title component text: 'rectangle tree ', top: 15, textStyle: {color: 'green'}, left: 270}, series: [{name: 'all ', type: 'treemap', levels: getLevelOption(), data: [{name:' hight ', //First tree value: 24, children: [{name: 'huang Zhu ', //First leaf of First tree value: 2}, {name:' Liu Wangjia ', //Second leaf of First tree value: 2}, 4}, {name: 'li Ke ', //Second leaf of first tree value: 10}, {name:' CAI Ming lang ', //Second leaf of first tree value: 10}, {name: 'CAI Ming lang ', //Second leaf of first tree value: 5}]}, {name: 'liu ', // children: [{name:' hu Bin ', //First leaf of First tree value: 3}, {name: ' ', //Second leaf of first tree value: 7}, {name: ' ', //Second leaf of first tree value: 6}]}, {name: 'Yuan Po ', //First tree value: 10, children: [{name:' liu Jun-yuan ', //First leaf of First tree value: 4}, {name: ', //Second leaf of first tree value: 6}]}]}]}; // Display the graph mychart.setoption (option) with the configuration item and data just specified; </script> </body> </html>Copy the code