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: