echarts画一个饼图， orient: 'horizontal',图例横向排列，当图例比较多时，如何在第二排让图标一一对齐？

Question

饼图图例横向排列时，换行了如何让图标一一对齐？
直接上图，

第二行的第二个图标就没和上一行的图标对齐。求大神指点！

代码：

legend:{
                show: true,
                type: 'plain',
                itemGap: 10,
                bottom: '5%',
                orient: 'horizontal',
                data:[
                        {
                            name: '无抵押',
                            icon: 'circle',
                            textStyle:{
                                color: 'black'
                            }
                        },
                        {
                            name: '有抵押',
                            icon: 'circle',
                            textStyle:{
                                color: 'black'
                            }
                        },
                        {
                            name: '宝单保',
                            icon: 'circle',
                            textStyle:{
                                color: 'black'
                            }
                        },
                        {
                            name: '万商贷',
                            icon: 'circle',
                            textStyle:{
                                color: 'black'
                            }
                        },
                        {
                            name: 'O2O',
                            icon: 'circle',
                            textStyle:{
                                color: 'black'
                            }
                        },{
                        name: 'O2O1666',
                        icon: 'circle',
                        textStyle:{
                            color: 'black'
                        }
                    },{
                        name: 'O2O25665',
                        icon: 'circle',
                        textStyle:{
                            color: 'black'
                        }
                    },
                        {
                            name: '直销',
                            icon: 'circle',
                            textStyle:{
                                color: 'black'
                            }
                        }
                ]

            },

Answer 1

以前我也遇到过这个问题，没找到方法解决。但是echarts最近更新了不少配置，现在很容易就可以实现你这个需求了。

    legend: {
        orient: 'horizontal',
        right: 10,
        top: 20,
        bottom: 20,
        data: data.legendData,
        formatter: function( name ) {
             return '{a|' + name + '}';
        },
        textStyle: {
            rich:{
                a: {
                    width: 100
                }
            }
        }
    },

Answer 2

想让item对齐需要在legend>textStyle下添加

 backgroundColor:"rgba(0, 0, 0, 0)",
 width:110,

注意：宽度、背景属性是必须的，如果不想要背景色也要将值设置为透明

textStyle没有背景属性时：

当rich>a设置宽度时