echarts的axisLabel的文字內容過長的四種解決辦法

方法一:這種方法就是將文本內容轉換爲字符串數組,然後再按需求換行,需要每行顯示幾個字可以自己設置

axisLabel:{
                                interval: 0,
                                //rotate:30,
                                formatter: function(val) {
                                    var strs = val.split(''); //字符串數組
                                    var str = ''
                                    for(var i = 0, s; s = strs[i++];) { //遍歷字符串數組
                                        str += s;
                                        if(!(i % 8)) str += '\n'; //按需要求餘
                                    }
                                    return str
                                }
                            },

方法二:就是讓座標值的內容旋轉一定的角度這樣也可以全部顯示出來

axisLabel:{
                                interval: 0,//讓所有座標值全部顯示
                                rotate:30,//讓座標值旋轉一定的角度

}

方法三:這種方法就是將文本內容按一定的長度截取,然後多餘的部分用 ... 拼接代替,這個方法的一個缺點就是沒辦法直觀的全部顯示文本內容

axisLabel:{
                                interval: 0,
                                //rotate:30,
                                formatter: function (name) {
                                    return (name.length > 8 ? (name.slice(0,8)+"...") : name ); 
                                },

}

方法四:這個方法和第一個方法類似,看起來比第一個方法複雜,不過能更完善一點

axisLabel : {
                               interval : 0,
                               function(params){
                                var newParamsName = "";// 最終拼接成的字符串
                                var paramsNameNumber = params.length;// 實際標籤的個數
                                var provideNumber = 8;// 每行能顯示的字的個數
                                var rowNumber = Math.ceil(paramsNameNumber / provideNumber);// 換行的話,需要顯示幾行,向上取整
                                /** 判斷標籤的個數是否大於規定的個數, 如果大於,則進行換行處理 如果不大於,即等於或小於,就返回原標籤 */
                               
                                if (paramsNameNumber > provideNumber) {// 條件等同於rowNumber>1
                                    /** 循環每一行,p表示行 */
                                    for (var p = 0; p < rowNumber; p++) {
                                        var tempStr = "";// 表示每一次截取的字符串
                                        var start = p * provideNumber;// 開始截取的位置
                                        var end = start + provideNumber;// 結束截取的位置
                                        // 此處特殊處理最後一行的索引值
                                        if (p == rowNumber - 1) {
                                            // 最後一次不換行
                                            tempStr = params.substring(start, paramsNameNumber);
                                        } else {
                                            // 每一次拼接字符串並換行
                                            tempStr = params.substring(start, end) + "\n";
                                        }
                                        newParamsName += tempStr;// 最終拼成的字符串
                                    }
                            
                                } else {
                                    // 將舊標籤的值賦給新標籤
                                    newParamsName = params;
                                }
                                //將最終的字符串返回
                                return newParamsName
                            }
           }

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章