如何在ECharts桑基图的节点名称旁添加数值

要实现节点标签旁直接显示对应数值，需先计算每个节点的总流量值，再通过配置label的格式化规则来拼接名称与数值，修改后的代码如下：

{
    "title": {
        "text": "Zodiac - Gender - Hobby",
        "subtext": "et",
        "left": "center",
        "top": "top"
    },
    "tooltip": {
        "trigger": "item",
        "triggerOn": "mousemove"
    },
    "animation": false,
    "series": [
        {
            "type": "sankey",
            "emphasis": {
                "focus": "adjacency"
            },
            "nodeAlign": "justify",
            "orient": "horizontal",
            // 新增label配置，控制标签显示格式
            "label": {
                "show": true,
                "formatter": "{b} ({c})"
            },
            "data": [
                {
                    "name": "Male",
                    "value": 157 // 总流出：56+24+77
                },
                {
                    "name": "Run",
                    "value": 56
                },
                {
                    "name": "Basketball",
                    "value": 24
                },
                {
                    "name": "Football",
                    "value": 77
                }
            ],
            "links": [
                {
                    "source": "Male",
                    "target": "Run",
                    "value": 56
                },
                {
                    "source": "Male",
                    "target": "Basketball",
                    "value": 24
                },
                {
                    "source": "Male",
                    "target": "Football",
                    "value": 77
                }
            ],
            "lineStyle": {
                "color": "source",
                "curveness": 0.5
            }
        }
    ]
}

关键修改说明： #

• 给每个节点的data项补充value字段：该值为节点的总流入/流出流量（比如Male的总流出是所有关联links的value之和）
• 添加label配置：通过formatter: "{b} ({c})"将节点名称（{b}）和对应数值（{c}）拼接显示，show: true确保标签默认可见

内容的提问来源于stack exchange，提问作者MSM