在做Echarts图表的时候 通常会遇到一个名字较长的分类或者字段名称 通常我们可以倾斜他 让他全部显示 但是这样的话X轴下方就会拉得比较长 在项目中需求通常也是会要求换行;
Echarts本身没有提供换行这个功能的 所以只有自己想办法;我这里是利用循环对字符串进行截取拼接的方式来解决的;
下面给一个示例,都有注释很好理解:
xAxis: [
{
type: 'category',
data: [],
axisLine:{
show:false //不显示横轴线
},
axisTick: {
alignWithLabel: true, //柱状图中心是否对齐刻度位置
show: false //不显示刻度
},
axisLabel: {
interval: 0,
formatter:function(value)
{
var ret = "";//拼接加\n返回的类目项
var maxLength = 5;//每项显示文字个数
var valLength = value.length;//X轴类目项的文字个数
var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
if (rowN > 1)//如果类目项的文字大于5,
{
for (var i = 0; i < rowN; i++) {
var temp = "";//每次截取的字符串
var start = i * maxLength;//开始截取的位置
var end = start + maxLength;//结束截取的位置
//这里也可以加一个是否是最后一行的判断,但是不加也没有影响,那就不加吧
temp = value.substring(start, end) + "\n";
ret += temp; //凭借最终的字符串
}
return ret;
}
else {
return value;
}
}
}
}
],
我们来看下效果: