echarts中图例换行并且对齐的一种方法

前言：

在统计图中，经常遇到图例很多的情况，此时一行很有可能就放不下了，就想到了换行，当然默认一行放不下的时候，图例也是会自动换行，可是。。。他对不齐呀！！就跑去问产品，对不齐行不行，产品说：怎么会对不齐呢？？？（黑人问号）我说也可以对齐，但是得配置一下（其实心里只想这样就行了吧）不过最后还是满足她，都给我对齐！！

在说我的方法前，我们看一下，默认的换行：

对不齐的原因可能是因为默认的图例间距固定，每个图例的大小由字体而自适应吧（猜的），不过这个也不怎么重要。 我也看了网上有很多大佬有其他方法，图例分组什么的，我主要是嫌麻烦，所以找到了一个还算简单的方法，话不多说，上才艺（方法）！！

关键思路：

获取图例的总宽度，然后除以自己想设置一行几个，算出来一个图例的宽度，听上去很简单吧。获取图例的总宽度基本就是echarts画布的大小，很容易获取，假设是allWidth，假定一行显示10个，那么每个图例的宽度就是：

width = allWidth / 10

图例由icon和文本组成，他们各自的宽度都能分别设置，而造成对不齐的原因主要是文字个数不定，所以只要设置文字宽度一致后，就能对齐了！！下面上代码：

关键代码：

// echarts 的 legend配置 
legend: {
     data: legendData,
     icon: 'circle',
     formatter: '{a|{name}}',
     itemGap: 0,
     left: 'center',
     textStyle: {
        color: "#1B1B4E",
        padding: [0, 0, 0, 0],
        rich:{
           a: {
             width: (allWidth - 200) / 10,
             height:38,
             fontSize: 12
           },
        }
    },
 },

实现效果： 

说明：

这里用的文本的富文本样式，使用说明详见echarts。另外我在allWidth的基础上又减了200，这个根据自己的实际情况设置，我的理解是减去了一行icon的所有宽度，因为我们设置的是文本的宽度，要把icon的宽度减掉在计算。个人感觉还挺简单的，希望对你们有帮助。