在 ECharts 中,Treemap(树图)是一种用于展示层级关系的图表类型。通过 series 组件的配置,可以创建 Treemap 图。以下是一个简单的 Treemap 配置示例:
option = {
    title: {
        text: 'Treemap 示例'
    },
    series: [
        {
            name: 'Treemap',
            type: 'treemap',
            data: [
                {
                    name: '类别1',
                    value: 10,
                    children: [
                        { name: '子类别1-1', value: 5 },
                        { name: '子类别1-2', value: 3 },
                        { name: '子类别1-3', value: 2 }
                    ]
                },
                {
                    name: '类别2',
                    value: 8,
                    children: [
                        { name: '子类别2-1', value: 4 },
                        { name: '子类别2-2', value: 3 },
                        { name: '子类别2-3', value: 1 }
                    ]
                }
                // 可以添加更多的数据项和层级关系
            ],
            leafDepth: 2, // 叶子节点的层级深度,可选,默认为无穷大,表示所有节点都是叶子节点
            roam: true,   // 是否开启漫游,可以通过拖拽和缩放来浏览数据
            label: {
                show: true, // 是否显示标签
                position: 'inside' // 标签的位置,可选值为 'top', 'inside', 'bottom', 'left', 'right'
            }
        }
    ]
};

在这个例子中,type: 'treemap' 表示这是一个 Treemap 图。data 属性包含了 Treemap 中的数据结构,每个数据项包括 name(名称)、value(值)以及可选的 children(子节点)。

其他常用的 Treemap 配置项包括:

  •  leafDepth: 叶子节点的层级深度,控制显示的层级,默认为无穷大,表示所有节点都是叶子节点。

  •  roam: 是否开启漫游,即是否允许用户通过拖拽和缩放来浏览数据。

  •  label: 标签配置,用于设置标签的显示与位置等。


您可以根据实际需求调整这些配置项,以满足您的可视化要求。


转载请注明出处:http://www.zyzy.cn/article/detail/5416/ECharts