echarts中怎么把x轴⽂字⽅向设置为竖向
1、调节坐标轴x轴⽂字为竖直⽅向
xAxis:{
axisLabel:{
color:'#333',
/
/  让x轴⽂字⽅向为竖向
interval:0,
formatter:function(value){
return value.split('').join('\n')
}
}
}
如图，在该位置添加 axisLabel 配置
2、调节柱状图宽度
series:[
{
name:'Forest',
type:'bar',
barGap:0,
label: labelOption,
<!--只需为series中添加⼀个barWidth -->
barWidth:30
data:[320,332,301,334,390]
}
]
3、解决最左边⼀根坐标轴超出Y轴：
只需要将xAxis中的boundaryGap属性设置为true
xAxis:{
type:'category',
<!--将下⾯的属性设置为true-->
boundaryGap:true,
data:[],
// 配置x轴颜⾊， xAxis.axisLine.lineStyle
axisLine:{
lineStyle:{
color:'#17b3a3'
}
}
4、解决当⽂字过长时，x轴标签显⽰不全的问题:
添加：interval: 0使标签完全显⽰
xAxis:{
type:'category',
axisLabel:{
color:'#333',
//  让x轴⽂字⽅向为竖向
<!--设置如下属性-->
interval:0
// rotate: 40
// formatter: function(value) {
//  return value.split('').join('\n')
// }
}
5、让x轴标签倾斜显⽰
rotate属性只需在xAxis中添加rotate:40 (40是倾斜⾓度，任意度数都可)
xAxis:{
type:'category',
boundaryGap:true,
data:[],
axisLabel:{
color:'#333',
//  让x轴⽂字⽅向为竖向
<!--设置rotate属性值-->
rotate:40
}
}
后续会根据遇到的情况持续更新!

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。