一、设置边距，防止标签溢出
以下代码都是在option对象中加入或更改。
grid: {
left: "10%", //相当于距离左边效果:padding-left
top: "15%", //相当于距离上边效果:padding-top
right: "3%",
bottom: "3%",
containLabel: true, //防止标签溢出
},
效果图对比：
二、将X轴文字改为竖排显示
1.基础效果
xAxis: {
type: 'category',
axisLabel: {
interval: 0 ,
// rotate: 30 , 文字倾斜角度
formatter: function (value) {
return value.split("").join("\n") //垂直显示
},
},
// ......
}
效果图：
因为之前设置【防止标签溢出】属性，所以导致了x轴文字越长，柱图部分的显现区越短。也就是说当x轴文字过长时，会导致柱图部分样式坍塌。
2.限制x轴文字显示长度
xAxis: {
type: 'category',
axisLabel: {
interval: 0 ,
formatter: function (value) {
let text,
length = 8; // 文字显示长度
if (value.length>length) {
text = value.slice(0,length) + '…'
} else {
text = value
}
return text.split("").join("\n") //垂直显示
},
},
// ......
},
效果图：
限制文字长度后，会导致x轴文字显示不全，可以加一个鼠标悬浮提示的效果。
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
3.设置x轴文字行高
有时候数据大屏的尺寸与像素不符，会导致x轴文字看起来比较拥挤、模糊等，可以设置行高来增强显示效果。
xAxis: {
type: 'category',
axisLabel: {
interval: 0 ,
formatter: function (value) {
let text,
length = 4; // 文字显示长度
if (value.length>length) {
text = value.slice(0,length) + '…'
} else {
text = value
}
return '{a|' +`${text.split("").join("\n")}` + '}' //垂直显示
},
rich:{
a:{
height:30, //设置行高
fontWeight: '900',
}
}
}
// ......
},
效果图：
完整代码
精彩文章
发表评论