ECharts图例换行及对齐问题解决方法

1.如下图，当图表的图例文字过长或者图例数目过多时，会出现图例与图表标题重合问题，或者没有标题，但是一横排展示效果不佳的情况下：

2.可以根据图例数目换行展示，只需要在legend的data中换行位置添加''即可

legend: {
  data: ['名称字数一样1', '名称字数一样2', '名称字数一样3','', '名称字数一样4', '名称字数一样 
  5'],
  right: 0
},

 3.以上是图例名称字数一样的情况，如果图例名称字数不一样，就会出现对齐问题，如下图：

  4.解决方法：可以通过单行图例宽度及每个图例宽度实现对齐效果

legend: {
  data: ['名称字数不一样1', '名称字数不一样22', '名称字数不一样333', '名称字数不一样4444', 
  '名称字数不一样55555'], // 不需要''换行
  right: 0,
  width: 600, // 单行图例的宽度
  formatter: [
     '{a|{name}}'
  ].join('\n'),
  textStyle: {
    rich: {
      a: {
        width: 120, // 每个图例的宽度，具体根据字数调整
        lineHeight: 12
      }
    }
  }
}

 

最后：如有疑问或者不准确的地方欢迎大家留言私信！感谢~