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