近期,在開發中遇到一個問題,就是用echarts插件畫餅圖時,圖例是橫向排布的時候,若是換行了,如何讓圖例圖標對齊?因爲網上關於這個的處理方案具體實現細節的解答比較少,因此寫出來.
問題展現圖以下:javascript
如圖所示,第二行的圖例並無和第一行的圖例對齊.這是由於插件在圖例橫向排列的時候,自動根據圖例的文字多少自動排列.java
開始查了不少資料,百度了下,也沒找到好的方法.而後試着用富文本處理下,沒有處理好.最後在網上求助網友,終於解決了.segmentfault
方案一: 設置圖例文字的寬度,這裏設置圖例文字的寬度是須要用富文本處理的.否則設置是沒有做用的.(感謝網友:https://segmentfault.com/u/hu...提供幫助).
原本的代碼: (不對齊的)echarts
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' } } ] },
利用富文本設置寬度:spa
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個.code
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', } ] },
效果圖:orm
固然還有一種最渣的方案:文字後面加空格,這種方案太渣了就不說了.ip