前言

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

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

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

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

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

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

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

interval 屬性表示間隔多少項(xiàng)展示一個(gè)刻度，在這里我們直接取一半，這樣其他的刻度就會(huì)被隱藏掉

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

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

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

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

這時(shí)候單純的靠屬性已經(jīng)沒辦法滿足需求，因?yàn)楹苊黠@左右都需要調(diào)整，同時(shí)一個(gè)是左邊多了，一個(gè)是右邊多了，此時(shí)需要用到echarts的富文本模式rich

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

這樣我們就有了兩個(gè)類名， 再通過第二步的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
	}
}

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

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

總結(jié)

到此這篇關(guān)于echarts中X軸顯示特定個(gè)數(shù)label并修改樣式的文章就介紹到這了,更多相關(guān)echarts X軸顯示特定個(gè)label內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論