X轴、Y轴label文字过长的四种处理方式

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]