1. 程式人生 > >【Echarts】echarts 座標文字axisLabel根據需求換行展示

【Echarts】echarts 座標文字axisLabel根據需求換行展示

在echart開發中座標文字有時候受佈局的限制,字數或者長度無法展示完整,這時候我們可以參考echart的官方api為axisLabel定義旋轉角度,這裡方法就不再做介紹,本篇主要分享一下文字內容按照需求來實現換行展示:

一、JS程式碼

	 		axisLabel: {
                            interval: 0,
                            formatter:function(value){
                                var result = "";//拼接加\n返回的類目項
                                var maxLength = 2;//每項顯示文字個數
                                var valLength = value.length;//X軸類目項的文字個數
                                var rowNumber = Math.ceil(valLength / maxLength); //類目項需要換行的行數
                                if (rowNumber > 1)//如果文字大於3,
                                {
                                    for (var i = 0; i < rowNumber ; i++) {
                                        var temp = "";//每次擷取的字串
                                        var start = i * maxLength;//開始擷取的位置
                                        var end = start + maxLength;//結束擷取的位置
                                        temp = value.substring(start, end) + "\n";
                                        result += temp; //拼接生成最終的字串
                                    }
                                    return result ;
                                }
                                else {
                                    return value;
                                }
                            }
                        },

二、圖片效果
在這裡插入圖片描述

二、參考網址
Echarts官方文件:http://echarts.baidu.com/api.html#echarts