Echarts X轴文字类目斜体或垂直显示方法
一、使用Echart的配置项axisLabel:
option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"],
axisLabel: {
interval:0,//横轴信息全部显示
rotate:-30,//-30度角倾斜显示
}
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
方法二:
方法一的不足之处为当rotate设置为-90时文字为如下:
故我们可以:
option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"],
axisLabel:{
interval:0 ,
formatter:function(val){
return val.split("").join("\n");
}
}
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
问题解决。