echarts中的图例换⾏并对齐
通过练习,我总结了三种⽅式,⽅式⼀和⽅式⼆只能实现换⾏,⽅式三不仅可实现换⾏,还可以实现对齐。
⽅式⼀:
legend:{
x:'right',
bottom:'30',
data:['⾏业⼤类1','⾏业⼤类2','⾏业⼤类3','\n','邮件营销','联盟⼴告','视频⼴告','\n','百度','⾕歌','必应'],
},
此种⽅法⽐较简单,在data中添加’\n’,可实现换⾏,但不会对齐,效果如下:
⽅式⼆:
legend:[
{
x:'left',
bottom:'50',
data:['⾏业⼤类1','⾏业⼤类2','⾏业⼤类3']
},{
x:'left',textstyle
bottom:'30',
data:['邮件营销','联盟⼴告','视频⼴告','百度','⾕歌','必应']
}],
⽅式⼆是将legend分成了两部分,写成了数组对象的形式,也可实现换⾏,但此种⽅式和⽅式⼀⼀样,不能实现对齐,效果如下:
⽅式三:
给legend设置textStyle和formatter:
按照echarts中的API来看,Style 中有⼀个属性是设置图例⽂字宽的,那就是Style.width。但是⽤这个属性是必须要⽤Style.rich 这个属性。要不然Style.width这个属性不会⽣效。同理Style.height也是如此。
此时会发现按照API上去写代码,最后并没有达到你要的效果 。那是因为⽤这个属性时还需要另⼀个属性的配合,这个属性就是
legend.formatter 。代码如下:
legend:{
left:'10',
bottom:20,
width:300,//给整个图例组件这只宽度,如果不设置,图例将根据容器⼤⼩⾃适应
data:['⾏业⼤类1','⾏业⼤类2','⾏业⼤类3','邮件营销','联盟⼴告','视频⼴告','百度','⾕歌','必应'],
formatter:[
'{a|{name}}'
].join('\n'),
textStyle:{
rich:{
a:{
width:55,
fontSize:12,
lineHeight:12
}
},
},
},
此种⽅式不仅可实现换⾏,还可实现对齐,效果如下:
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论