echarts x轴文字太长换行、文字倾斜、文字竖直展示
·
x轴若文字太长会导致文字重合,有三种方法可以解决,在xAxis.axisLabel中设置formatter即可。
1.第一种是设置超过几个字可以换行显示,例子设置的是四个字
xAxis: {
axisLabel: {
formatter: function (params) {
var str = ""; // 最终拼接成的字符串
var paramsLen = params.length;// 获取每项文字的个数
var len = 4; // 每行能显示的字的个数(根据实际情况自己设置)
var rowNumber = Math.ceil(paramsLen / len); // 换行的话,需要显示几行,向上取整
if (paramsLen > len) { //大于设定的len就换行,不大于就不变化
for (var i = 0; i < rowNumber; i++) {
var temp = ""; // 表示每一次截取的字符串
var start = i * len; // 开始截取的位置
var end = start + len; // 结束截取的位置
if (i == rowNumber - 1) { // 最后一次不换行
temp = params.substring(start, paramsLen);
} else { // 每一次拼接字符串并换行
temp = params.substring(start, end) + "\n";
}
str += temp; // 最终拼成的字符串
}
} else { // 给新的字符串赋值
str = params;
}
return str; //返回字符串
}
},
},
2. 第二种是设置文字倾斜
xAxis: {
axisLabel: {
rotate:45 //设置的值大于0向右倾斜,小于0向左
}
}
3.第三种是设置文字竖直显示
xAxis: {
axisLabel: {
formatter: function (value) {
return value.split("").join("\n");
},
}
}
记录一下方便以后自己查阅方便用
原文地址:地址
更多推荐
已为社区贡献3条内容
所有评论(0)