echarts中g(shù)rid圖表位置怎么配置

本篇內(nèi)容主要講解“echarts中g(shù)rid圖表位置怎么配置”，感興趣的朋友不妨來看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“echarts中g(shù)rid圖表位置怎么配置”吧!

首先還是先認(rèn)識(shí)grid，要弄清楚grid是哪一塊區(qū)域，這就牽扯到對(duì)echarts圖表元素的基本認(rèn)識(shí)。為此，我做了一個(gè)總結(jié)，如圖所示：

數(shù)學(xué)里的笛卡爾坐標(biāo)系分為直角坐標(biāo)系 和斜坐標(biāo)系。而grid只適用于直角坐標(biāo)系！

我們已經(jīng)知道了grid表示哪一塊區(qū)域，接下來具體看看它到底有什么屬性，能干什么？

echarts官網(wǎng)中g(shù)rid組件的屬性并不多，但是我們依然就常用的屬性看看，熟悉一下

重點(diǎn)：

在ECharts 2.x 里單個(gè) echarts 實(shí)例中最多只能存在一個(gè) grid 組件，在 ECharts 3 中可以存在任意個(gè) grid 組件。

option = {
    grid: {
        show: true,                                 //是否顯示圖表背景網(wǎng)格    
        left: '0%',                                    //圖表距離容器左側(cè)多少距離
        right: '40%',                                //圖表距離容器右側(cè)側(cè)多少距離
        bottom: '3%',                              //圖表距離容器上面多少距離
        top: 50,                                       //圖表距離容器下面多少距離
        containLabel: true,                     //防止標(biāo)簽溢出  
        backgroundColor:'#555555',     //網(wǎng)格背景色，默認(rèn)透明
    }
}

注意：

 grid里面的上下左右，相當(dāng)于內(nèi)邊距的意思，是距離容器上下左右各多少，并不是向左向右多少距離。這個(gè)一般用%或者數(shù)字來表示。

containLabel這個(gè)屬性一般寫true，表示防止標(biāo)簽長(zhǎng)度動(dòng)態(tài)變化時(shí)，可能會(huì)溢出容器或者覆蓋其他組件。它包括了坐標(biāo)軸標(biāo)簽在內(nèi)的所有內(nèi)容所形成的矩形的位置。相當(dāng)于label標(biāo)簽的效果。

下面我們看看有containLabel和沒有containLabel屬性的區(qū)別，一看就明白：

加上containLabel：true

不加containLabel：true

到此，相信大家對(duì)“echarts中g(shù)rid圖表位置怎么配置”有了更深的了解，不妨來實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！