背景

最近在寫一個(gè)echarts數(shù)據(jù)看板，要在一個(gè)頁(yè)面中展示多張圖表，所以留給每張圖表的尺寸就很小。

這也就使得圖表x軸的刻度文字全部擠到一起了，廢話不多說，直接上圖看效果。

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

解決方法

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

最笨的方法

如果空間夠的話直接將echart所在的div層尺寸設(shè)置得大一些，grid對(duì)象也同理，只要展示的空間足夠?qū)?，刻度?biāo)簽自然就不會(huì)擠到一起。

開個(gè)玩笑哈，能找到這類文章的，都是需要在有限的空間里解決間隔的問題

方法一

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

官方文檔是這樣說的：

通過設(shè)置interval的值，來達(dá)到按指定間隔顯示或者不顯示，或者使用回調(diào)函數(shù)，回調(diào)函數(shù)返回的布爾值決定指定索引的標(biāo)簽是否顯示。

這也是網(wǎng)上能找到的最普遍的答案，可惜沒能解決我的問題。

官方文檔上寫的是在類目軸中有效，而我的x數(shù)據(jù)軸類型是“time”。

所以只能再想其他方法

方法二

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

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

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

官方文檔上說函數(shù)有兩個(gè)參數(shù)，一個(gè)是索引一個(gè)是值。

注意，這里的索引并不是我們x軸數(shù)據(jù)的索引，而是圖標(biāo)刻度的索引。

舉個(gè)例子，我的數(shù)據(jù)集是每秒鐘電表的讀數(shù)，那么一個(gè)小時(shí)就是3600條，如果是數(shù)據(jù)集索引的話就應(yīng)該是0到3599，實(shí)際上，我們從沒看到過一個(gè)數(shù)據(jù)軸上有那么多刻度。

我們圖表數(shù)據(jù)軸的標(biāo)簽數(shù)量是echarts在渲染的時(shí)候自動(dòng)生成的，但是數(shù)量還真不好說而且即便是同一個(gè)圖表不同時(shí)間也不一樣，一般也就十來個(gè)。

來看一下我寫的回調(diào)函數(shù)：

// 通過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)做過數(shù)據(jù)清洗，本身就是Date類型，所以沒有在函數(shù)內(nèi)再做數(shù)據(jù)轉(zhuǎn)換

我先把所有的標(biāo)簽索引打印出來，發(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
			}
	}
],

總結(jié)

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

最新評(píng)論