在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