ECharts雷达图指示器文字过长需要换行

1.场景：

在开发app时，由于手机宽度不够，雷达图指示器文字太长溢出屏幕，见下图箭头所指：

image.png

2.解决思路：

文字换行显示。按照网上和官方提供的方法，在name里增加formatter: function(text){}，代码如下：

option = {
    title: {
        text: '基础雷达图'
    },
    tooltip: {},
    legend: {
        data: ['长恨歌']
    },
    radar: {
        // shape: 'circle',
        name: {
            textStyle: {
                color: '#fff',
                backgroundColor: '#999',
                borderRadius: 3,
                padding: [3, 5]
           },
           //指示器文字换行 start
           formatter: function(text){
                var strlength = text.length;
                if(strlength % 4 != 0){
                    text = text.replace(/\S{4}/g,function(match){
                        console.log(match);
                        return match + '\n'
                    })
                }else{
                    text = text.replace(/\S{4}/g,function(match){
                        console.log(match);
                        return match + '\n'
                    });
                    strlength = text.length;
                    text = text.substring(0,strlength - 1);
                }
                return text
            }
            //指示器文字换行 end
        },
        indicator: [
           { name: '六宫粉黛无颜色回眸一笑百媚生', max: 6500},
           { name: '天生丽质难自弃一朝选在君王侧', max: 16000},
           { name: '六宫粉黛无颜色回眸一笑百媚生', max: 30000},
           { name: '天生丽质难自弃一朝选在君王侧', max: 38000},
           { name: '六宫粉黛无颜色回眸一笑百媚生', max: 52000},
           { name: '天生丽质难自弃一朝选在君王侧', max: 25000}
        ]
    },
    series: [{
        name: '长恨歌',
        type: 'radar',
        data : [
            {
                value : [4300, 10000, 28000, 35000, 50000, 19000],
                name : '长恨歌'
            }
        ]
    }]
};

效果如下：

image.png
...看到了一个问题，外面文字是换行了，里面由于\n原因解释成空格了,此时需要再formatter:function (params){}处理一下tooltip：

        formatter:function (params){
            var names = [
                '六宫粉黛无颜色回眸一笑百媚生',
                '天生丽质难自弃一朝选在君王侧',
                '六宫粉黛无颜色回眸一笑百媚生',
                '天生丽质难自弃一朝选在君王侧',
                '六宫粉黛无颜色回眸一笑百媚生',
                '天生丽质难自弃一朝选在君王侧'
            ];
            var data = '';
            for(var i=0; i<params.data.value.length; i++){
                data += names[i]+ params.data.value[i]+ '<br/>';
            }
            return params.data.name+'<br/>'+data;
        }

可以了：

image.png

3.完整代码：

option = {
    title: {
        text: '基础雷达图'
    },
    tooltip: {
        formatter:function (params){
            var names = [
                '六宫粉黛无颜色回眸一笑百媚生',
                '天生丽质难自弃一朝选在君王侧',
                '六宫粉黛无颜色回眸一笑百媚生',
                '天生丽质难自弃一朝选在君王侧',
                '六宫粉黛无颜色回眸一笑百媚生',
                '天生丽质难自弃一朝选在君王侧'
            ];
            var data = '';
            for(var i=0; i<params.data.value.length; i++){
                data += names[i]+ params.data.value[i]+ '<br/>';
            }
            return params.data.name+'<br/>'+data;
        }
    },
    legend: {
        data: ['长恨歌']
    },
    radar: {
        // shape: 'circle',
        name: {
            textStyle: {
                color: '#fff',
                backgroundColor: '#999',
                borderRadius: 3,
                padding: [3, 5]
           },
           //指示器文字换行 start
           formatter: function(text){
                var strlength = text.length;
                if(strlength % 4 != 0){
                    text = text.replace(/\S{4}/g,function(match){
                        console.log(match);
                        return match + '\n'
                    })
                }else{
                    text = text.replace(/\S{4}/g,function(match){
                        console.log(match);
                        return match + '\n'
                    });
                    strlength = text.length;
                    text = text.substring(0,strlength - 1);
                }
                return text
            }
            //指示器文字换行 end
        },
        indicator: [
           { name: '六宫粉黛无颜色回眸一笑百媚生', max: 6500},
           { name: '天生丽质难自弃一朝选在君王侧', max: 16000},
           { name: '六宫粉黛无颜色回眸一笑百媚生', max: 30000},
           { name: '天生丽质难自弃一朝选在君王侧', max: 38000},
           { name: '六宫粉黛无颜色回眸一笑百媚生', max: 52000},
           { name: '天生丽质难自弃一朝选在君王侧', max: 25000}
        ]
    },
    series: [{
        name: '长恨歌',
        type: 'radar',
        data : [
            {
                value : [4300, 10000, 28000, 35000, 50000, 19000],
                name : '长恨歌'
            }
        ]
    }]
};