快捷導(dǎo)航

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

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

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

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

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

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

解決辦法：

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

注釋：

width: 60,//將內(nèi)容的寬度固定
overflow: 'truncate',//超出的部分截?cái)?
truncate: '...',//截?cái)嗟牟糠钟?..代替

附上官方文檔截圖：

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

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

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

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

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

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

在yAxis的axisLabel屬性中進(jìn)行配置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è)置之后的效果如下圖：

這樣設(shè)置的好處是左側(cè)不會(huì)因?yàn)閿?shù)據(jù)過大而一度擴(kuò)展表格左側(cè)寬度

到此這篇關(guān)于echarts柱狀圖坐標(biāo)軸內(nèi)容顯示不全的兩種解決辦法的文章就介紹到這了,更多相關(guān)echarts柱狀圖坐標(biāo)軸顯示內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: