記錄一次用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',
                        }
                ]

            },

效果圖:

固然還有一種最渣的方案:文字後面加空格,這種方案太渣了就不說了.