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]
    }]
};

Echarts X轴文字类目斜体或垂直显示方法

方法二:

方法一的不足之处为当rotate设置为-90时文字为如下:

Echarts X轴文字类目斜体或垂直显示方法

故我们可以:

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]
    }]
};

Echarts X轴文字类目斜体或垂直显示方法

问题解决。