echarts图表的x轴文字自适应换行的问题

echarts图表的x轴文字自适应换行的问题

最近开发中使用到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可以让类目名之间也有一点点的间隙，看着更清楚，文字是默认居中的，所以也不用担心左右分布不均的情况，如果有更好的方法，欢迎留言一起讨论。