久久无码中文字幕_日韩精品无码一本二本三_久久精品呦女暗网_欧美一级夜夜爽_久久精品国产99久久99久久久

28
2023/07

echartsX軸多數(shù)據(jù)時(shí)不再重疊

發(fā)布時(shí)間:2023-07-28 15:38:30
發(fā)布者:箭矢猶鋒
瀏覽量:
0

echartsX軸多數(shù)據(jù)時(shí)不再重疊

      看第一張圖,我們選取了22年7月31日到23年八月31的時(shí)間,發(fā)現(xiàn)因?yàn)闀r(shí)間太多而重疊在了一起,觀感上很不好,而且想要看某一個(gè)時(shí)間也變的很難,為了解決這個(gè)問(wèn)題于是去翻了一下echarts的文檔,發(fā)現(xiàn)有個(gè)interval,能夠強(qiáng)制設(shè)置坐標(biāo)軸分割間隔,比如可以設(shè)置為7或者10,這種在固定的數(shù)值只在數(shù)據(jù)固定的時(shí)候才有用,如果數(shù)據(jù)過(guò)少或者過(guò)多都會(huì)造成觀看的不方便。

echartsX軸多數(shù)據(jù)時(shí)不再重疊

      解決方法是我們可以利用判斷數(shù)據(jù)的長(zhǎng)度,利用變量來(lái)動(dòng)態(tài)改變間隔的數(shù)值。

echartsX軸多數(shù)據(jù)時(shí)不再重疊

// 這塊代碼做一個(gè)判斷
    var xlength;
if (res.data.list.length > 7) {
    xlength = parseInt(res.data.list.length / 7);
} else {
xlength = 0;
}

      如圖所示,我們以7為界限,當(dāng)數(shù)據(jù)量小于7的時(shí)候取0,大于7的時(shí)候我們用這個(gè)數(shù)據(jù)長(zhǎng)度除以7并取正整數(shù),并把xlength設(shè)置為interval的值,就能根據(jù)數(shù)值動(dòng)態(tài)改變間隔長(zhǎng)度了。

echartsX軸多數(shù)據(jù)時(shí)不再重疊

xAxis: {
        type: 'category',
        data: xAxisData,
        axisLabel: {
           interval: xlength,
           rotate: 40 //傾斜
        }
       },

      這里看一下完成的效果。

屏幕截圖(113).png

返回列表