快捷導(dǎo)航

ECharts設(shè)置x軸刻度間隔的2種解決方法

更新時(shí)間：2022年08月01日 09:25:58 作者：道HUNG

在初步接觸Echarts時(shí),經(jīng)常遇到設(shè)置x軸刻度間隔的問(wèn)題,這篇文章主要給大家介紹了關(guān)于ECharts設(shè)置x軸刻度間隔的2種解決方法,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

背景

最近在寫(xiě)一個(gè)echarts數(shù)據(jù)看板，要在一個(gè)頁(yè)面中展示多張圖表，所以留給每張圖表的尺寸就很小。這也就使得圖表x軸的刻度文字全部擠到一起了，廢話不多說(shuō)，直接上圖看效果。

右邊的圖標(biāo)就是x軸刻度標(biāo)簽文字被擠到一起了，左邊是該過(guò)之后的效果。

解決方法

想要達(dá)到上面圖片中左邊的效果方法不止一種。

最笨的方法 如果空間夠的話直接將echart所在的div層尺寸設(shè)置得大一些，grid對(duì)象也同理，只要展示的空間足夠?qū)?，刻度?biāo)簽自然就不會(huì)擠到一起。開(kāi)個(gè)玩笑哈，能找到這類文章的，都是需要在有限的空間里解決間隔的問(wèn)題

方法一: x軸的標(biāo)簽屬性axisLabel下利用interval設(shè)置間隔

官方文檔是這樣說(shuō)的：

通過(guò)設(shè)置interval的值，來(lái)達(dá)到按指定間隔顯示或者不顯示，或者使用回調(diào)函數(shù)，回調(diào)函數(shù)返回的布爾值決定指定索引的標(biāo)簽是否顯示。這也是網(wǎng)上能找到的最普遍的答案，可惜沒(méi)能解決我的問(wèn)題。

官方文檔上寫(xiě)的是在類目軸中有效，而我的x數(shù)據(jù)軸類型是“time”。所以只能再想其他方法

方法二：為axisLabel. formatters添加回調(diào)函數(shù)改變標(biāo)簽文字

formatters屬性是用來(lái)設(shè)置文字格式的，既然可以用來(lái)設(shè)置文字格式，那我把需要隱藏的文字改為空字符串不就行了。

思路一通代碼就簡(jiǎn)單了，先看看回調(diào)函數(shù)怎么用

官方文檔上說(shuō)函數(shù)有兩個(gè)參數(shù)，一個(gè)是索引一個(gè)是值。注意，這里的索引并不是我們x軸數(shù)據(jù)的索引，而是圖標(biāo)刻度的索引。舉個(gè)例子，我的數(shù)據(jù)集是每秒鐘電表的讀數(shù)，那么一個(gè)小時(shí)就是3600條，如果是數(shù)據(jù)集索引的話就應(yīng)該是0到3599，實(shí)際上，我們從沒(méi)看到過(guò)一個(gè)數(shù)據(jù)軸上有那么多刻度。

我們圖表數(shù)據(jù)軸的標(biāo)簽數(shù)量是echarts在渲染的時(shí)候自動(dòng)生成的，但是數(shù)量還真不好說(shuō)而且即便是同一個(gè)圖表不同時(shí)間也不一樣，一般也就十來(lái)個(gè)。
來(lái)看一下我寫(xiě)的回調(diào)函數(shù)：

// 通過(guò)formatter設(shè)置時(shí)間刻度間隔
function time_label_formatter(value,index) {
    // console.info(index);
    let remainder = index % 3;
    if (remainder == 0) {
        return "{HH}:{mm}";
    }
    else{
        return "";
    }
}

我的時(shí)間類型數(shù)據(jù)在賦值給配置項(xiàng)數(shù)據(jù)集之前已經(jīng)做過(guò)數(shù)據(jù)清洗，本身就是Date類型，所以沒(méi)有在函數(shù)內(nèi)再做數(shù)據(jù)轉(zhuǎn)換

我先把所有的標(biāo)簽索引打印出來(lái)，發(fā)現(xiàn)是0到16，那么按照間隔設(shè)置為3或者4就好了。思路就是這樣，看到這里的朋友可以根據(jù)自己的實(shí)際情況調(diào)整一個(gè)間隔數(shù)就可以了。

最后看一下配置項(xiàng)series參數(shù)：

xAxis:[
	{
		type:"time",
		gridIndex:0,
		axisLabel：
			{
				rotate:-45,
				formatter:time_label_formatter
			},
	},
	{
		type:"time",
		gridIndex:1,
		axisLabel:
			{
				rotate:-45,
				formatter:time_label_formatter
			}
	}
],

附：Echarts柱狀圖x軸間隔顯示（顯示不全）

echarts中，橫軸數(shù)據(jù)如果非常多，會(huì)自動(dòng)隱藏一部分?jǐn)?shù)據(jù)，我們可以通過(guò)屬性interval來(lái)進(jìn)行調(diào)整。默認(rèn)會(huì)采用標(biāo)簽不重疊的策略間隔顯示標(biāo)簽，則需要在xAxis 屬性加上axisLabel:{interval: 0}?？梢栽O(shè)置成 0 強(qiáng)制顯示所有標(biāo)簽。

xAxis.axisLabel 屬性：axisLabel的類型是object，主要作用是：坐標(biāo)軸刻度標(biāo)簽的相關(guān)設(shè)置（當(dāng)然yAxis也是一樣有這個(gè)屬性的）。