x橫坐標(biāo)文字設(shè)置間隔顯示

以 echarts 示例里面的 這個(gè)折線圖為列，當(dāng)數(shù)據(jù)比較少時(shí)，X軸的類目文字（橫坐標(biāo)）可以完全顯示

修改左側(cè)的option內(nèi)容，在xAxis的data數(shù)組中再添加兩行內(nèi)容，同時(shí)，在series中添加對(duì)應(yīng)數(shù)量的值，運(yùn)行后，可以看到x橫坐標(biāo)已經(jīng)按照?qǐng)D形大小，自動(dòng)間隔顯示了文字。如果沒有特殊要求，這個(gè)就可以滿足當(dāng)內(nèi)容少時(shí)，全部顯示橫坐標(biāo)文字，當(dāng)內(nèi)容多時(shí)，自動(dòng)間隔顯示文字

在 option 的 xAxis 區(qū)域添加 axisLabel:{ interval:0 }，這里是設(shè)置橫坐標(biāo)的文字全部顯示、不間隔，再次運(yùn)行就可以看到橫坐標(biāo)的內(nèi)容全部顯示了，但是由于空間不夠，內(nèi)容會(huì)擠到一起；

將間隔值修改為5，axisLabel:{interval:5}，再次運(yùn)行，就可以看到x橫坐標(biāo)內(nèi)容已經(jīng)按照要求間隔顯示了！

y縱坐標(biāo)文字設(shè)置間隔顯示

用上面同樣的方法設(shè)置Y縱坐標(biāo)文字設(shè)置間隔顯示無效（官方文檔說明 axisLabel.interval 坐標(biāo)軸刻度標(biāo)簽的顯示間隔，在類目軸中有效），可以通過 formatter 設(shè)置，還可配合 splitNumber 使用

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun',
        'Mon1', 'Tue1', 'Wed1', 'Thu1', 'Fri1', 'Sat1', 'Sun1',
        'Mon2', 'Tue2', 'Wed2', 'Thu2', 'Fri2', 'Sat2', 'Sun2'],
        
    },
    yAxis: {
        type: 'value',
        splitNumber: 24,
        axisLabel:{
            formatter: (val,key)=>{
                if(key%3 == 0 ){
                    return val
                }
                
            }
        }
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320, 820, 932, 901,
        934, 1290, 1330, 1320, 820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
        smooth: true
    }]
};

補(bǔ)充：Echarts柱狀圖x軸刻度間隔顯示不全/刻度間隔全部顯示-xaxis

在初步接觸Echarts時(shí)，經(jīng)常遇到柱狀圖的坐標(biāo)刻度顯示不全的問題，如下圖：

   xAxis : [
       {
           type : 'category',
           data : ['主機(jī)故障', '主機(jī)連接超時(shí)', '水泵流量錯(cuò)誤', '水泵離線', '一次潛水泵離線', '溫控器離線', '風(fēng)機(jī)離線'],
           axisTick: {
               alignWithLabel: true
           }
       }
   ],

此問題一般是由于刻度文字過長(zhǎng)導(dǎo)致的，即文字長(zhǎng)度超過了label的長(zhǎng)度。既然已知問題原因，那就好解決了。

1、在xAxis : [{}]中加入axisLabel

控制它的屬性是axisLabel，該屬性interva設(shè)置成0則表示強(qiáng)制顯示所有標(biāo)簽，設(shè)置為1的話，隔一個(gè)標(biāo)簽顯示一個(gè)標(biāo)簽，以此類推。

 xAxis : [
        {
            axisLabel: {
                interval:0,//代表顯示所有x軸標(biāo)簽顯示
            }
        }
    ],

2、如果還是顯示不全，可以再添加rotate

rotate表示傾斜顯示，-是順時(shí)針旋轉(zhuǎn)多少度，+或不寫表示逆時(shí)針旋轉(zhuǎn)多少度，默認(rèn)值為90。

axisLabel: {
                interval:0,//代表顯示所有x軸標(biāo)簽顯示
                rotate:45, //代表逆時(shí)針旋轉(zhuǎn)45度
            }

總結(jié)

到此這篇關(guān)于echarts圖形x、y坐標(biāo)文字設(shè)置間隔顯示及相關(guān)問題的文章就介紹到這了,更多相關(guān)echarts圖形x、y坐標(biāo)文字間隔內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論