在 ECharts 的 Treemap 中,您可以使用 breadcrumb 属性来显示当前节点的路径面包屑。面包屑是一种可视化工具,用于显示当前节点在 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 }
                    ]
                }
                // 可以添加更多的数据项和层级关系
            ],
            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