快捷導(dǎo)航

echarts柱狀圖坐標(biāo)軸內(nèi)容顯示不全的兩種解決辦法

更新時間：2023年05月29日 16:09:01 作者：先知demons

本文主要介紹了echarts柱狀圖坐標(biāo)軸內(nèi)容顯示不全的兩種解決辦法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

情況一：坐標(biāo)上的內(nèi)容是文字時

如上圖這樣一個橫向的柱狀圖，y坐標(biāo)軸的內(nèi)容太長后會導(dǎo)致顯示不全。

因為數(shù)據(jù)是由后端傳過來的，有些會很長有些會比較短，如果只是一味的調(diào)整grid會導(dǎo)致短數(shù)據(jù)前的留白過于多，布局不合理。這個時候就需要用一些別的屬性。

解決辦法：

在yAxis中的axisLabel中加入以下屬性配置：

注釋：

width: 60,//將內(nèi)容的寬度固定
overflow: 'truncate',//超出的部分截斷
truncate: '...',//截斷的部分用...代替

附上官方文檔截圖：

情況二：如果縱坐標(biāo)上是數(shù)字

如圖，左側(cè)的數(shù)據(jù)會展示不全

一、首先可以配置grid自適應(yīng)

grid: {
            top: "15%",
            left: "2%",
            right: "2%",
            bottom: "2%",
            containLabel: true
          },

這樣設(shè)置之后數(shù)字就會展示全了：

但是新的需求又來了，如果在數(shù)據(jù)特別大的情況下，左邊數(shù)據(jù)占得位置就會越來越寬，導(dǎo)致布局不好看，所以我們可以對這種數(shù)字進行處理一下

在yAxis的axisLabel屬性中進行配置formatter

formatter(v) {
                    v = v.toString()
                    if (v >= 100000000000) {
                        return (v.substring(0, 5) / 10) + '億'
                    } else if (v >= 10000000000) {
                        return (v.substring(0, 4) / 10) + '億'
                    } else if (v >= 1000000000) {
                        return (v.substring(0, 3) / 10) + '億'
                    } else if (v >= 100000000) {
                        return (v.substring(0, 2) / 10) + '億'
                    } else if (v >= 10000000) {
                        return v.substring(0, 4) + '萬'
                    } else if (v >= 1000000) {
                        return v.substring(0, 3) + '萬'
                    } else if (v >= 100000) {
                        return v.substring(0, 2) + '萬'
                    } else if (v >= 10000) {
                        return (v.substring(0, 2) / 10) + '萬'
                    } else if (v >= 1000) {
                        return v
                    } else {
                        return v
                    }
                },

這樣設(shè)置之后的效果如下圖：