背景

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

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

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

解決方法

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

最笨的方法

如果空間夠的話直接將echart所在的div層尺寸設置得大一些，grid對象也同理，只要展示的空間足夠寬，刻度標簽自然就不會擠到一起。

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

方法一

x軸的標簽屬性axisLabel下利用interval設置間隔

官方文檔是這樣說的：

通過設置interval的值，來達到按指定間隔顯示或者不顯示，或者使用回調函數，回調函數返回的布爾值決定指定索引的標簽是否顯示。

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

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

所以只能再想其他方法

方法二

為axisLabel. formatters添加回調函數改變標簽文字

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

思路一通代碼就簡單了，先看看回調函數怎么用

官方文檔上說函數有兩個參數，一個是索引一個是值。

注意，這里的索引并不是我們x軸數據的索引，而是圖標刻度的索引。

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

我們圖表數據軸的標簽數量是echarts在渲染的時候自動生成的，但是數量還真不好說而且即便是同一個圖表不同時間也不一樣，一般也就十來個。

來看一下我寫的回調函數：

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

我的時間類型數據在賦值給配置項數據集之前已經做過數據清洗，本身就是Date類型，所以沒有在函數內再做數據轉換

我先把所有的標簽索引打印出來，發(fā)現是0到16，那么按照間隔設置為3或者4就好了。

思路就是這樣，看到這里的朋友可以根據自己的實際情況調整一個間隔數就可以了。

最后看一下配置項series參數：

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

總結

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

最新評論