矩形树图 Treemap

用矩形面积表示层级数据的值大小。

效果

在线预览

在线模拟尺寸:

基本用法

数据为树形结构，与旭日图格式相同。

{
  data: [
    {
      name: '技术',
      children: [
        { name: 'Vue3', value: 40 },
        { name: 'React', value: 35 },
        { name: 'Docker', value: 20 },
        { name: 'K8s', value: 15 }
      ]
    },
    {
      name: '运营',
      children: [
        { name: 'SEO', value: 25 },
        { name: '投放', value: 30 },
        { name: '社媒', value: 18 }
      ]
    }
  ],
  series: [{
    type: 'treemap',
    yField: 'value'
  }]
}

• 顶层节点使用不同基色
• 子节点颜色自动按深度变浅
• 选中高亮时有描边指示

系列配置项

属性	类型	默认值	说明
type	string	-	固定 'treemap'
yField	string	'value'	数值字段