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ū)域，接下來(lái)具體看看它到底有什么屬性，能干什么？
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ù)字來(lái)表示。
containLabel這個(gè)屬性一般寫(xiě)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和沒(méi)有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)文章
在layer彈層layer.prompt中,修改placeholder的實(shí)現(xiàn)方法
今天小編大家分享一篇在layer彈層layer.prompt中,修改placeholder的實(shí)現(xiàn)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09
總結(jié)一些js自定義的函數(shù)...2006-08-08
JS+CSS實(shí)現(xiàn)的豎向簡(jiǎn)潔折疊菜單效果代碼
這篇文章主要介紹了JS+CSS實(shí)現(xiàn)的豎向簡(jiǎn)潔折疊菜單效果代碼,涉及JavaScript鏈?zhǔn)讲僮髋c元素遍歷等相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10
這篇文章主要介紹了JS數(shù)組求和的常用方法,結(jié)合實(shí)例形式總結(jié)分析了5種數(shù)組求和的常見(jiàn)操作方法與相關(guān)處理技巧,需要的朋友可以參考下2019-01-01
JavaScript實(shí)現(xiàn)輸入框與清空按鈕聯(lián)動(dòng)效果
本文給大家分享基于js實(shí)現(xiàn)輸入框與清空框按鈕聯(lián)動(dòng)效果，非常實(shí)用，代碼簡(jiǎn)單易懂，感興趣的朋友一起看看吧2016-09-09
這篇文章主要為大家詳細(xì)介紹了d3.js實(shí)現(xiàn)圖形拖拽，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-12-12
JS實(shí)現(xiàn)的跨瀏覽器解析XML文件實(shí)例
這篇文章主要介紹了JS實(shí)現(xiàn)的跨瀏覽器解析XML文件的方法,結(jié)合實(shí)例形式分析了javascript基于ActiveXObject操作xml文件的加載與解析相關(guān)技巧,需要的朋友可以參考下2016-06-06
js函數(shù)名與form表單元素同名沖突的問(wèn)題
本篇文章主要是對(duì)js函數(shù)名與form表單元素同名沖突的問(wèn)題進(jìn)行了詳細(xì)的介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2014-03-03
本篇文章主要是對(duì)js輸出陰歷、陽(yáng)歷、年份、月份、周示例代碼進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2014-01-01
ECMAScript?數(shù)據(jù)類型之Number類型
這篇文章主要介紹了?ECMAScript?數(shù)據(jù)類型之Number類型，Number類型使用IEEE?754格式表示整數(shù)和浮點(diǎn)值，更多相關(guān)內(nèi)容請(qǐng)需要的小伙伴參考下面文章內(nèi)容2022-06-06