关于如何设置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: [‘直接访问’,‘邮件营销’,‘联盟广告’,‘视频广告’,‘搜索引擎’] }

总结：个人觉得这篇文章比较全面 https://blog.csdn.net/she_lover/article/details/51448967