使用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 + '\n'
                                 })
                             }else{
                                 text = text.replace(/\S{2}/g,function(match){
                                     console.log(match);
                                     return match + '\n'
                                 })
                                 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 + '\n'
                                 })
                             }else{
                                 text = text.replace(/\S{2}/g,function(match){
                                     console.log(match);
                                     return match + '\n'
                                 })
                                 strlength = text.length;
                                 text = text.substring(0,strlength - 1);
                             }
                             return text
                         },
                     },
                     indicator: weidu
                 },
                 series: [{
                     name: '测评结果',
                     type: 'radar',
                     // areaStyle: {normal: {}},
                     data : [
                         {
                             value : fenshu,
                             name : '测评结果'
                         },
                     ]
                 }]
             };

最后效果如下:

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