Echarts中l(wèi)egend屬性使用的方法詳解

第Echarts中l(wèi)egend屬性使用的方法詳解目錄orientx/y(left/top)樣式設(shè)置itemGapitemHeighttextStyleselecteddata補(bǔ)充：自定義legend屬性總結(jié)Echarts的legend屬性是對(duì)圖例組件的相關(guān)配置

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

其中l(wèi)egend自身常用的配置屬性如下：

orient

設(shè)置圖例的朝向

屬性值：

vertical//垂直顯示

或者

horizontal//水平顯示

legend:{

orient:'vertical'

legend:{

orient:'horizontal'

x/y(left/top)

設(shè)置圖例在X軸方向上的位置以及在Y軸方向上的位置

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

例子：

legend:{

orient:'vertical',

x:'right',

y:'center'

樣式設(shè)置

屬性說明backgroundColor背景顏色borderColor邊框顏色borderWidth邊框?qū)挾萷adding內(nèi)邊距

注意：邊框?qū)挾群蛢?nèi)邊距屬性值為數(shù)值，不加單位。

legend:{

orient:'vertical',

x:'center',

y:'top',

backgroundColor:'#fac858',

borderColor:'#5470c6',

borderWidth:'200',

itemGap

控制每一項(xiàng)的間距，也就是圖例之間的距離屬性值為數(shù)值，不帶單位

legend:{

orient:'horizontal',

x:'center',

y:'top',

itemGap:40

itemHeight

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

legend:{

orient:'horizontal',

x:'center',

y:'top',

itemHeight:5

textStyle

設(shè)置圖例文字樣式屬性值為一個(gè)對(duì)象

legend:{

orient:'horizontal',

x:'center',

y:'top',

textStyle:{

color:'red',

fontSize:'20px',

fontWeight:700

selected

設(shè)置圖例的某個(gè)選項(xiàng)的數(shù)據(jù)默認(rèn)是顯示還是隱藏。

false:隱藏

屬性值：對(duì)象，屬性值內(nèi)容：圖例上的數(shù)據(jù)與boolean構(gòu)成鍵值對(duì)

如果某選項(xiàng)設(shè)置為false，那么圖標(biāo)上的數(shù)據(jù)也會(huì)默認(rèn)不顯示，而圖例會(huì)以灰色樣式顯示

legend:{

orient:'horizontal',

x:'center',

y:'top',

selected:{

'搜索引擎':false,

'聯(lián)盟廣告':false

data

圖例上顯示的文字信息，如果不設(shè)置該項(xiàng)，默認(rèn)會(huì)以series設(shè)置的信息作為圖例信息。如果設(shè)置該項(xiàng)，必須與series設(shè)置的信息一致，才會(huì)生效。

而該屬性的作用：可以單獨(dú)對(duì)圖例中某個(gè)選項(xiàng)進(jìn)行單獨(dú)設(shè)置樣式

比如：

legend:{

orient:'horizontal',

x:'center',

y:'top',

data:[{

name:'搜索引擎',

icon:'circle',

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

},'直接訪問','郵件營銷','聯(lián)盟廣告','視頻廣告']

以上單獨(dú)設(shè)置中

name:指定該項(xiàng)的名稱，必填

icon:指定圖例項(xiàng)的icon，可以為內(nèi)置的圖形7個(gè)圖形，或者自定義圖標(biāo)的形式：image://url

textStyle:：設(shè)置文本樣式

補(bǔ)充：自定義legend屬性

legend:[{

itemWidth:26,

data:[{

name:nowI,

icon:"rect"

left:"0",

itemHeight:6,

textStyle:{

fontSize:12,

color:"#333",

padding:[0,0,-3,0],//修改文字和圖標(biāo)距離

itemWidth:26,

data:[{

name:oldI,

icon:"rect"

left:"35%",

itemHeight:6,

textStyle:{

fontSize:12,

color:"#333",

padding:[0,0,-3,0],//修改文字和圖標(biāo)距離

itemWidth:26,

data:[{

name:,

icon:"roundRect"

right:"0",

ite