echarts 切换时出现上一次图形残留。
2024-01-07 22:49:12
先说结果:悬浮高亮导致。这可能使echarts的bug。
正常情况出现这种问题,一般是setOption 中没有配置notMerge 导致新的配置与旧配置合并。
但是我这里始终配置notMerge: true,但仍然出现这种问题。
最后发现与鼠标悬浮有关。
环境
echarts@5.3.2
现象
触发步骤:
- 数据量较多时,能稳定复现。
- 鼠标悬浮到图表中,使折线图高亮。
- 此时通过echarts.setOption 重新绘制图表内容。且配置setOption 参数 notMerge: true。
初始化图表
在悬浮的状态(导致折线图高亮),用同一个echarts实例setOption切换
切换后
可以看到原来的图形没有去除。
尝试
- 切换前使用echartsInstance的clear方法。无果。
- clear之后,setTimeout 延迟setOption。 无果。
解决
取消 LineSeries的悬浮高亮效果。
方案1
切换前取消图表中的高亮效果。
echarts官方提供了这个接口。Documentation - Apache ECharts
echartsInstance.value?.dispatchAction({type: 'downplay'})
但是光这样还不行。因为取消后,立马动一下鼠标,则高亮效果又会上去。特别在异步的情况下。
因此还需要禁止鼠标事件,使其不能被hover。
这里通过css point-evnets: none 来实现。
也就是在切换前使其无法触发鼠标事件。切换后再回来即可。
方案2
配置series 使其不可被悬浮高亮。
lineseries.emphasis.disabled = true;
END
echarts怎么近期不维护了。
后面得转 G2 了?G2 可视化引擎 | AntV (gitee.io)
文章来源:https://blog.csdn.net/qq_35459724/article/details/135407714
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!