ECharts 图例文本对齐，告别长短不一！

Smile_ping2026-08-20 20:49

ECharts 饼图图例格式化实战

效果图

实现

思路： 我们可以将图例文本划分为两个独立的区域：

name 区域：固定宽度（例如 80px），所有名称左对齐。
percent 区域：紧接在 name 区域之后显示，由于 name 宽度固定，所有百分比将从同一垂直位置开始，实现了整齐的左对齐。

关键代码实现：

javascript 复制代码

legend: {
    orient: 'vertical', // 垂直布局
    top: '12%',
    right: '0',
    itemWidth: 10,
    itemHeight: 10,
    icon: 'circle',
    textStyle: {
        fontSize: 12,
        color: '#666',
        // 核心：定义富文本样式
        rich: {
            name: {
                width: 80,      // 固定宽度
                align: 'left'   // 名称左对齐
            }
            // percent 区域不需要额外配置，使用默认样式即可
        }
    },
    formatter: function (name) {
        const item = pieChartData.find((d) => d.name === name);
        if (item) {
            const percent = ((item.value / pieTotal) * 100).toFixed(2) + '%';
            // 使用模板字符串 {样式名|内容} 应用 rich 样式
            return `{name|${name}}{percent|  ${percent}}`;
        }
        return name;
    }
}

效果：无论 name 是 4个还是6个字，它都会被限制在 80px 的框内。因此，所有的 percent 内容都会从几乎相同的 x 坐标位置开始，形成了完美的对齐效果。