近期,在开发中遇到一个问题,就是用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',
}
]
},
效果图:
当然还有一种最渣的方案:文字后面加空格,这种方案太渣了就不说了.
