背景

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

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

解決方法

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

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

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

官方文檔是這樣說的：

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

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

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

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

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

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

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

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

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

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

最后看一下配置項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ù)如果非常多，會自動隱藏一部分數(shù)據(jù)，我們可以通過屬性interval來進行調(diào)整。默認會采用標(biāo)簽不重疊的策略間隔顯示標(biāo)簽，則需要在xAxis 屬性加上axisLabel:{interval: 0}?？梢栽O(shè)置成 0 強制顯示所有標(biāo)簽。

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

總結(jié)

到此這篇關(guān)于ECharts設(shè)置x軸刻度間隔的2種解決方法的文章就介紹到這了,更多相關(guān)ECharts設(shè)置x軸刻度間隔內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論