Echarts 关于axisLabel中值太长自动换行的问题处理

最新推荐文章于 2025-07-01 17:46:06 发布

weixin_33896726

最新推荐文章于 2025-07-01 17:46:06 发布

阅读量4.1k

点赞数 2

CC 4.0 BY-SA版权

文章标签： javascript python json ViewUI

原文链接：https://my.oschina.net/lixin891230/blog/534160

在使用Echarts制作报表时遇到X轴axisLabel无法自动换行的问题，导致显示重叠。通过计算每个axisLabel单元格宽度和文字数量，实现手动换行。具体步骤包括确定图表容器宽度、X轴宽度、每个标签宽度，然后根据容器宽度和标签个数计算每个标签显示的字数，并减少一定字数以优化显示。最后，提供了解决问题后的代码和完整示例。

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

2019独角兽企业重金招聘Python工程师标准>>>

在使用Echars做一个报表功能时，发现axisLabel（即：报表X轴中的lable）显示不能自动换行，导致前面的多个超长的axisLabel叠加在一起，很少写博客，不知道说没说清楚，还是直接上两张换行前的效果图吧。见下图：

换行前效果图（1）

换行前效果图（2）

解决方法思路：

解决方案中的计算参考图：

以柱状图为例：

1）图表初始化容器宽度 = x（x轴左间隙宽度，默认80） + width（X轴宽度） + x2（x轴右间隙宽度，默认80）;

2）图表X轴宽度（width） = 图表初始化容器宽度 - (x + width + x2);

3）每个axisLabel所在单元格宽度（xAxisWidth） = 图表X轴宽度（width） / 要显示的axisLabel个数（axisDataCount）

4）每个axisLabel单元格显示的字数 = xAxisWidth / 每个文件子的宽度尺寸（默认12）

5）每个axisLabel显示的字数 = 图表容器div的宽度 / axisLable个数（x轴柱子个数）

为了axisLabel显示的更好看点儿，可以将axisLabel的宽度多减去两到三个字的宽度

故：可将第4步中的计算改为：

4）每个axisLabel单元格显示的字数 = xAxisWidth / 单个文子的宽度（默认12） - （单个文子的宽度 * 2）

经过上面的计算后，将可知道每个axisLabel单元格间可显示的字数，所以在显示时，只需要按照这个字数循环截取并拼接上\n换行符进行换行

上代码：

/**
 * <li>Echarts 中axisLabel中值太长自动换行处理；经测试：360、IE7-IE11、google、火狐均能正常换行显示</li>
 * <li>处理echarts 柱状图 x 轴数据显示根据柱子间隔距离自动换行显示</li>
 * @param title			    将要换行处理x轴值
 * @param datas（xAxisDataLength	）  报表需显示的axisLabel个数（X轴显示的title数）
 * @param fontSize		    x轴上axisLabel字体大小，根据图表字体大小设置而定，此处内部默认为12
 * @param barContainerWidth	    柱状图初始化所在的外层容器的宽度
 * @param xWidth		    柱状图x轴左边的空白间隙 x 的值，详见echarts文档中grid属性，默认80
 * @param x2Width		    柱状图x轴右边的空白间隙 x2 的值，详见echarts文档中grid属性，默认80
 * @param insertContent