echarts圖表中x軸和y軸的配置指南
xAxis與yAxis中有很多配置項(xiàng),下面我以xAxis進(jìn)行詳解,yAxis參考xAxis即可
nameTextStyle:坐標(biāo)軸名稱的文字樣式
axisLine:坐標(biāo)軸軸線相關(guān)設(shè)置。
axisTick:坐標(biāo)軸刻度相關(guān)設(shè)置。
axisLabel:坐標(biāo)軸刻度標(biāo)簽的相關(guān)設(shè)置。
splitLine: 坐標(biāo)軸在 grid 區(qū)域中的分隔線設(shè)置。
splitArea :坐標(biāo)軸在 grid 區(qū)域中的分隔區(qū)域,默認(rèn)不顯示。
上述xAxis與yAxis中的配置項(xiàng),其中也會(huì)含有很多屬性,具體使用請(qǐng)參考一下內(nèi)容。
xAxis: { id: '', show: true, //是否顯示x軸 gridIndex: 0, //軸所在grid索引,默認(rèn)位于第一個(gè)grid alignTicks: false, //在多個(gè)軸為數(shù)值軸的時(shí)候,可以開(kāi)啟該配置項(xiàng)自動(dòng)對(duì)齊刻度。只對(duì)'value'和'log'類型的軸有效 position: 'top', //軸的位置(top/bottom) offset: 0, //軸相對(duì)于默認(rèn)位置的偏移,在相同的position上有多個(gè)軸時(shí)有用 type: 'category', //坐標(biāo)軸類型,值category/value,與y軸呼應(yīng),若x軸配置category則y軸配置value name: '', //坐標(biāo)軸名稱 nameLocation: 'end', //坐標(biāo)軸名稱顯示位置,可選值start/middle[或者center]/end nameTextStyle: {}, //一般樣式也很少直接修改且內(nèi)容過(guò)多待更新... ... nameGap: 15, //坐標(biāo)軸名稱與軸線間距離 nameRotate: 10, //坐標(biāo)軸名字旋轉(zhuǎn),角度值 inverse: false, //是否是反向坐標(biāo)軸 boundaryGap: ['20%', '20%'], // 坐標(biāo)軸兩邊留白策略,也可以使用布爾值,true居中 min: '', //刻度最小值 max: '', //刻度最大值 scale: false, //只在數(shù)值軸中type: 'value'有效, 設(shè)置min和max后無(wú)效。是否是脫離 0 值比例。設(shè)置成true后坐標(biāo)刻度不會(huì)強(qiáng)制包含零刻度。在雙數(shù)值軸的散點(diǎn)圖中較有用 splitNumber: 5, //坐標(biāo)軸的分割段數(shù)(預(yù)估值) minInterval: 0, //自動(dòng)計(jì)算坐標(biāo)軸最小間隔,例:設(shè)置成1,刻度沒(méi)有小數(shù) maxInterval: '', //自動(dòng)計(jì)算坐標(biāo)軸最大間隔 axisLine: { show: true, // 是否顯示坐標(biāo)軸軸線 symbol: ['none', 'arrow'], // 軸線兩端箭頭,兩個(gè)值,none表示沒(méi)有箭頭,arrow表示有箭頭 symbolSize: [10, 15], // 軸線兩端箭頭大小,數(shù)值一表示寬度,數(shù)值二表示高度 lineStyle: { color: '#333', // 坐標(biāo)軸線線的顏色 width: '5', // 坐標(biāo)軸線線寬 type: 'solid', // 坐標(biāo)軸線線的類型(solid實(shí)線類型;dashed虛線類型;dotted點(diǎn)狀類型) }, }, axisTick: { show: true, // 是否顯示坐標(biāo)軸刻度 inside: true, // 坐標(biāo)軸刻度是否朝內(nèi),默認(rèn)朝外 length: 5, //坐標(biāo)軸刻度的長(zhǎng)度 lineStyle: { color: '#FFF', //刻度線的顏色 width: 10, //坐標(biāo)軸刻度線寬 type: 'solid', //坐標(biāo)軸線線的類型(solid實(shí)線類型;dashed虛線類型;dotted點(diǎn)狀類型) }, }, axisLabel: { show: true, //是否顯示刻度標(biāo)簽 interval: '0', //坐標(biāo)軸刻度標(biāo)簽的顯示間隔,在類目軸中有效.0顯示所有 inside: true, //刻度標(biāo)簽是否朝內(nèi),默認(rèn)朝外 rotate: 90, //刻度標(biāo)簽旋轉(zhuǎn)的角度,在類目軸的類目標(biāo)簽顯示不下的時(shí)候可以通過(guò)旋轉(zhuǎn)防止標(biāo)簽之間重疊;旋轉(zhuǎn)的角度從-90度到90度 margin: 10, //刻度標(biāo)簽與軸線之間的距離 // formatter 刻度標(biāo)簽的內(nèi)容格式器,支持字符串模板和回調(diào)函數(shù)兩種形式 color: '#FFF', // 刻度標(biāo)簽文字的顏色 fontStyle: 'normal', // 字體的風(fēng)格(normal無(wú)樣式;italic斜體;oblique傾斜字體) fontWeight: 'normal', // 字體的粗細(xì)(normal無(wú)樣式;bold加粗;bolder加粗再加粗;lighter變細(xì);數(shù)字定義粗細(xì)也可以取值范圍100至700) fontSize: '20', //文字字體大小 align: 'left', // 文字水平對(duì)齊方式,默認(rèn)自動(dòng)(left/center/right) verticalAlign: 'left', // 文字垂直對(duì)齊方式,默認(rèn)自動(dòng)(top/middle/bottom) lineHeight: '50', // 行高 backgroundColor: 'red', // 文字塊背景色,例:#123234, red, rgba(0,23,11,0.3) }, splitLine: { show: true, // 是否顯示分隔線。默認(rèn)數(shù)值軸顯示,類目軸不顯示 interval: '0', // 坐標(biāo)軸刻度標(biāo)簽的顯示間隔,在類目軸中有效.0顯示所有 color: ['#ccc'], //color分隔線顏色,可設(shè)置單個(gè)顏色,也可設(shè)置顏色數(shù)組,分隔線會(huì)按數(shù)組中顏色順序依次循環(huán)設(shè)置顏色 width: 3, // 分隔線線寬 type: 'solid', // 坐標(biāo)軸線線的類型(solid實(shí)線類型;dashed虛線類型;dotted點(diǎn)狀類型) }, splitArea: { show: true, // 是否顯示分隔區(qū)域 interval: '0', // 坐標(biāo)軸刻度標(biāo)簽的顯示間隔,在類目軸中有效.0顯示所有 areaStyle: { color: ['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)'], //color分隔區(qū)域顏色。分隔區(qū)會(huì)按數(shù)組中顏色順序依次循環(huán)設(shè)置顏色。默認(rèn)是一個(gè)深淺的間隔色 opacity: 1, // 圖形透明度。支持從0到1的數(shù)字,為0時(shí)不繪制該圖形 }, }, data: { textStyle: { color: '#FFF', // 文字的顏色 fontStyle: 'normal', // 文字字體的風(fēng)格(normal無(wú)樣式;italic斜體;oblique傾斜字體) fontWeight: 'normal', //字體的粗細(xì)(normal無(wú)樣式;bold加粗;bolder加粗再加粗;lighter變細(xì);數(shù)字定義粗細(xì)也可以取值范圍100至700) fontSize: '20', // 文字字體大小 align: 'left', // 文字水平對(duì)齊方式,默認(rèn)自動(dòng)(left/center/right) verticalAlign: 'left', // 文字垂直對(duì)齊方式,默認(rèn)自動(dòng)(top/middle/bottom) lineHeight: '50', // 行高 backgroundColor: 'red', // 文字塊背景色,例:#123234, red, rgba(0,23,11,0.3) } } }
總結(jié)
到此這篇關(guān)于echarts圖表中x軸和y軸的配置的文章就介紹到這了,更多相關(guān)echarts圖表x軸y軸配置內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
javascript實(shí)現(xiàn)很浪漫的氣泡冒出特效
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)很浪漫的氣泡冒出特效,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2015-11-11淺析jsopn跨域請(qǐng)求原理及cors(跨域資源共享)的完美解決方法
由于同源策略的緣故,ajax不能向不同域的網(wǎng)站發(fā)出請(qǐng)求。接下來(lái)通過(guò)本文給大家介紹jsopn跨域請(qǐng)求原理及cors(跨域資源共享)的完美解決方法,需要的朋友可以參考下2017-02-02Javascript圖像處理—圖像形態(tài)學(xué)(膨脹與腐蝕)
上一篇文章,我們講解了圖像處理中的閾值函數(shù),這一篇文章我們來(lái)做膨脹和腐蝕函數(shù)2013-01-01實(shí)現(xiàn)抖音兩個(gè)旋轉(zhuǎn)小球的loading技巧實(shí)例
這篇文章主要為大家介紹了實(shí)現(xiàn)抖音兩個(gè)旋轉(zhuǎn)小球的loading技巧實(shí)例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-05-05Webpack4 使用Babel處理ES6語(yǔ)法的方法示例
這篇文章主要介紹了Webpack4 使用Babel處理ES6語(yǔ)法的方法示例,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-03-03前端實(shí)現(xiàn)PDF文件預(yù)覽的7種方案與性能對(duì)比詳解
這篇文章主要為大家詳細(xì)介紹了前端實(shí)現(xiàn)PDF文件預(yù)覽的7種方案與性能對(duì)比,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2025-03-03IE view-source 無(wú)法查看看源碼 JavaScript看網(wǎng)頁(yè)源碼
查看網(wǎng)頁(yè)源代碼的方法其實(shí)有好幾種,最常用的我們就是在瀏覽器中直接選擇“查看網(wǎng)頁(yè)源代碼”就可以了,但是在有些時(shí)候這種方法卻不能見(jiàn)效,以下再介紹幾種簡(jiǎn)單的方法供大家參考!2009-07-07純JavaScript實(shí)現(xiàn)櫻花飄落效果的示例代碼
這篇文章主要為大家詳細(xì)介紹了如何純JavaScript實(shí)現(xiàn)櫻花飄落效果,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-04-04js使用split函數(shù)按照多個(gè)字符對(duì)字符串進(jìn)行分割的方法
這篇文章主要介紹了js使用split函數(shù)按照多個(gè)字符對(duì)字符串進(jìn)行分割的方法,實(shí)例分析了split函數(shù)的使用技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-03-03