Echarts____坐标轴的名称显示不全，换行操作

最新推荐文章于 2025-06-11 17:14:46 发布

原创最新推荐文章于 2025-06-11 17:14:46 发布 · 3.9k 阅读

0 ·

CC 4.0 BY-SA版权

ReactJs 同时被 2 个专栏收录

21 篇文章

订阅专栏

图表

7 篇文章

订阅专栏

本文介绍如何使用ECharts实现X轴标签自动换行的功能，通过设置rotate、interval和formatter属性，使得过长的标签能够适配图表宽度，提高数据展示的清晰度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述
实现效果如图 X轴的名称是可以换行的，具体代码是：

{
                                        gridIndex:2,
                                        data:xAxisData3,
                                        axisLabel:{
                                            rotate:30,
                                            interval:0,
                                            textStyle:{
                                            fontSize:'14px',
                                            },
                                            formatter:function(params) {
                                                var newParamsName = "";
                                                var paramsNameNumber = params.length;
                                                var provideNumber = 7;  //一行显示几个字
                                                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 {
                                                            tempStr = params.substring(start, end) + "\n";
                                                        }
                                                        newParamsName += tempStr;
                                                    }

                                                } else {
                                                    newParamsName = params;
                                                }
                                                return newParamsName ;
                                            },
                                        }
                                    }