记录一次用echarts插件画饼图时遇到的问题.

近期,在开发中遇到一个问题,就是用echarts插件画饼图时,图例是横向排布的时候,如果换行了,如何让图例图标对齐?由于网上关于这个的处理方案具体实现细节的解答比较少,所以写出来.
问题展示图如下:

如图所示,第二行的图例并没有和第一行的图例对齐.这是因为插件在图例横向排列的时候,自动根据图例的文字多少自动排列.

开始查了很多资料,百度了下,也没找到好的方法.然后试着用富文本处理下,没有处理好.最后在网上求助网友,终于解决了.

方案一: 设置图例文字的宽度,这里设置图例文字的宽度是需要用富文本处理的.不然设置是没有作用的.(感谢网友:https://segmentfault.com/u/hu...提供帮助).
本来的代码: (不对齐的)

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'
                            }
                        }
                ]

            },
            

利用富文本设置宽度:

legend:{
                show: true,
                type: 'plain',
                bottom: '2%',
                orient: 'horizontal',
                formatter: function( name ) {
                     return '{a|' + name + '}';
                    },
                textStyle: {
                        color: '#ca8622',
                    backgroundColor: 'red',               
                    rich: {
                            a: {
                                width: 90
                            }
                    }
                },
                

注意需要用 formatter设置去指定富文本,否则是没有作用的.

方案二: 在dada中加入空字符串(此方法好像不大正统,斟酌使用...)
首先设置图例排列为纵向排列,然后看下你需要排几行.就隔几个加空格,比如我需要两行.就隔开2个.

legend:{
                show: true,
                type: 'plain',
                bottom: '2%',
                orient: 'vertical',
                data:[
                        {
                            name: '无抵押大幅度',
                            icon: 'circle',                          
                        },
                        {
                            name: '有抵押',
                            icon: 'circle',                          
                        },
                        {
                            name: ''
                        },
                        {
                            name: '万商贷',
                            icon: 'circle',
                        },
                        {
                            name: 'O2O',
                            icon: 'circle',
                        },
                        {
                            name: ''
                        },
                        {
                            name: '直销',
                            icon: 'circle',
                        }
                ]

            },
            

效果图:

当然还有一种最渣的方案:文字后面加空格,这种方案太渣了就不说了.