echarts x轴标签文字过多导致显示不全
标签显示不全
解决办法1：xAxis.axisLabel 属性
axisLabel的类型是object ,主要作用是：坐标轴刻度标签的相关设置。（当然yAxis也是一样有这个属性的）
axisLabel: {
interval:0,
rotate:40
}
显示不全并将文字倾斜。如图：
倾斜设置
稍微解释一下interval:
坐标轴刻度标签的显示间隔(在类目轴中有效哦)，默认会采用标签不重叠的方式显示标签（也就是默认会将部分文字显示不全）
可以设置为0强制显示所有标签，如果设置为1，表示隔一个标签显示一个标签，如果为3，表示隔3个标签显示一个标签，以此类推
rotate：标签倾斜的角度，在类目轴的类目标签显示不全时可以通过旋转防止标签重叠（官方这样说的）旋转的角度是-90到90度
问题又来了，这个名称x轴的文字如果太长会受到遮挡，还是显示不全，这个时候可以用grid属性解决
grid: { left: '10%', bottom:'35%' },
如图：
image.png
解决办法2：调用formatter文字垂直显示
一般很多人都习惯办法1的方式虽然不是很完美，但是在一定程度上还是解决了一些问题。在文字不是非常多的情况下还是可以的，感觉还没第一种方法好
axisLabel中使用formatter回调，formatter有两个参数，使用方法是这样的formatter:function(value,index){} ，value是类目（测试医院A，人民医院）,index 是类目索引。
axisLabel: { interval: 0, formatter:function(value){ return value.split("").join("\n"); } }
垂直显示
文字竖直这个formatter实在有点太简单化了，所以我们来做一个两个字的加\n的换行。formatter如下：
axisLabel: {
fontSize: 8,
interval: 0,
formatter: function(params) {
var newParamsName = []; // 最终拼接成的字符串
var paramsNameNumber = params.length; // 实际标签的个数
var provideNumber = 2; // 每行能显示的字的个数
var rowNumber = Math.ceil(paramsNameNumber / provideNumber); // 换行的话，需要显示几行，向上取整
/** * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签 */
// 条件等同于rowNumber>1
if(paramsNameNumber > provideNumber) {
/** 循环每一行,p表示行 */
for(var p = 0; p < rowNumber; p++) {
var tempStr = ""; // 表示每一次截取的字符串
var start = p * provideNumber; // 开始截取的位置
var end = start + provideNumber; // 结束截取的位置
// 此处特殊处理最后一行的索引值
if(p == rowNumber - 1) {
tempStr = params.substring(start, paramsNameNumber); // 最后一次不换行
} else {
tempStr = params.substring(start, end); // 每一次拼接字符串并换行
}
newParamsName.push(`{p|${tempStr}}`); // 最终拼成的字符串
}
} else {
newParamsName.push(params); // 将旧标签的值赋给新标签
}
return newParamsName.join("\n"); //将最终的字符串返回
},
rich:{
p:{
align:'right'
}
}
},
效果如图
每行两个字
解决办法3：X轴类目项隔一个换行(使用formatter中index参数)
都是上面的第二种方法是利用formatter中的value参数实现了文字拼接\n换行的，但是index参数并没有使用，现在我们就一起来使用这两个参数实现隔一个类目项换行。
效果如图：
错行显示
代码比较简单：
axisLabel: {
interval: 0, formatter: function (value, index) {
if (index % 2 != 0) {
return '\n\n' + value;
} else {
return value;
}
}
}
``
以上几种方法基本上能解决问题，可能会有比这更好的办法。
