如何为Apache ECharts雷达图的长指标标签设置自动换行效果？

解决方案 #

方案1：手动插入换行符 #

直接在需要折行的标签内容中插入\n换行符即可，适配简单，适合标签内容固定的场景：

radar: {
    name: {
        textStyle: {
            color: '#fff',
            backgroundColor: '#999',
            borderRadius: 3,
            padding: [3, 5]
        }
    },
    indicator: [
        { name: 'sale', max: 6500},
        // 手动插入\n控制折行位置
        { name: 'I have problem for very long label.\nI need to wrap this line instead singgle long', max: 16000},
        { name: 'Information Techology', max: 30000},
        { name: 'Customer Support', max: 38000},
        { name: 'Development', max: 52000},
        { name: 'Marketing', max: 25000}
    ]
},

方案2：使用formatter自动按长度折行 #

如果标签内容是动态生成的，可通过radar.name.formatter回调函数自动按指定字数折行，不需要手动处理每个标签：

radar: {
    name: {
        // 新增formatter回调
        formatter: function (name) {
            // 每8个字符折一行，可根据实际需求调整数值
            let maxLength = 8;
            let result = [];
            for (let i = 0; i < name.length; i += maxLength) {
                result.push(name.slice(i, i + maxLength));
            }
            return result.join('\n');
        },
        textStyle: {
            color: '#fff',
            backgroundColor: '#999',
            borderRadius: 3,
            padding: [3, 5]
        }
    },
    indicator: [
        { name: 'sale', max: 6500},
        { name: 'I have problem for very long label. I need to wrap this line instead singgle long', max: 16000},
        { name: 'Information Techology', max: 30000},
        { name: 'Customer Support', max: 38000},
        { name: 'Development', max: 52000},
        { name: 'Marketing', max: 25000}
    ]
},

补充说明 #

• 两种方案都兼容你现有配置里的标签背景色、圆角、内边距样式，折行后背景会自动适配文本高度
• 如果你需要按固定宽度而非字数折行，可在formatter中结合canvas测量文本宽度的逻辑做更精确的控制

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