Echarts字符云tooltip显示混乱问题的解决办法

最近在在做一个项目,使用了Echarts可视化组件,由于是一个简单的功能,所以把功能实现了就没有管,确没有注意一些细节问题。在测试的时候发现了tooltip显示混乱,然而官方文档也没有提及这个问题的注意事项。通过自己的不断调试后终于把问题给解决了,所以把自己的解决办拿出来给大家分享。


解决思路:

1、就是option里的数据要对value降序排序(这一点很关键,是必须的一步)

2、后来发现上一步还是没有完全解决问题,因为当value相等的词条还是混乱,后来考虑到是不是和name的排序有关,把name按照降序排序,感觉好像解决了问题,但是最终测试还是不行(所以这一步不是必须的)

3、后来发现每一个标签有层的关系,是不是间隔太近了,它的鼠标识别错误。所以把间距调大点 textPadding: 10,果然问题有了明显的改善,到了这一步才判断出第二步不是必须的。


部分注意事项:value太小可以通过数学的方法是它增大,然后使用 formatter:function(param,ticket,callback)变回去,由于上面说到的value是要排序的,所以要谨慎使用autoSize属性,建议不要使用minSize属性,最好通过数学的方法转换(但是不推荐转换)。

size属性是文字丢失的原因,最好设置为100%

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值