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%

echarts折线图的tooltip显示可以通过设置position属性来实现固定在图形顶部的效果。在echarts的配置项中,可以通过设置tooltip的position属性来指定tooltip显示框的位置。例如,可以将position设置为固定的横向位置和纵向位置,使得tooltip始终固定在图形顶部。具体的实现方法如下所示: ```javascript tooltip: { trigger: 'axis', position: function (point, params, dom, rect, size) { return \[point\[0\] - 100, '10%'\]; // 返回x、y(横向、纵向)两个点的位置 } }, ``` 在这个例子中,position函数返回的是一个数组,数组的第一个元素表示tooltip显示框的横向位置,通过`point\[0\] - 100`可以将tooltip显示框的位置向左偏移100个像素。数组的第二个元素表示tooltip显示框的纵向位置,通过`'10%'`可以将tooltip显示框固定在图形顶部的10%位置。 通过设置position属性,可以实现echarts折线图tooltip显示框固定在图形顶部的效果。 #### 引用[.reference_title] - *1* *3* [【echartstooltip显示位置设置](https://blog.csdn.net/wbx_wlg/article/details/122686252)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [echarts 折线图 默认显示tooltip提示框内容](https://blog.csdn.net/buyaopingbixiazai/article/details/86547478)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值