echarts X轴文本数据太长溢出问题
【代码】echarts X轴文本数据太长溢出问题。
·
// 1.方法一
// 在宽度有限,数据偏多的情况下,我们会遇到第一个和最后一个数据溢出问题,针对这个问题官方文档给出的解决方法是使X轴数据倾斜显示。
axisLabel: { // 坐标轴刻度标签的相关设置
interval: 0,// 设置这个强制显示所有标签文字
rotate:'45',// 旋转度数
}
// 方法二:使用formatter函数,给xAxis的formatter配置项返回一个字符串来达到,换行显示文本的效果
// 文字竖排显示
axisLabel: { // 坐标轴刻度标签的相关设置
interval: 0,
formatter:function(value){
return value.split("").join("\n");
},
}
// 文字横排显示
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;
}
}
}
axisLabel: {
formatter: function (params) {
var newParamsName = '' // 拼接后的新字符串
var paramsNameNumber = params.length // 实际标签数
var provideNumber = 5 // 每行显示的字数
var rowNumber = Math.ceil(paramsNameNumber / provideNumber) // 如需换回,算出要显示的行数
if (paramsNameNumber > provideNumber) {
/** 循环每一行,p表示行 */
for (var i = 0; i < rowNumber; i++) {
var tempStr = '' // 每次截取的字符串
var start = i * provideNumber // 截取位置开始
var end = start + provideNumber // 截取位置结束
if (end > provideNumber * 2) {
newParamsName += '...'
break
// 最后一行的需要单独处理
} else {
if (i === rowNumber - 1) {
tempStr = params.substring(start, paramsNameNumber)
} else {
tempStr = params.substring(start, end) + '\n'
}
}
newParamsName += tempStr
}
} else {
newParamsName = params
}
return newParamsName
},
}
//超出显示...
axisLabel: {
formatter: function (params, index) {
const chat = 4 // 想要获取的字节长度
if (params.length > chat) {
return params.substring(0, chat) + '...'
} else {
return params
}
},
}

DAMO开发者矩阵,由阿里巴巴达摩院和中国互联网协会联合发起,致力于探讨最前沿的技术趋势与应用成果,搭建高质量的交流与分享平台,推动技术创新与产业应用链接,围绕“人工智能与新型计算”构建开放共享的开发者生态。
更多推荐
所有评论(0)