echarts中lable文字过长可以换行或者竖排显示

最新推荐文章于 2024-07-10 11:56:39 发布

my-coco

最新推荐文章于 2024-07-10 11:56:39 发布

阅读量9.5k

点赞数 3

分类专栏： echarts

echarts 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了如何使用ECharts实现坐标轴标签的竖排显示与换行显示，通过具体代码示例，展示了如何调整axisLabel参数来优化数据展示效果。

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

竖排显示

axisLabel: {
                        show: true,
                        interval: 0,
                            formatter:function(value)   //竖排显示
                             {  

                                 return value.split("").join("\n");  
                            } 
                      }

换行显示

 axisLabel: {
                        show: true,
                        interval: 0,
                        formatter: function (params) {
                            var newParamsName = "";
                            var paramsNameNumber = params.length;
                            var provideNumber = 3;  //一行显示几个字
                            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
                        },
                    }