记录一次用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",
                        }
                ]

            },
            

效果图:

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