【Echarts】echarts 座標文字axisLabel根據需求換行展示
阿新 • • 發佈:2018-11-24
在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