echarts柱状图坐标文字显示不完整解决方式

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轴坐标文字完整显示