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

  • 原创
  • |
  • 浏览：36945
  • |
  • 更新：
  • |
  • 标签：显示 
  • echarts柱状图坐标文字显示不完整解决方式1
  • echarts柱状图坐标文字显示不完整解决方式2
  • echarts柱状图坐标文字显示不完整解决方式3
  • echarts柱状图坐标文字显示不完整解决方式4
  • echarts柱状图坐标文字显示不完整解决方式5
  • echarts柱状图坐标文字显示不完整解决方式6
  • echarts柱状图坐标文字显示不完整解决方式7
分步阅读

echarts是一个纯JavaScript的图标库，此处介绍最新版本4.2.0使用，其中的配置项也适用于3.0版本。

此处以柱状图为例说明，在某些固定宽高的场景下，当坐标轴文字比较长时，文字显示不完整的解决方式：

通过设置grid属性下的left、right、bottom值，可让图形自适应文字大小

方法/步骤

  1. 1

    新建如下结构的测试文件

         Echarts

            -- Content

               -- echarts.min.js

               -- jquery-1.11.3.min.js

            -- Echarts.html

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

    x轴坐标文字显示不完整的场景，代码如下 

         通常这种情况出现在echarts节点外层设置了高宽所致，而且，某些场景下外层需要这样设置

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

    x轴坐标文字显示不完整的场景，运行效果如下

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

    y轴坐标文字显示不完整的场景，代码如下

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

    y轴坐标文字显示不完整的场景，运行效果如

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

    设置grid属性，x轴坐标文字完整显示

    echarts柱状图坐标文字显示不完整解决方式
    echarts柱状图坐标文字显示不完整解决方式
  7. 6
    此文章未经许可获取自百度经验
  8. 7

    设置grid属性，y轴坐标文字完整显示

    echarts柱状图坐标文字显示不完整解决方式
    echarts柱状图坐标文字显示不完整解决方式
    END
经验内容仅供参考，如果您需解决具体问题(尤其法律、医学等领域)，建议您详细咨询相关领域专业人士。
作者声明：本篇经验系本人依照真实经历原创，未经许可，谢绝转载。
展开阅读全部
相关标签显示