最近开发中使用到echarts，客户提到x轴的label自适应宽度及换行的需求，网上找了很久都没遇到合适的办法，最后终于实现了，先看效果图
稍宽一点 ：

稍窄一点：

echarts的option中并没有直接提供自适应换行的属性，但是，还是可以曲线救国的，总结下来还是通过设置宽度及换行（width+overflow），具体如下（有echarts使用经验观看更佳哦）：

xAxis: {
    type: 'category',
    data: [
      '设菲菲我非废物费滴弱理1',
      '節能管控2',
      '節能管控3',
      '设备管理4',
      '節能管控5',
      '设备管理6',
      '節能管控7'
    axisLabel: {//**该项配置重点关注**
      show:true,
      interval:0,
      width:500,
      overflow:"breakAll"
重点使用到的是axisLabel，其他配置项忽略，其中：
 
interval: 0,是为了保证每个类目都能展示，默认值为auto，此时如果有超长类目，会隐藏该类目掉相邻的类目，保证有一条可以完整显示，不设为0的话即使超长类目名折行显示了，它相邻的类目还是无法展示
 
overflow:“breakAll”，作用同word-break，值为break是普通的换行，值为breakAll会拆开连续的英语字符串并折行。
 
最最重要也是唯一需要计算的就是width，width的作用就是在文字长度超过多少px的时候执行换行。echarts的实例上有个getWidth方法，可以直接获取到当前图表的宽度，只需取到图表的宽度然后除以你类目的总长度即可计算出width，当然若图表grid设置了左右间隙则需减去相应的值，例如
 
grid: {
          top: 50 + 28,
          right: 30,
          left: 40,
          bottom: 50,
在计算width时，以上例，类目总长度为3，则：
 
let xLabelWidth = (chart.getWidth()*1 - 30 - 40) / 3
option.xAxis.axisLabel.width = xLabelWidth
chart.setOption(option);
至此就可实现类目文字长度自适应及换行，同时多减几个px可以让类目名之间也有一点点的间隙，看着更清楚，文字是默认居中的，所以也不用担心左右分布不均的情况，如果有更好的方法，欢迎留言一起讨论。
                    最近开发中使用到echarts，客户提到x轴的label自适应宽度及换行的需求，网上找了很久都没遇到合适的办法，最后终于实现了，先看效果图稍宽一点：稍窄一点：echarts的option中并没有直接提供自适应换行的属性，但是，还是可以曲线救国的，总结下来还是通过设置宽度及换行（width+overflow），具体如下（有echarts使用经验观看更佳哦）：重点使用到的是axisLabel，其他配置项忽略，其中：interval: 0,是为了保证每个类目都能展示，默认值为auto，此时如果有超长类
              var maxLength = 4;
              var valLength = value.length;
              var rowN = Math.ceil(valLength / maxLength);
第一,部门数量多,一些地方通过xAxis-axisLabel,可以实现超多部门的斜列显示,但是有些时候设置旋转角度不完全管用,比如下面说到了还有就是部门太密集重叠;
"xAxis": [{
                    "type": "category",
                    "axisLabel": {
                        "interval": 0,
				
在做Echarts图表的时候 通常会遇到一个名字较长的分类或者字段名称 通常我们可以倾斜他 让他全部显示 但是这样的话X轴下方就会拉得比较长 在项目中需求通常也是会要求换行；
Echarts本身没有提供换行这个功能的 所以只有自己想办法；我这里是利用循环对字符串进行截取拼接的方式来解决的；
下面给一个示例，都有注释很好理解：
xAxis: [
		     type: 'category',
		     data: [],
		     axisLine:{
	x: 'right',
	bottom: '30',
	data: ['行业大类1', '行业大类2', '行业大类3', '\n','邮件营销', '联盟广告', '视频广告', '\n','百度', '谷歌', '必应'],
此种方法比较简单，在data中添加’\n’，可实现换行，但不会对齐，效果如下：
legend: [
	x: 'left',
熟悉echarts的同学应该知道，echarts中的直角系图表当坐标轴为类目型（常为x轴）而且数据又特别多时，默认会隐藏掉一部分x轴文字。效果就类似于这样：
然而，echarts自带的计算有时候是过于苛刻的，即使文字实际上不存在遮挡问题，当文字与文字间的间隔小于一定值时同样会触发隐藏机制，例如上面那张图，如果设置{xAxis:{axisLabel:{interval:0}}}显示出所有...