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

最新推荐文章于 2024-09-19 11:21:24 发布

理部尚书

最新推荐文章于 2024-09-19 11:21:24 发布

阅读量3.4k

点赞数 3

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/qq_36836370/article/details/130379686

版权

当Echarts柱状图的X轴文字过长时，可以通过设置axisLabel的formatter函数和rotate属性来实现文字省略和倾斜展示。一种方法是设定字数限制，超出部分显示为点；另一种是利用换行显示，通过interval属性控制标签显示的间隔。

摘要由CSDN通过智能技术生成

在前端开发任务中使用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;
                },
            }
        }],