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 }
]
}
// 可以添加更多的数据项和层级关系
],
tooltip: {
formatter: function (params) {
// 获取当前节点的数据
var data = params.data;
// 判断是否为叶子节点
if (data.children) {
// 如果有子节点,显示父节点名称和值
return data.name + ': ' + data.value;
} else {
// 如果是叶子节点,显示父节点和当前节点名称以及值
return data.parent.name + ' > ' + data.name + ': ' + data.value;
}
}
},
label: {
show: true,
position: 'inside'
},
emphasis: {
label: {
show: true
}
}
}
]
};
在上述示例中,通过配置 tooltip 属性的 formatter 回调函数,您可以根据当前节点的数据判断是否为叶子节点,然后动态生成提示框的内容。如果是叶子节点,则显示父节点和当前节点的名称以及值,否则只显示父节点的名称和值。
这样配置之后,当用户鼠标移到 Treemap 的某个节点上时,提示框的内容将会根据节点的情况进行动态显示。
转载请注明出处:http://www.zyzy.cn/article/detail/5422/ECharts