Echarts可以幫助我們快速構(gòu)建柱狀圖、餅圖、條形圖,這對(duì)于多圖形化展示數(shù)據(jù)來(lái)說(shuō)尤其方便,可幫助我們快速開(kāi)發(fā),下面這篇文章主要給大家介紹了關(guān)于Echarts中l(wèi)egend屬性使用的相關(guān)資料,需要的朋友可以參考下

orient

設(shè)置圖例的朝向

屬性值：

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

legend: {
        orient: 'vertical'
    }

vertical

	legend: {
        orient: 'horizontal'
    }

horizontal

x/y(left/top)

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

位置	取值
ｘ/left	left/center/right
y /top	top/center/bottom

例子：

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

x/y

樣式設(shè)置

屬性	說(shuō)明
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

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

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

echarts

itemHeight

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

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

echarts

textStyle

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

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

echarts

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
        }
    }

echarts

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'}
    },'直接訪問(wèn)','郵件營(yíng)銷','聯(lián)盟廣告','視頻廣告']
    }

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

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

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

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

echarts

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

legend: [{
                        itemWidth: 26,
                        data: [{
                            name: nowIndex.name,
                            icon: "rect"
                        }],
                        left: "0",
                        itemHeight: 6,
                        textStyle: {
                            fontSize: 12,
                            color: "#333",
                            padding: [0, 0,-3, 0], // 修改文字和圖標(biāo)距離
                        },
                    },
                    {
                        itemWidth: 26,
                        data: [{
                            name: oldIndex.name,
                            icon: "rect"
                        }],
                        left: "35%",
                        itemHeight: 6,
                        textStyle: {
                            fontSize: 12,
                            color: "#333",
                            padding: [0, 0,-3, 0], // 修改文字和圖標(biāo)距離
                        },
                    },
                    {
                        itemWidth: 26,
                        data: [{
                            name: danger.name,
                            icon: "roundRect"
                        }],
                        right: "0",
                        itemHeight: 6,
                        textStyle: {
                            fontSize: 12,
                            color: "#333",
                            padding: [0, 0,-3, 0], // 修改文字和圖標(biāo)距離
                        },
                    }
                ],

實(shí)現(xiàn)效果