在 ECharts 中,您可以通过配置 tooltip 属性来实现 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 }
                    ]
                }
                // 可以添加更多的数据项和层级关系
            ],
            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