如上述例圖所示，echarts的legend也有多種屬性可以供我們調控。
首先是legend的type:
可能有的人不太懂，legend有哪些type，根據配置項文檔可知：
type有以下兩種：
plain\scroll
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