echarts柱状图坐标轴内容显示不全的两种解决办法
更新时间：2023年05月29日 16:09:01 作者：先知demons
本文主要介绍了echarts柱状图坐标轴内容显示不全的两种解决办法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
情况一：坐标上的内容是文字时
如上图这样一个横向的柱状图，y坐标轴的内容太长后会导致显示不全。
因为数据是由后端传过来的，有些会很长有些会比较短，如果只是一味的调整grid会导致短数据前的留白过于多，布局不合理。这个时候就需要用一些别的属性。
解决办法：
在yAxis中的axisLabel中加入以下属性配置：
注释：
width: 60,//将内容的宽度固定 overflow: 'truncate',//超出的部分截断 truncate: '...',//截断的部分用...代替
附上官方文档截图：
情况二：如果纵坐标上是数字
如图，左侧的数据会展示不全
一、首先可以配置grid自适应
grid: {
top: "15%",
left: "2%",
right: "2%",
bottom: "2%",
containLabel: true
},这样设置之后数字就会展示全了：
但是新的需求又来了，如果在数据特别大的情况下，左边数据占得位置就会越来越宽，导致布局不好看，所以我们可以对这种数字进行处理一下
在yAxis的axisLabel属性中进行配置formatter
formatter(v) {
v = v.toString()
if (v >= 100000000000) {
return (v.substring(0, 5) / 10) + '亿'
} else if (v >= 10000000000) {
return (v.substring(0, 4) / 10) + '亿'
} else if (v >= 1000000000) {
return (v.substring(0, 3) / 10) + '亿'
} else if (v >= 100000000) {
return (v.substring(0, 2) / 10) + '亿'
} else if (v >= 10000000) {
return v.substring(0, 4) + '万'
} else if (v >= 1000000) {
return v.substring(0, 3) + '万'
} else if (v >= 100000) {
return v.substring(0, 2) + '万'
} else if (v >= 10000) {
return (v.substring(0, 2) / 10) + '万'
} else if (v >= 1000) {
return v
} else {
return v
}
},这样设置之后的效果如下图：
这样设置的好处是左侧不会因为数据过大而一度扩展表格左侧宽度
到此这篇关于echarts柱状图坐标轴内容显示不全的两种解决办法的文章就介绍到这了,更多相关echarts柱状图坐标轴显示内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
JS控制图片翻转示例代码(兼容firefox,ie,chrome)
本篇文章主要介绍了JS控制图片翻转示例代码(兼容firefox,ie,chrome) 需要的朋友可以过来参考下，希望对大家有所帮助2013-12-12
这篇文章主要为大家详细介绍了JavaScript实现简单表单验证案例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-08-08
这篇文章主要介绍了JavaScript访问字符串中单个字符的两种方法,本文分别讲解了索引方式访问单个字符串、charAt()函数访问单个字符以及两种方式的不同,需要的朋友可以参考下2015-07-07
今天小编就为大家分享一篇在layui下对元素进行事件绑定的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
这篇文章主要给大家介绍了关于echarts实现地图定时切换散点与多图表级联联动的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2018-08-08
这篇文章主要为大家介绍了前端JS可视化学习利用向量判断多边形边界示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-12-12
这篇文章主要为大家详细介绍了JS实现用户管理系统，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-08-08
可以运行客户端exe文件的代码2008-10-10
这篇文章主要为大家详细介绍了Bootstrap Modal对话框如何在关闭时触发事件,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
这篇文章主要介绍了JavaScript中的Proxy对象的相关资料，帮助大家更好的理解和学习JavaScript，感兴趣的朋友可以了解下2020-11-11
最新评论