vue Keep-alive下Echarts-bar的y轴label隔行

故障

今天遇到个问题，vue项目在使用keep-alive后由于宽高自适应导致柱状图y轴label隔行显示。

出现故障原因

如果在页面宽度过小而label名称太长的时候，echarts会自动将label设置为隔行以便美观。而在使用keep-alive之后，由于页面的宽高并不固定，使用了自适应布局。导致刚进来的时候echarts被挤压过小。从而出现了隔行的问题。

解决方法

1. 既然是由于label名称过长而出现的问题，那么label使用简称即可解决。但这种方式并不适用于自适应布局，pass。
2. 使用配置项强制不隔行显示。既然是自动换成隔行，那么可以通过配置项将其设置为不隔行。我这里使用的是y轴，x轴也有同样的配置。 interval:设置隔行，为0则不隔行，1则隔一行显示，以此类推

yAxis: {
  axisLabel: { //* y轴字体
    interval: 0 //* 强制y轴label全部显示，不隔行
  }
}