程序猿较真系列--axisLabel过长解决方案(测试驱动非人类体验开发)

229 阅读1分钟

看的网上牛逼(low)的解决方案(测试不会放过你系列)

1、直接判断字符串长度截断处理,超长不展示。

2、什么旋转角度。(UI不会放过你)

我欣赏的投机型操作

3、常规操作:用formatter 方法 判断长度根据固定长度 用 \n 拼接,进行换行展示。(一般我都这么解决的。)

F85CD580-7FCA-4ea6-A23E-2FEB952FB9D2.png

但是测试要求缩略显示,并加上悬停浮现。(echarts原生不支持啊!)

8D78C9F7-E46E-4a75-9230-01F758122096.png

常规弯路操作: 缩略显示依然可以判断长度然后截断 + ... ; 然后你要加样式就得加 rich 。没错,这对了。因为没有html。然后就没有tooltip的天生的html属性施展的机会。 然后我就去找了axisLabel,html替换方法。至此彻底走偏了。然后搜百度方案: 居然是要去改插件源码。苍了天的,我才不会这么勤快去改源码。

我的终极神经方案

加event事件。mouseover 悬停展示全局tooltip. 加事件发现,axis 并没有这种事件属性。(只能说官网文档没看,不是没有是不会用。)

4745D8E8-62D0-42e6-99B8-7B22FC3A3461.png

加上 triggerEvent : true

就可以用 事件监听啦。

到此关键一步终于解决。

喵了个咪的,我这是走了多少弯路。(灬ꈍ ꈍ灬)