
看第一張圖,我們選取了22年7月31日到23年八月31的時間,發現因為時間太多而重疊在了一起,觀感上很不好,而且想要看某一個時間也變的很難,為了解決這個問題于是去翻了一下echarts的文檔,發現有個interval,能夠強制設置坐標軸分割間隔,比如可以設置為7或者10,這種在固定的數值只在數據固定的時候才有用,如果數據過少或者過多都會造成觀看的不方便。

解決方法是我們可以利用判斷數據的長度,利用變量來動態改變間隔的數值。

// 這塊代碼做一個判斷
var xlength;
if (res.data.list.length > 7) {
xlength = parseInt(res.data.list.length / 7);
} else {
xlength = 0;
}如圖所示,我們以7為界限,當數據量小于7的時候取0,大于7的時候我們用這個數據長度除以7并取正整數,并把xlength設置為interval的值,就能根據數值動態改變間隔長度了。

xAxis: {
type: 'category',
data: xAxisData,
axisLabel: {
interval: xlength,
rotate: 40 //傾斜
}
},這里看一下完成的效果。

上一篇: 分享幾個es6中Object的常用方法
下一篇: Element表格實現不同分辨率下自適應



