echarts柱狀圖坐標文字顯示不完整解決方式

本文轉載自：https://jingyan.baidu.com/article/ab69b2707a9aeb2ca7189f0c.html

echarts是一個純JavaScript的圖標庫，此處介紹最新版本4.2.0使用，其中的配置項也適用於3.0版本。

此處以柱狀圖為例說明，在某些固定寬高的場景下，當坐標軸文字比較長時，文字顯示不完整的解決方式：

通過設置grid屬性下的left、right、bottom值，可讓圖形自適應文字大小

方法/步驟

 

1. 新建如下結構的測試文件

        Echarts

           -- Content

              -- echarts.min.js

              -- jquery-1.11.3.min.js

           -- Echarts.html

   

   

2. x軸坐標文字顯示不完整的場景，代碼如下 

        通常這種情況出現在echarts節點外層設置了高寬所致，而且，某些場景下外層需要這樣設置

   

3. x軸坐標文字顯示不完整的場景，運行效果如下

   

4. y軸坐標文字顯示不完整的場景，代碼如下

   

5. y軸坐標文字顯示不完整的場景，運行效果如

   

6. 設置grid屬性，x軸坐標文字完整顯示

   

   

7. 設置grid屬性，y軸坐標文字完整顯示