Echarts 标签过长如何让axisLabel换行、省略显示、X轴字体大小颜色设置

时间:2024-05-24 07:21:15

js代码:

option = {
    xAxis: {
        type: 'category',
        data: ['Mon-542-安徽合肥市蜀山区五里墩街道', 'Tue', 'Wed', 'Thu','fri','sat','sun'],
        axisLabel : {
            interval : 0,
            textStyle:{
                 color:"red", //刻度颜色
                 fontSize:16  //刻度大小
            },
            formatter : function(params){
                var newParamsName = "";
                var paramsNameNumber = params.length;
                var provideNumber = 4;
                var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
                if (paramsNameNumber > provideNumber) {
                    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 {
                            if(p > 2){
                                tempStr = "...";
                                newParamsName += tempStr;
                                break;
                            }else{
                                tempStr = params.substring(start, end);
                                if(p < 2){
                                    tempStr += "\n";
                                }
                            }
                        }
                        newParamsName += tempStr;
                    }
    
                } else {
                    newParamsName = params;
                }
                return newParamsName
            }
        }
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar'
    }]
};

显示效果:

Echarts 标签过长如何让axisLabel换行、省略显示、X轴字体大小颜色设置

示例运行网址:http://echarts.baidu.com/examples/editor.html?c=bar-simple

参照网址:https://blog.****.net/r4nqian/article/details/47834093