前言

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

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

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

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

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

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

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

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

這是種比較簡單的實現(xiàn)方法，當然也可以直接對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')等

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

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

//  左右兩個位置需要調整，需要定義兩個類名
// 這里樣式可以用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)了將兩端刻度限定在軸線范圍內， 達到美化的目的，當然如果中間的刻度位置有問題也可以用相同的方法進行調整

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

總結

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

最新評論