为了账号安全,请及时绑定邮箱和手机立即绑定

一次奇葩的BUG修复经历

测试提了一个bug,说图表的标签名称显示不全
图片描述
我一看,这个问题很简单吗,修改下高度不就行了!

我兴冲冲找到当前图表DIV的class,把height值从400px改为420px,改为一看,我擦,只是图表显示区变高了,标签文字区还是原样。

怎么办?哦,可能是margin-bottom的问题,从1rem改为2rem,再刷新一看,我擦,只是图表之间的距离变高了,标签区还是没变。

冷静下来思考下,嗯,这个图表是通过ECharts插件生成的,改样式没用,得改ECharts的配置

于是我在JS文件中找到了坐标轴的通用配置项:
图片描述
对照着API文档逐个看每个参数的意思。我改了nameGap的值,没用,因为是标签之间的距离的,改了interval的值,没用,因为是决定是否全部显示标签的。

这个JS文件是我们的开发人员自己写的,不是这一层的问题,那还需要继续深挖呀。肯定是ECharts插件本身的问题啊。

可是,ECharts插件我用起来都不熟练呢,我怎么能找到里面要改哪些东西!近3万行代码呀!!!

作为一个有抱负的程序员,肯定不能被这种bug吓倒啊。

于是,我打开QQ截图,测量了一下标签显示的高度,是60px
图片描述
然后,我打开echarts.js插件的代码,在里面搜索‘60’这个数字,不多,共6处。

搜到bottom: 60这处时,心里一阵激动,应该就是它了,于是把60改为了80。

刷新一看,[BINGO!] 搞定!
图片描述

点击查看更多内容
5人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消