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)簽長度動(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
總結(jié)
到此這篇關(guān)于echarts中g(shù)rid圖表的位置配置詳解的文章就介紹到這了,更多相關(guān)echarts grid圖表位置配置內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
移動(dòng)端H5喚起APP的寫法實(shí)例（IOS、android）
最近在做掃碼之后的h5頁面喚醒App的功能,所以記錄一下,這篇文章主要給大家介紹了關(guān)于移動(dòng)端H5喚起APP的相關(guān)資料,需要的朋友可以參考下2021-07-07
這篇文章主要為大家詳細(xì)介紹了Javascript實(shí)現(xiàn)單選框效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-12-12
微信小程序轉(zhuǎn)化為uni-app項(xiàng)目的方法示例
這篇文章主要介紹了微信小程序轉(zhuǎn)化為uni-app項(xiàng)目的方法示例，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
Js實(shí)現(xiàn)兩個(gè)跨域頁面進(jìn)行跳轉(zhuǎn)傳參的方案詳解
這篇文章主要為大家詳細(xì)介紹了JavaScript中實(shí)現(xiàn)兩個(gè)跨域頁面進(jìn)行跳轉(zhuǎn)傳參的方案,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-12-12
學(xué)習(xí)框架的我，又來了?？吹?String 對(duì)象擴(kuò)展這一部分，對(duì) trim() 這個(gè)經(jīng)常被來來說的方法比較感興趣2011-10-10
深入理解JavaScript 中的匿名函數(shù)((function() {})();)與變量的作用域
匿名函數(shù)沒有實(shí)際名字的函數(shù)，匿名函數(shù)(function() {})();是一個(gè)特殊的閉包寫法。本文蛀牙給大家介紹JavaScript 中的匿名函數(shù)((function() {})();)與變量的作用域,需要的朋友可以參考下2018-08-08
JS/FLASH實(shí)現(xiàn)復(fù)制代碼到剪貼板(兼容所有瀏覽器)
使用javascript來寫復(fù)制到剪貼板的代碼，一般都是瀏覽器不兼容的。所以采用flash的方式，模擬一個(gè)層，再來復(fù)制，就可以做到全部瀏覽器都適用，具體實(shí)現(xiàn)如下，感興趣的朋友可以參考下哈2013-05-05
webpack與SPA實(shí)踐之管理CSS等資源的方法
本篇文章主要介紹了webpack與SPA實(shí)踐之管理CSS等資源的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-12-12
在瀏覽器中對(duì)于Dom的操作和普通的腳本的操作處于兩個(gè)不同的dll中，兩個(gè)dll的交互是比較耗時(shí)的，優(yōu)化對(duì)Dom的操作可以提高腳本的執(zhí)行速度。本文是對(duì)如何優(yōu)化的一些總結(jié)。下面跟著小編一起來看下吧2017-01-01
這篇文章主要為大家詳細(xì)介紹了JS組件Bootstrap Table使用方法，具有一定的實(shí)用性和參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10