echarts中X軸顯示特定個數(shù)label并修改樣式的方法詳解

更新時間：2022年07月28日 14:20:29 作者：keloneko

最近在使用Echarts圖表遇到些特別的需求,想著給大家整理下,所以下面這篇文章主要給大家介紹了關(guān)于echarts中X軸顯示特定個數(shù)label并修改樣式的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下

前言

在使用echarts繪圖時可能遇到一些特別的需求，如，當(dāng)x周表示日期且數(shù)據(jù)較多（如三個月，按天統(tǒng)計），此時如果按照echarts的默認配置，則會根據(jù)空間剩余的大小自動計算最終顯示有限的幾個不重疊的label

需求：必須顯示起始日期和終止日期

echarts默認屬性會導(dǎo)致如果重疊，最大值和最小值會被隱藏，首先要實現(xiàn)不讓最大值和最小值隱藏，這很簡單

xAxis: {
	axisLabel: {
		showMinLabel: true,
		showMaxLabel: true
	}
}

需求：由于畫布限制，只讓顯示起始和終止日期，或者再加上中間日期

此時如果只設(shè)置上面的兩個屬性，中間的刻度仍然會根據(jù)echarts的算法去繪制，依然是按照剩余空間來顯示，不一定會符合要求，即便只顯示了一個值，可能也不是我們預(yù)期的那一個，那么還有一個屬性

xAxis: {
	axisLabel: {
		showMinLabel: true,
		showMaxLabel: true,
		interval: Math.ceil(data.length / 2)
	}
}

interval 屬性表示間隔多少項展示一個刻度，在這里我們直接取一半，這樣其他的刻度就會被隱藏掉

這是種比較簡單的實現(xiàn)方法，當(dāng)然也可以直接對label進行格式化

xAxis: {
	data: data,
	axisLabel: {
		formatter (val, i) {
			if (i === 0 || i === data.length - 1 || i === Math.ceil(data.length / 2)) {
				return val
			}
			return ''
		}
	}
}

這種寫法，我們將只留下需要的刻度，其余都賦值為''，一樣可以實現(xiàn)需求，同時也可以對最終值進行格式化
如moment(val).format('YYYY-MM-DD')等

需求：將起始和終止刻度限定在軸線范圍內(nèi)，不允許現(xiàn)實超過軸線

這時候單純的靠屬性已經(jīng)沒辦法滿足需求，因為很明顯左右都需要調(diào)整，同時一個是左邊多了，一個是右邊多了，此時需要用到echarts的富文本模式rich

//  左右兩個位置需要調(diào)整，需要定義兩個類名
// 這里樣式可以用padding， 也可以用寬度和對齊方式來做（我用這種），
const richCss = {
	start: {
		width: 145,
		align: 'right'
	},
	end: {
		width: 145,
		align: 'left'
	}
}

這樣我們就有了兩個類名，再通過第二步的formatter函數(shù)的方法將其通過富文本的方式渲染

xAxis: {
	data: data,
	axisLabel: {
		formatter (val, i) {
			if (i === 0) {
				return `{start| ${val}}`
			} else if (i === data.length - 1) {
				return `{end| ${val}}`
			}  else if (i === Math.ceil(data.length / 2)) {
				return val
			}
			return ''
		},
		rich: richCss
	}
}

這樣就實現(xiàn)了將兩端刻度限定在軸線范圍內(nèi)，達到美化的目的，當(dāng)然如果中間的刻度位置有問題也可以用相同的方法進行調(diào)整

這是本人在工作中遇到的需求，然后自己揣摩出的解決方案，如果有更好的方案歡迎留言，一起學(xué)習(xí)