关于如何设置echart图例（legend）的位置

最新推荐文章于 2024-05-28 16:27:28 发布

qq_42959262

最新推荐文章于 2024-05-28 16:27:28 发布

阅读量5.1w

点赞数 7

文章标签： echart

本文链接：https://blog.csdn.net/qq_42959262/article/details/84791034

版权

本文详细介绍了Echart中图例（legend）的各种设置方法，包括位置、背景颜色、item间隔、宽度高度、文字颜色、边框颜色及内边距等属性的调整技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

关于如何设置echart图例（legend）的位置
列举几种常见的排列方式
在这里插入图片描述
实现代码
legend: {
orient: ‘vertical’,
left: ‘center’,
bottom:‘bottom’,
data: [‘直接访问’,‘邮件营销’,‘联盟广告’,‘视频广告’,‘搜索引擎’]
}

实现代码
legend: {
orient: ‘vertical’,
left: ‘right’,
top:‘bottom’,
data: [‘直接访问’,‘邮件营销’,‘联盟广告’,‘视频广告’,‘搜索引擎’]
}

其余针对legend的常用命令
改变背景颜色（ backgroundColor）
在这里插入图片描述
实现代码
legend: {
orient: ‘vertical’,
left: ‘right’,
top:‘bottom’,
backgroundColor: ‘rgba(100,0,100,0.5)’,
// backgroundColor: ‘rgba(0,0,0,0.2)’,
data: [‘直接访问’,‘邮件营销’,‘联盟广告’,‘视频广告’,‘搜索引擎’]
}
改变各个item之间的间隔（itemGap），单位px，默认为10，横向布局时为水平间隔，纵向布局时为纵向间隔
在这里插入图片描述
实现代码
legend: {
orient: ‘vertical’,
left: ‘right’,
top:‘bottom’,
backgroundColor: ‘rgba(0,0,0,0.2)’,
itemGap: 1,
data: [‘直接访问’,‘邮件营销’,‘联盟广告’,‘视频广告’,‘搜索引擎’]
}

改变图例宽度高度（itemWidth，itemHeight）
在这里插入图片描述
实现代码
legend: {
orient: ‘vertical’,
left:‘center’,
bottom:‘bottom’,
backgroundColor: ‘rgba(0,0,0,0.2)’,
itemWidth: 50,
itemHeight: 20,
data: [‘直接访问’,‘邮件营销’,‘联盟广告’,‘视频广告’,‘搜索引擎’]
}

改变图例文字颜色（textStyle）
在这里插入图片描述
实现代码
legend: {
orient: ‘vertical’,
left:‘center’,
bottom:‘bottom’,
backgroundColor: ‘rgba(0,0,0,0.2)’,
textStyle: {
color: ‘#0f0’
// color:‘rgb(250,235,0)’
},
data: [‘直接访问’,‘邮件营销’,‘联盟广告’,‘视频广告’,‘搜索引擎’]
}

改变图例边框颜色.图例边框线宽（默认无边框，单位px）（borderColor，borderWidth）
在这里插入图片描述
实现代码
legend: {
orient: ‘vertical’,
left:‘center’,
bottom:‘bottom’,
backgroundColor: ‘rgba(0,0,0,0.2)’,
borderColor: ‘#0f0’,
borderWidth: 2,
data: [‘直接访问’,‘邮件营销’,‘联盟广告’,‘视频广告’,‘搜索引擎’]
}
改变图例内边距，单位px，默认各方向内边距为5,接受数组分别设定上右下左边距，同css（padding）
在这里插入图片描述
实现代码
legend: {
orient: ‘vertical’,
left:‘center’,
bottom:‘bottom’,
backgroundColor: ‘rgba(0,0,0,0.2)’,
padding: 1,
data: [‘直接访问’,‘邮件营销’,‘联盟广告’,‘视频广告’,‘搜索引擎’]
}