摘要：近期在開發(fā)中遇到一個問題就是用插件畫餅圖時圖例是橫向排布的時候如果換行了如何讓圖例圖標(biāo)對齊由于網(wǎng)上關(guān)于這個的處理方案具體實現(xiàn)細節(jié)的解答比較少所以寫出來問題展示圖如下如圖所示第二行的圖例并沒有和第一行的圖例對齊這是因為插件在圖例橫向排列的時候

近期,在開發(fā)中遇到一個問題,就是用echarts插件畫餅圖時,圖例是橫向排布的時候,如果換行了,如何讓圖例圖標(biāo)對齊?由于網(wǎng)上關(guān)于這個的處理方案具體實現(xiàn)細節(jié)的解答比較少,所以寫出來.
問題展示圖如下:

如圖所示,第二行的圖例并沒有和第一行的圖例對齊.這是因為插件在圖例橫向排列的時候,自動根據(jù)圖例的文字多少自動排列.

開始查了很多資料,百度了下,也沒找到好的方法.然后試著用富文本處理下,沒有處理好.最后在網(wǎng)上求助網(wǎng)友,終于解決了.

方案一: 設(shè)置圖例文字的寬度,這里設(shè)置圖例文字的寬度是需要用富文本處理的.不然設(shè)置是沒有作用的.(感謝網(wǎng)友: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"
                            }
                        }
                ]

            },
            

利用富文本設(shè)置寬度:

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設(shè)置去指定富文本,否則是沒有作用的.

方案二: 在dada中加入空字符串(此方法好像不大正統(tǒng),斟酌使用...)
首先設(shè)置圖例排列為縱向排列,然后看下你需要排幾行.就隔幾個加空格,比如我需要兩行.就隔開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",
                        }
                ]

            },
            

效果圖:

當(dāng)然還有一種最渣的方案:文字后面加空格,這種方案太渣了就不說了.