使用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個的會自動換行了