echarts--圖例（legend）

圖例

圖例是圖表中對內容區元素的注釋、用不同形狀、顏色、文字等來標示不同數據列，通過點擊對應數據列的標記，可以顯示或隱藏該數據列。圖例雖然不是圖表中的主要信息、卻是了解圖表信息的鑰匙。

一、布局

圖例一般放在圖表的右上角、也可以放在圖表的底部、同一頁面中的所有圖例位置保持一致，可以橫排對齊也可以縱排對齊。還要綜合考慮整體的圖表空間是適合哪種擺放方式。

當圖表縱向空間緊張或者內容區量過大的時候、建議擺放在圖表的下方。下面是幾種圖例的擺放方式：

關鍵字：orient: 'vertical/horizontal'  默認horizontal水平

 

legend: {
    orient: 'vertical',
    right: 10,
    top: 'center'
},

 

  legend: {
    orient：“horizontal”,//水平展示，不寫默認水平展示
    right: 10,
    top: 20
  }

二、類型（type）

 

圖例的類型。可選值：

 

• 'plain'：普通圖例。缺省就是普通圖例。
• 'scroll'：可滾動翻頁的圖例。當圖例數量較多時可以使用

 

 

  legend: {
    type: 'scroll',
    orient: 'vertical',
    right: 10,
    top: 20,
    bottom: 20,
    data: data.legendData, //數據，例：data: ['圖例一', '圖例二', '圖例三' /* ... */, , '圖例n']
　　　show: true/false //圖例是否顯示
},

 

 

 三、圖例組件離容器的距離（left，right，top，bottom）

值可以是string number類型

left：可以像20 這樣的具體像素值，可以是像 '20%' 這樣相對於容器高寬的百分比，也可以是 'left', 'center', 'right'。

同樣top也可以是 'top', 'middle', 'bottom'；