echarts x轴文字倾斜 换行

换行示意图：

换行示意图代码：

option = {
    xAxis: {
        type: 'category',
        axisLabel: {
            textStyle: {
              fontSize: 12
            },
            // 换行
            formatter: function(value){ //这里案例的value不超过6个字符
                var str = value.slice(0,3) + '\n' + value.slice(3)
                return str
            },
            // 倾斜
            // rotate:-45
        },
        data: ['西游记', '红楼梦', '三国演义', '水浒传', '一千零一夜', '鲁滨逊漂流记', '格林童话']
    },
    yAxis: {
        type: 'value',
        // 分隔线
        splitLine: {
            show: true 
        },
        // 坐标轴轴线
        axisLine: {
            show: false
        },
        // 坐标轴刻度
        axisTick: {
            show: false
        },
        // 刻度标签
        axisLabel: {
            show: false
        }
    },
    tooltip:{
        trigger: 'axis',
        axisPointer: {
            type: 'cross'
        },
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
        // 线条样式
        itemStyle: {
            color: '#3A84FF'
        },
        // 区域填充样式
        areaStyle: {
            color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                    offset: 0, color: 'rgba(58,132,255, 0.5)' // 0% 处的颜色
                }, {
                    offset: 1, color: 'rgba(58,132,255, 0)' // 100% 处的颜色
                }],
                global: false // 缺省为 false
            }
        },
    }]
};

换行关键代码：在formatter函数里换行

axisLabel: {
    textStyle: {
      fontSize: 12
    },
    // 换行
    formatter: function(value){ //这里案例的value不超过6个字符
        var str = value.slice(0,3) + '\n' + value.slice(3)
        return str
    },
    // 倾斜
    // rotate:-45
},

倾斜示意图：

倾斜关键代码：配置rotate属性值

axisLabel: {
    textStyle: {
      fontSize: 12
    },
    // 换行
    // formatter: function(value){ //这里value不超过6个字符
    //     var str = value.slice(0,3) + '\n' + value.slice(3)
    //     return str
    // },
    // 倾斜
    rotate:-45
},

注意rotate取值范围是-90到90

对于更多的字符还可以采取换行和倾斜相结合的方式：

关键代码：

axisLabel: {
    textStyle: {
      fontSize: 12
    },
    // 换行
    formatter: function(value){
        var str = value.slice(0,3) + '\n' + value.slice(3)
        return str
    },
    // 倾斜
    rotate:-45
},

如果本文对你有帮助，请点个赞吧！