欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間：2022年04月07日 15:18:43   作者：chen__cheng  
Echarts可以幫助我們快速構(gòu)建柱狀圖、餅圖、條形圖,這對于多圖形化展示數(shù)據(jù)來說尤其方便,可幫助我們快速開發(fā),下面這篇文章主要給大家介紹了關(guān)于Echarts中l(wèi)egend屬性使用的相關(guān)資料,需要的朋友可以參考下

Echarts的legend屬性是對圖例組件的相關(guān)配置

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

圖例

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

orient

設(shè)置圖例的朝向

屬性值：

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

legend: {
        orient: 'vertical'
    }

vertical

	legend: {
        orient: 'horizontal'
    }

horizontal

x/y(left/top)

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

位置取值
ｘ/leftleft/center/right
y /toptop/center/bottom

例子：

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

x/y

樣式設(shè)置

屬性說明
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è)對象

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: 隱藏

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

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

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

echarts

data

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

而該屬性的作用：可以單獨(dú)對圖例中某個(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è)置文本樣式

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)效果

總結(jié)

到此這篇關(guān)于Echarts中l(wèi)egend屬性使用的文章就介紹到這了,更多相關(guān)Echarts legend屬性使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論