echarts柱状图x轴文字太多如何解决?超出省略显示成点例子代码

        在前端开发任务中使用echarts柱状图时,会出现x轴某项文字太长了这种情况,那么echarts柱状图x轴文字太多如何解决?办法是超出省略显示成点就行效果图看下图所示,在x轴的axisLabel里加一个formatter函数,index等于3表示字数为3个超出就显示成点。

横坐标倾斜加省略

rotate: 30, 倾斜30度

xAxis: [{
            type: 'category',
            data: xData,
            axisPointer: {
                type: 'shadow'
            },
            axisLabel: {
                interval: 0,
                rotate: 30,
                //多出字可以省略显示成点
                formatter: function (params){
                    var index = 6; //字数为6个超出就显示成点
                    var newstr = '';
                    for(var i = 0; i< params.length; i += index){
                        var tmp = params.substring(i, i+index);
                        newstr += tmp +'';
                    }
                    if( newstr.length > 6)
                        return newstr.substring(0, 6) + '...';
                    else
                        return '\n'+newstr;
                },
            }
        }],

展示效果如下

横坐标换行展示

interval: 0,属性展示全部,当横坐标的空间不足也会存在隐藏

xAxis: [{
            type: 'category',
            data: xData,
            axisPointer: {
                type: 'shadow'
            },
            axisLabel: {
                interval: 0,
                formatter: function (params) {
                    let newParamsName = '';
                    const paramsNameNumber = params.length; // 文字总长度
                    const provideNumber = 6; //一行显示几个字
                    const rowNumber = Math.ceil(paramsNameNumber / provideNumber);
                    if (paramsNameNumber > provideNumber) {
                        for (let p = 0; p < rowNumber; p++) {
                            const start = p * provideNumber;
                            const end = start + provideNumber;
                            const tempStr = p === rowNumber - 1 ? params.substring(start, paramsNameNumber) : params.substring(start, end) + '\n';
                            newParamsName += tempStr;
                        }
                    } else {
                        newParamsName = params;
                    }
                    return newParamsName;
                },
            }
        }],

猜你喜欢

转载自blog.csdn.net/qq_36836370/article/details/130379686
今日推荐