继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

一次奇葩的BUG修复经历

古今之道
关注TA
已关注
手记 1
粉丝 0
获赞 8

测试提了一个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!] 搞定!
图片描述

打开App,阅读手记
5人推荐
发表评论
随时随地看视频慕课网APP

热门评论

这种事我也干过。。。

查看全部评论