Echarts的legend屬性是對圖例組件的相關(guān)配置
而legend就是Echarts圖表中對圖形的解釋部分：

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

orient

設(shè)置圖例的朝向

屬性值：

vertical // 垂直顯示
或者
horizontal // 水平顯示

legend: { orient: 'vertical' } 


    

        1
    

    

        2
    

    

        3
    

 legend: { orient: 'horizontal' } 


    

        1
    

    

        2
    

    

        3
    

x/y(left/top)

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

例子：

legend: { orient: 'vertical', x:'right', y:'center' } 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

樣式設(shè)置

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

legend: { orient: 'vertical', x:'center', y:'top', backgroundColor: '#fac858', borderColor: '#5470c6', borderWidth: '200', } 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

itemGap

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

legend: { orient: 'horizontal', x:'center', y:'top', itemGap: 40 } 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

itemHeight

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

legend: { orient: 'horizontal', x:'center', y:'top', itemHeight: 5 } 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

textStyle

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

legend: { orient: 'horizontal', x:'center', y:'top', textStyle: { color: 'red', fontSize: '20px', fontWeight: 700 } } 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

selected

設(shè)置圖例的某個選項的數(shù)據(jù)默認(rèn)是顯示還是隱藏。
false: 隱藏
屬性值：對象，屬性值內(nèi)容：圖例上的數(shù)據(jù)與boolean構(gòu)成鍵值對
如果某選項設(shè)置為false，那么圖標(biāo)上的數(shù)據(jù)也會默認(rèn)不顯示，而圖例會以灰色樣式顯示

legend: { orient: 'horizontal', x:'center', y:'top', selected:{ '搜索引擎': false, '聯(lián)盟廣告': false } } 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

data

圖例上顯示的文字信息，如果不設(shè)置該項，默認(rèn)會以series設(shè)置的信息作為圖例信息。如果設(shè)置該項，必須與series設(shè)置的信息一致，才會生效。
而該屬性的作用：可以單獨對圖例中某個選項進行單獨設(shè)置樣式
比如：

legend: { orient: 'horizontal', x:'center', y:'top', data:[{ name: '搜索引擎', icon: 'circle', textStyle: {fontWeight: 'bold', color: 'orange'} },'直接訪問','郵件營銷','聯(lián)盟廣告','視頻廣告'] } 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

以上單獨設(shè)置中
name:指定該項的名稱，必填
icon:指定圖例項的icon，可以為內(nèi)置的圖形7個圖形，或者自定義圖標(biāo)的形式：'image://url'
textStyle:：設(shè)置文本樣式

藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~

希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。 



分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。 



藍藍設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司。