?情況一：坐標(biāo)上的內(nèi)容是文字時(shí)
如上圖這樣一個(gè)橫向的柱狀圖，y坐標(biāo)軸的內(nèi)容太長后會(huì)導(dǎo)致顯示不全。
因?yàn)閿?shù)據(jù)是由后端傳過來的，有些會(huì)很長有些會(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è)寬度?文章來源：http://www.zghlxwxcb.cn/news/detail-456559.html
?文章來源地址http://www.zghlxwxcb.cn/news/detail-456559.html
到了這里，關(guān)于echarts柱狀圖坐標(biāo)軸的內(nèi)容太長導(dǎo)致顯示不全的兩種解決辦法的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
