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

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

orient

設置圖例的朝向

屬性值：

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

legend: { orient: 'vertical' } 


    

        1
    

    

        2
    

    

        3
    

 legend: { orient: 'horizontal' } 


    

        1
    

    

        2
    

    

        3
    

x/y(left/top)

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

例子：

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


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

樣式設置

注意：邊框寬度和內邊距屬性值為數(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

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

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ù)據(jù)默認是顯示還是隱藏。
false: 隱藏
屬性值：對象，屬性值內容：圖例上的數(shù)據(jù)與boolean構成鍵值對
如果某選項設置為false，那么圖標上的數(shù)據(jù)也會默認不顯示，而圖例會以灰色樣式顯示

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


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

data

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

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
    

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

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

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



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



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