Echart 旭日图自定义标签

Question

option = {
    tooltip: {},
    series: {
        label: { rotate: 'tangential', },
        nodeClick: false,
        radius: ['15%', '80%'],
        type: 'sunburst',
        sort: null,
        data: [
            {
                name: "sun",
                value: 3456,
                itemStyle: { color: '#814175' },
                label: { formatter: '{b}\n\n{c}' },
                children: [{ name: '', value: 2221, itemStyle: { color: '#a4829d' }, }]
            },


            {
                name: "mon",
                value: 6555,
                itemStyle: { color: '#498ce7' },
                label: { formatter: '{b}\n\n{c}' },
                children: [{ name: '', value: 5001, itemStyle: { color: '#79aefa' }, }]
            },],

    }
};

https://i.stack.imgur.com/lcA0o.jpg

这是我的第一个图表 picture.When 我将鼠标悬停在标签被隐藏的图表上（第二张图片）。我需要在悬停时显示所有标签。

Answer 1

方法是将 formatter 分配给 emphasis 和 downplay。您可以为默认标签、悬停标签和非悬停标签设置不同的格式

series: [
    {
        type: 'sunburst',
        data: [],
        label: {
            formatter: 'E.g. A \n{b}\n\n{c}'
        },
        emphasis: {
            label: {
                formatter: 'E.g. B \n{b}\n\n{c}'
            }
        },
        downplay: {
            label: {
                formatter: 'E.g. C \n{b}\n\n{c}'
            }
        }
    }
]

Echart 旭日图自定义标签

Echart Custom label in sunburst chart

javascript

echarts

sunburst-diagram