實現echarts圖形bar大小自適應


場景:類目軸,bar柱形圖

問題:數據條數不同時,希望柱子的大小是自適應的

比如數據比較多是

 

 當數據比較少

 

 方式一:根據官網提供的barWidth設置%(根據類目的寬度去自適應,類目寬度就是X軸對應的文本)

原理:數據多類目(文本1-12,比如第一個圖)多,類目寬度就小,反之亦然

 

 比如設置50%

方式二: 設置同一系列的柱間距離,默認為類目間距,跟方式一異曲同工,設置50%效果一樣

 

 最后設置50%效果如下

 

 

 

效果是有了,可是還不夠完美,萬一只有一條數據,豈不是滿屏都是柱形。(⊙o⊙)…

查看參數配置,發現 barMaxWidth 可以限制最大寬度,於是我限制了一下為46

 

 

效果:

 

 如果想設置barMinWidth最小寬度也可以的,這里不舉例了


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM