echarts柱状图坐标轴内容显示不全的两种解决办法
作者:先知demons 发布时间:2023-09-06 03:57:34
标签: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
}
},
这样设置之后的效果如下图:
这样设置的好处是左侧不会因为数据过大而一度扩展表格左侧宽度
来源:https://blog.csdn.net/wzy_PROTEIN/article/details/129569022
0
投稿
猜你喜欢
- 摘要:Oracle和微软都是数据库方面的大厂商,采用两家的产品的企业也不少。今天这篇文章为大家对比Oracle和SQLServer的镜像。标
- 最近做了一个微信小程序的项目,关于后端给我传递日期的时候,我拿到的是一串数字如:createDate: 1552117531000 ,这是一
- 雅虎的BrowserPlus在曝光了N久后终于发布了,一款类似于Google Gears的浏览器增强插件。在支持的操作系统方面,Gears明
- 当在设计中我们讨论到,对于一个功能或元素是否应该添加的时候,秉承“如无所需、勿增实体”的原则,我们通常会放弃只有小众/小部分人群才会使用的功
- Session 对象 可以使用 Session 对象存储特定用户会话所需的信息。这样,当用户在应用程序的 Web 页之间跳转时,存储在 Se
- CONVERT将某种数据类型的表达式显式转换为另一种数据类型。由于某些需求经常用到取日期格式的不同.现以下可在SQL Server中将日期格
- 我在用 ASP 写一个数据库的应用的时候,总是被那些看起来好好的SQL语句执行起来产生的错误代码搞得头疼,请问有没有更好的解决办法啊?有,我
- php获取域名的google收录示例function get_index($domain){ $url="http://www.g
- 人一旦习惯了某些东西就很难去改,以及各种各样的原因,新的浏览器越来越多,而老的总淘汰不了。增长总是快于消亡导致了浏览器兼容是成了谈不完的话题
- jquery有一个插件叫Timer,很有意思,咱来实现一个简版的yui3的node timer。但还是应当首先交代下yui3的node扩展的
- 问题1:使用.net2005自带的SQL-Express连接不上。解决方法:1.网络防火墙阻止数据库连接;2.默认SQL-Express没有
- 使用select @@identity 得到刚插入数据的ID1.适用于所有 ADO 版本<%Dim loConn, 
- 在项目中遇到需要支持上传gif图片,并把其分解的帧图片一次展示给用户。话不多说直接上代码分解gif图片需要使用libgif-js这个库!1.
- 发帖或者回帖的时候,系统会提示银两或经验增加的效果,慢慢出现又慢慢消失,用于取代对话框的那种是如何实现的?用google的jquery ap
- 1.首先,我们需要过滤所有客户端提交的内容,其中包括?id=N一类,另外还有提交的html代码中的操作数据库的select及asp文件操作语
- 修复Access数据库,我们一般使用微软Office 97中带的Access 97对数据库进行修复和整理。Access数据库被损坏分以下几种
- 一直很想做这个效果,原理是监听鼠标滚轮事件;可将此效果继续发散到其他应用上,如图片缩放,页面缩放等。演示:<!DOCTYPE html
- 本文实例为大家分享了H5+css3+js搭建带验证码的登录页面,供大家参考,具体内容如下login.html<!DOCTYPE HTM
- 给zblog添加上“运行代码”的功能,这是“密陀僧”修改z-blog源码,给z-bog增添的新功能。这个方法出来很久了,我现在才加上还不晚吧
- PL/SQL单行函数和组函数详解 函数是一种有零个或多个参数并且有一个返回值的程序。在SQL中Oracle内建了一系列函数,这些函数都可被称