旭日形图中的 Echart 自定义标签答案

【问题标题】：Echart Custom label in sunburst chart旭日形图中的 Echart 自定义标签
【发布时间】：2020-03-05 13:19:46
【问题描述】：

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

这是我在第一张图片中的图表。当我将图表悬停时，标签被隐藏（第二张图片）。我需要在悬停时显示所有标签。

【问题讨论】：

标签： javascript echarts sunburst-diagram

【解决方案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}'
            }
        }
    }
]

【讨论】：