echarts x轴 字 纵向_Echarts x轴文本内容太长的几种解决方案

echarts x轴标签文字过多导致显示不全

解决办法 1. xAxis.axisLabel 属性

axisLabel: {

interval:0, //坐标轴刻度标签的显示间隔(在类目轴中有效) 0:显示所有 1：隔一个显示一个 :3：隔三个显示一个...

rotate:-20 //标签倾斜的角度，显示不全时可以通过旋转防止标签重叠(-90到90)

}

如果x轴的文字如果太长会受到遮挡，这个时候可以用grid属性解决。

设置grid属性定义图的大小来释放空间，使得axislabel有足够的空间

grid: {

x: 40, //左

y: 40, //上

x2: 40, //右

y2: 50 //下

},

xAxis: {

data: ['衬衫', "羊毛衫", "雪纺衫文字加长", "裤子文字加长", "高跟鞋文字加长", "袜子", "棉服", "毛呢外套"],

axisLabel: {

interval: 0,

rotate: -20

}

},

解决方法 2. 调用formatter文字竖直显示

当文字不是特别长的情况下可设置文字自动换行，调用formatter回调函数实现。

xAxis: {

data: ['衬衫', "羊毛衫", "雪纺衫文字加长", "裤子文字加长", "高跟鞋文字加长", "袜子", "棉服", "毛呢外套"],

axisLabel: {

interval: 0,

formatter:function(value){

return value.split("").join("\n");

}

}

},

试一下两个字换行。如下：

xAxis: {

data: ['衬衫', "羊毛衫", "雪纺衫文字加长", "裤子文字加长", "高跟鞋文字加长", "袜子", "棉服", "毛呢外套"],

axisLabel: {

interval: 0,

formatter:function(value){

var str = "";

var num = 2; //每行显示字数

var valLength = value.length; //该项x轴字数

var rowNum = Math.ceil(valLength / num); // 行数

if(rowNum > 1) {

for(var i = 0; i < rowNum; i++) {

var temp = "";

var start = i * num;

var end = start + num;

temp = value.substring(start, end) + "\n";

str += temp;

}

return str;

} else {

return value;

}

}

}

},

解决办法 3. X轴类目项隔一个换行(使用formatter中index参数)

xAxis: {

data: ['衬衫', "羊毛衫", "雪纺衫文字加长", "裤子文字加长", "高跟鞋文字加长", "袜子", "棉服", "毛呢外套"],

axisLabel: {

interval: 0,

formatter:function(value,index){

if (index % 2 != 0) {

return '\n\n' + value;

}

else {

return value;

}

}

}

},