1、傾斜顯示

2、換行顯示

 3、豎直顯示

4、隔兩行顯示

5、原始碼

var axisLabel1 = {
    // 方法1：傾斜顯示
    interval: 0, //強制全部顯示，1表示隔一個；2隔兩個
    rotate: "45", //文字傾斜的角度
};
var axisLabel2 = {
    // 方法2：換行顯示
    interval: 0, //強制全部顯示，1表示隔一個；2隔兩個
    formatter: function(params) {
        var newParamsName = ""; // 最終拼接成的字串
        var paramsNameNumber = params.length; // 實際標籤的個數
        var provideNumber = 3; // 每行能顯示的字的個數
        var rowNumber = Math.ceil(paramsNameNumber / provideNumber); // 換行的話，需要顯示幾行，向上取整
        /**
         * 判斷標籤的個數是否大於規定的個數， 如果大於，則進行換行處理 如果不大於，即等於或小於，就返回原標籤
         */
        // 條件等同於rowNumber>1
        if (paramsNameNumber > provideNumber) {
            /** 迴圈每一行,p表示行 */
            for (var p = 0; p < rowNumber; p++) {
                var tempStr = ""; // 表示每一次擷取的字串
                var start = p * provideNumber; // 開始擷取的位置
                var end = start + provideNumber; // 結束擷取的位置
                // 此處特殊處理最後一行的索引值
                if (p == rowNumber - 1) {
                    // 最後一次不換行
                    tempStr = params.substring(start, paramsNameNumber);
                } else {
                    // 每一次拼接字串並換行
                    tempStr = params.substring(start, end) + "\n";
                }
                newParamsName += tempStr; // 最終拼成的字串
            }

        } else {
            // 將舊標籤的值賦給新標籤
            newParamsName = params;
        }
        //將最終的字串返回
        return newParamsName;
    },
};
var axisLabel3 = {
    // 方法3：文字豎直顯示
    interval: 0, //強制全部顯示，1表示隔一個；2隔兩個
    formatter: function(params) {
        return params.split("").join("\n");
    },
};
var axisLabel4 = {
    // 方法1：傾斜顯示
    interval: 0, //強制全部顯示，1表示隔一個；2隔兩個
    // 方法4：隔兩個換行
    formatter: function(value, index) {
        if (index % 3 === 0) {
            return value;
        } else if (index % 3 === 1) {
            return '\n\n\n' + value;
        } else if (index % 3 === 2) {
            return '\n\n\n\n\n\n' + value;
        }
    }
};
option = {
    tooltip: {
        trigger: 'axis',
    },
    legend: {
        data: ['蒸發量']
    },
    grid: {
        top: 50,
        left: 200,
        right: 200,
        bottom: 350, //調節底部距離，防止X軸文字遮擋
    },
    xAxis: [{
        type: 'category',
        data: ['1月天氣情況預報', '2月天氣情況預報', '3月天氣情況預報', '4月天氣情況預報', '5月天氣情況預報', '6月天氣情況預報', '7月天氣情況預報', '8月天氣情況預報', '9月天氣情況預報', '10月天氣情況預報', '11月天氣情況預報', '12月天氣情況預報'],
        axisPointer: {
            type: 'shadow'
        },
        axisLabel: axisLabel1,//X軸文字樣式顯示
    }],
    yAxis: [{
        type: 'value',
        name: '水量',
        min: 0,
        max: 250,
        interval: 50,
        axisLabel: {
            formatter: '{value} ml'
        }
    }, ],
    series: [{
            name: '蒸發量',
            type: 'bar',
            data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
        },

    ]
};
 

option之外重新定義各屬性，如：

1、option.grid = echartGrid1;  //grid值等於echartGrid1

2、option.legend.show = true;  //legend的屬性show 值為true

3、option.xAxis[0].axisLabel.rotate = 0;  //這裡寫xAxis是無效的，必須寫成xAxis[0]