最近在在做一个项目,使用了Echarts可视化组件,由于是一个简单的功能,所以把功能实现了就没有管,确没有注意一些细节问题。在测试的时候发现了tooltip显示混乱,然而官方文档也没有提及这个问题的注意事项。通过自己的不断调试后终于把问题给解决了,所以把自己的解决办拿出来给大家分享。
解决思路:
1、就是option里的数据要对value降序排序(这一点很关键,是必须的一步)
2、后来发现上一步还是没有完全解决问题,因为当value相等的词条还是混乱,后来考虑到是不是和name的排序有关,把name按照降序排序,感觉好像解决了问题,但是最终测试还是不行(所以这一步不是必须的)
3、后来发现每一个标签有层的关系,是不是间隔太近了,它的鼠标识别错误。所以把间距调大点 textPadding: 10,果然问题有了明显的改善,到了这一步才判断出第二步不是必须的。
部分注意事项:value太小可以通过数学的方法是它增大,然后使用 formatter:function(param,ticket,callback)变回去,由于上面说到的value是要排序的,所以要谨慎使用autoSize属性,建议不要使用minSize属性,最好通过数学的方法转换(但是不推荐转换)。
size属性是文字丢失的原因,最好设置为100%