如上述例图所示，echarts的legend也有多种属性可以供我们调控。
首先是legend的type:
可能有的人不太懂，legend有哪些type，根据配置项文档可知：
type有以下两种：
plainscroll
plain
scroll
简单普通样式
可滚动翻页，当图例数量较多时使用
滚动效果如下：
legend的显示问题：
legend: {
data: this.legend,
bottom:0,
left:'center',
textStyle:{
color:'#ffffff',
}
},
如上代码所示，legend的data进行赋值，一般data为数组。
当series的name和legend一一对应时，即可显示相应的legend。
series: [
{
name: this.legend[0],
type: 'bar',
stack: '故障类型分布',
label: {
normal: {
show: false,
}
legend显示效果：
如第一张图片显示，第一张图片的legend为一个长方形，同时，legend可以有多种类型，通过设置icon来设置显示的图形样式。
icon一般在data里面设置，位置关系如下：
icon的种类：
'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
同样也可以选择图片，通过URL来进行设置，格式如下：
'image://http://xxx.xxx.xxx/a/b.png'
简单展示几个：
‘rect’:
‘triangle’:
icon样式设置：
大小：
legend: {
data: legendData,
textStyle: {
color: '#ccc'
},
icon:'rect',
itemWidth:20,
itemHeight:20,
},
通过itemWidth和itemHeight来修改icon的大小。
设置位置：
常常通过以上几个属性进行设置，灰色是默认属性。我一般如果中间的话就设置：
left:’center’,底部或首部就进行top:0,或者bottom:0来进行设置，同样，css的都可以，但是需要注意的是不能带单位。即top:20px在进行设置的时候为top:20,要进行vm，vh的设置的话可以通过百分比,top:’20%’这样来进行对屏幕大小的动态适应。
原文链接：https://blog.csdn.net/xxtnt/java/article/details/96114386