echarts柱状图坐标文字显示不完整解决方式
limeiky
·
2019-11-14
·
via 博客园 - limeiky
echarts是一个纯JavaScript的图标库，此处介绍最新版本4.2.0使用，其中的配置项也适用于3.0版本。
此处以柱状图为例说明，在某些固定宽高的场景下，当坐标轴文字比较长时，文字显示不完整的解决方式：
通过设置grid属性下的left、right、bottom值，可让图形自适应文字大小
方法/步骤
-
新建如下结构的测试文件
Echarts
-- Content
-- echarts.min.js
-- jquery-1.11.3.min.js
-- Echarts.html
-
x轴坐标文字显示不完整的场景，代码如下
通常这种情况出现在echarts节点外层设置了高宽所致，而且，某些场景下外层需要这样设置
-
x轴坐标文字显示不完整的场景，运行效果如下
-
y轴坐标文字显示不完整的场景，代码如下
-
y轴坐标文字显示不完整的场景，运行效果如
-
设置grid属性，x轴坐标文字完整显示
-
设置grid属性，y轴坐标文字完整显示
posted on
2019-11-14 10:00
limeiky
阅读(8184)
评论(0)
收藏
举报
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。
