背景

最近在寫一個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
			}
	}
],

總結(jié)

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論