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 }
]
}
// 可以添加更多的数据项和层级关系
],
breadcrumb: {
show: true, // 是否显示面包屑
emphasis: {
textStyle: {
fontSize: 18,
color: 'red'
}
}
},
label: {
show: true,
position: 'inside'
},
emphasis: {
label: {
show: true
}
}
}
]
};
在上述示例中,通过配置 breadcrumb 属性,可以实现显示当前节点的路径面包屑。show: true 表示显示面包屑,而 emphasis 部分用于配置面包屑的强调状态下的样式,包括字体大小和颜色等。
这样配置之后,当您在 Treemap 中点击某个节点时,面包屑将显示当前节点的路径,使用户更清晰地了解当前位置。
转载请注明出处:http://www.zyzy.cn/article/detail/5421/ECharts