第Echarts中legend屬性使用的方法詳解目錄orientx/y(left/top)樣式設置itemGapitemHeighttextStyleselecteddata補充：自定義legend屬性總結Echarts的legend屬性是對圖例組件的相關配置

而legend就是Echarts圖表中對圖形的解釋部分：

其中legend自身常用的配置屬性如下：

orient

設置圖例的朝向

屬性值：

vertical//垂直顯示

或者

horizontal//水平顯示

legend:{

orient:'vertical'

legend:{

orient:'horizontal'

x/y(left/top)

設置圖例在X軸方向上的位置以及在Y軸方向上的位置

位置取值ｘ/leftleft/center/righty/toptop/center/bottom

例子：

legend:{

orient:'vertical',

x:'right',

y:'center'

樣式設置

屬性說明backgroundColor背景顏色borderColor邊框顏色borderWidth邊框寬度padding內邊距

注意：邊框寬度和內邊距屬性值為數值，不加單位。

legend:{

orient:'vertical',

x:'center',

y:'top',

backgroundColor:'#fac858',

borderColor:'#5470c6',

borderWidth:'200',

itemGap

控制每一項的間距，也就是圖例之間的距離屬性值為數值，不帶單位

legend:{

orient:'horizontal',

x:'center',

y:'top',

itemGap:40

itemHeight

控制圖例圖形的高度屬性值為數字，不加單位

legend:{

orient:'horizontal',

x:'center',

y:'top',

itemHeight:5

textStyle

設置圖例文字樣式屬性值為一個對象

legend:{

orient:'horizontal',

x:'center',

y:'top',

textStyle:{

color:'red',

fontSize:'20px',

fontWeight:700

selected

設置圖例的某個選項的數據默認是顯示還是隱藏。

false:隱藏

屬性值：對象，屬性值內容：圖例上的數據與boolean構成鍵值對

如果某選項設置為false，那么圖標上的數據也會默認不顯示，而圖例會以灰色樣式顯示

legend:{

orient:'horizontal',

x:'center',

y:'top',

selected:{

'搜索引擎':false,

'聯盟廣告':false

data

圖例上顯示的文字信息，如果不設置該項，默認會以series設置的信息作為圖例信息。如果設置該項，必須與series設置的信息一致，才會生效。

而該屬性的作用：可以單獨對圖例中某個選項進行單獨設置樣式

比如：

legend:{

orient:'horizontal',

x:'center',

y:'top',

data:[{

name:'搜索引擎',

icon:'circle',

textStyle:{fontWeight:'bold',color:'orange'}

},'直接訪問','郵件營銷','聯盟廣告','視頻廣告']

以上單獨設置中

name:指定該項的名稱，必填

icon:指定圖例項的icon，可以為內置的圖形7個圖形，或者自定義圖標的形式：image://url

textStyle:：設置文本樣式

補充：自定義legend屬性

legend:[{

itemWidth:26,

data:[{

name:nowI,

icon:"rect"

left:"0",

itemHeight:6,

textStyle:{

fontSize:12,

color:"#333",

padding:[0,0,-3,0],//修改文字和圖標距離

itemWidth:26,

data:[{

name:oldI,

icon:"rect"

left:"35%",

itemHeight:6,

textStyle:{

fontSize:12,

color:"#333",

padding:[0,0,-3,0],//修改文字和圖標距離

itemWidth:26,

data:[{

name:,

icon:"roundRect"

right:"0",

ite