Echart rectangular tree diagram: simple implementation of rectangular tree diagram

​​ Rectangular tree definition ： Rectangular tree （ Treemap） Also called moment form tree structure , It is nested by several groups of rectangles with different areas . In one picture , The sum of the areas of all rectangles represents the overall data . The area of each small rectangle represents the proportion of each sub item , The larger the area of the rectangle , Indicates that the greater the proportion of sub data in the whole .

Rectangular tree graph function ：
The rectangular tree graph visualizes the hierarchical data into a set of nested rectangles , It intuitively represents the value in area , Show categories by color . The sum of the areas of all rectangles represents the overall size , The area of each small rectangle represents the proportion of each sub item , The larger the area of the rectangle , Indicates that the greater the proportion of sub data in the whole , Good at visualizing weighted data relationships .

echart Website example ：

option = {
    
  series: [
    {
    
      type: 'treemap',
      data: [
        {
    
          name: 'nodeA',
          value: 10,
          children: [
            {
    
              name: 'nodeAa',
              value: 4
            },
            {
    
              name: 'nodeAb',
              value: 6
            }
          ]
        },
        {
    
          name: 'nodeB',
          value: 20,
          children: [
            {
    
              name: 'nodeBa',
              value: 20,
              children: [
                {
    
                  name: 'nodeBa1',
                  value: 20
                }
              ]
            }
          ]
        }
      ]
    }
  ]
};