Echarts的legend屬性是對圖例組件的相關配置
而legend就是Echarts圖表中對圖形的解釋部分：
圖例
其中l(wèi)egend自身常用的配置屬性如下：
orient
設置圖例的朝向
屬性值：
vertical // 垂直顯示
或者
horizontal // 水平顯示
legend: {
orient: 'vertical'
}
vertical
legend: {
orient: 'horizontal'
}
horizontal
x/y(left/top)
設置圖例在X軸方向上的位置以及在Y軸方向上的位置
| 位置 | 取值 |
|---|---|
| ｘ/left | left/center/right |
| y /top | top/center/bottom |
例子：
legend: {
orient: 'vertical',
x:'right',
y:'center'
}
x/y
樣式設置
| 屬性 | 說明 |
|---|---|
| backgroundColor | 背景顏色 |
| borderColor | 邊框顏色 |
| borderWidth | 邊框?qū)挾?/td> |
| padding | 內(nèi)邊距 |
注意：邊框?qū)挾群蛢?nèi)邊距屬性值為數(shù)值缅糟，不加單位牡整。
legend: {
orient: 'vertical',
x:'center',
y:'top',
backgroundColor: '#fac858',
borderColor: '#5470c6',
borderWidth: '200',
}
echarts
itemGap
控制每一項的間距，也就是圖例之間的距離
屬性值為數(shù)值溺拱，不帶單位
legend: {
orient: 'horizontal',
x:'center',
y:'top',
itemGap: 40
}
image.png
itemHeight
控制圖例圖形的高度
屬性值為數(shù)字，不加單位
legend: {
orient: 'horizontal',
x:'center',
y:'top',
itemHeight: 5
}
echarts
textStyle
設置圖例文字樣式
屬性值為一個對象
legend: {
orient: 'horizontal',
x:'center',
y:'top',
textStyle: {
color: 'red',
fontSize: '20px',
fontWeight: 700
}
}
echarts
selected
設置圖例的某個選項的數(shù)據(jù)默認是顯示還是隱藏谣辞。
false: 隱藏
屬性值：對象迫摔，屬性值內(nèi)容：圖例上的數(shù)據(jù)與boolean構成鍵值對
如果某選項設置為false，那么圖標上的數(shù)據(jù)也會默認不顯示泥从，而圖例會以灰色樣式顯示
legend: {
orient: 'horizontal',
x:'center',
y:'top',
selected:{
'搜索引擎': false,
'聯(lián)盟廣告': false
}
}
echarts
data
圖例上顯示的文字信息句占，如果不設置該項，默認會以series設置的信息作為圖例信息躯嫉。如果設置該項纱烘，必須與series設置的信息一致，才會生效祈餐。
而該屬性的作用：可以單獨對圖例中某個選項進行單獨設置樣式
比如：
legend: {
orient: 'horizontal',
x:'center',
y:'top',
data:[{
name: '搜索引擎',
icon: 'circle',
textStyle: {fontWeight: 'bold', color: 'orange'}
},'直接訪問','郵件營銷','聯(lián)盟廣告','視頻廣告']
}
以上單獨設置中
name:指定該項的名稱擂啥，必填
icon:指定圖例項的icon，可以為內(nèi)置的圖形7個圖形帆阳，或者自定義圖標的形式：'image://url'
textStyle:：設置文本樣式
echarts
