echarts的x轴标签重叠 解决
1:Echarts X 轴 标签倾斜摆放2:Echarts X 轴 限制每行字数,换行显示使用axisLabel的formatter函数,一行显示多少字数,超过则换行用正则替换3:Echarts X 轴 垂直竖显文字与第2点同理,只是变成了一个字换行,字符串-》数组=》字符串,如下4:Echarts X 轴 隔行显示与第2点同理,标签奇数换在下一行显示...
·
1:Echarts X 轴 标签倾斜摆放
axisLabel: {
// X 坐标轴标签相关设置,写在xAxis里面
interval: 0,//全部标签显示
rotate: '45'//标签倾斜度数
}
2:Echarts X 轴 限制每行字数,换行显示
使用axisLabel的formatter函数,一行显示多少字数,超过则换行
formatter: function (params) {
var provideNumber = 4; // 每行显示的字数
if (params && params.toString().length > provideNumber) {
var strToArr = params.toString().split('');
for (var i = provideNumber; i <= params.toString().length; i += provideNumber + 1) {
strToArr.splice(i, 0, '\n');
}
return strToArr.join('');
}
return params
}
用正则替换
formatter: function (params) {
var provideNumber = 4; // 每行显示的字数
if (params && params.toString().length > provideNumber) {
return params.toString().replace(/(.{4})/g, "$1\n")
}
return params
}
3:Echarts X 轴 垂直竖显文字
与第2点同理,只是变成了一个字换行,字符串-》数组=》字符串,如下
return value.split('').join('\n');
4:Echarts X 轴 隔行显示
与第2点同理,标签奇数换在下一行显示
if (index % 2 != 0) {
return '\n\n' + params;
} else {
return params;
}
5:正则表达式中添加变量,应用echarts的x轴标签重叠 解决
let provideNumber = 4;
let reg = new RegExp("(.{" + provideNumber + "})", "g");
params.toString().replace(reg, "$1\n")
等价于
params.toString().replace(/(.{4})/g, "$1\n")
应用echarts的x轴标签重叠 解决:https://blog.csdn.net/HDdgut/article/details/125743064
更多推荐
已为社区贡献3条内容
所有评论(0)