使用echart的雷达图的时候,如果文字越界的解决办法记录,标签文字自动换行

使用echart的雷达图的时候,如果文字越界的解决办法记录,标签文字自动换行

前几天项目中有一个图表的是用echart生成的,遇到一个问题,就是在手机端显示的售时候,如果文字太长就会超出div,之前的效果如图所示:

后来查资料,发现这个标签的文字是可以自定义的,定义方式如下:

formatter: function(text){
                            var strlength = text.length;
                            if(strlength % 2 == 1){
                                text = text.replace(/S{2}/g,function(match){
                                    console.log(match);
                                    return match + '
'
                                })
                            }else{
                                text = text.replace(/S{2}/g,function(match){
                                    console.log(match);
                                    return match + '
'
                                })
                                strlength = text.length;
                                text = text.substring(0,strlength - 1);
                            }
                            return text
                        },

完整配置如下:

var option = {
                title: {
                    text: ''
                },
                tooltip: {},
                legend: {
                     x : 'right',
                     y : 'top',
                    data: ['测评结果', ]
                },
                radar: {
                    // shape: 'circle',
                    name: {
                        textStyle: {
                            color: '#fff',
                            backgroundColor: '#999',
                            borderRadius: 3,
                            padding: [3, 5]
                       },
                        formatter: function(text){
                            var strlength = text.length;
                            if(strlength % 2 == 1){
                                text = text.replace(/S{2}/g,function(match){
                                    console.log(match);
                                    return match + '
'
                                })
                            }else{
                                text = text.replace(/S{2}/g,function(match){
                                    console.log(match);
                                    return match + '
'
                                })
                                strlength = text.length;
                                text = text.substring(0,strlength - 1);
                            }
                            return text
                        },
                    },
                    indicator: weidu
                },
                series: [{
                    name: '测评结果',
                    type: 'radar',
                    // areaStyle: {normal: {}},
                    data : [
                        {
                            value : fenshu,
                            name : '测评结果'
                        },
                    ]
                }]
            };

最后效果如下:

文字超过2个的会自动换行了