Echart矩形树图:简单实现矩形树图

  • Post author:
  • Post category:其他


​​矩形树图定义:矩形树图( Treemap)也叫矩形式树状结构图,它采用多组面积不等的矩形嵌套而成。在一张图中,所有矩形的面积之和代表了总体数据。各个小矩形的面积表示每个子项的占比,矩形面积越大,表示子数据在整体中的占比越大。

矩形树图作用:

矩形树图把具有层次关系的数据可视化为一组嵌套的矩形,它直观地以面积表示数值,以颜色表示类目。所有矩形的面积之和表示整体的大小,各个小矩形的面积表示每个子项的占比,矩形面积越大,表示子数据在整体中的占比越大,擅长可视化带权重的数据关系。

echart官网例子:

在这里插入图片描述

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
                }
              ]
            }
          ]
        }
      ]
    }
  ]
};



版权声明:本文为weixin_40119412原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。