echarts柱狀圖x軸數(shù)據(jù)隔一個顯示

最近寫了一些數(shù)據(jù)方面的需求,所以免不了使用echarts,因為沒怎么用過,所以遇到的問題還是比較多,先記錄一些簡單的問題叭。

在顯示一個柱狀圖的時候,x軸的數(shù)據(jù)是隔一個顯示的,但是hover的時候卻能顯示出當前軸x軸的名稱,如下圖:

剛開始有點奇怪,看代碼是沒有任何毛病的,后來就試了官網的例子,也就是把最好一個柱子的x軸名稱改為周天,則顯示就沒毛病了:

那就只能說明這個軸的名稱太長了,所以導致它默認就隔一個顯示,找了半天才發(fā)現(xiàn)控制它的屬性是axisLabel,

 xAxis : [
        {
            type : 'category',
            data : ["周一", "周二", "周三", "周四", "周五", "周六", "周天"],
            axisTick: {
                alignWithLabel: true
            },
            axisLabel: {
                interval:0 
            }
        }
    ],

該屬性設置成0則表示強制顯示所有標簽,設置為1的話,隔一個標簽顯示一個標簽,以此類推。
但是設置為0的話,如果數(shù)據(jù)再長點,它會把這個數(shù)據(jù)直接不顯示,還是沒有解決問題,后來發(fā)現(xiàn),可以讓這個數(shù)據(jù)傾斜,那么就不會有不顯示的問題了,

  axisLabel: {
                interval:0,
                rotate:45, //代表逆時針旋轉45度
            }

rotate表示傾斜顯示,-是順時針旋轉多少度,+或不寫表示逆時針旋轉多少度,默認值為90,那么顯示就如下了:

雖然只是一個小點,但是還是要養(yǎng)成多學習多記錄的習慣,給自己加油!

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容