echarts 切换时出现上一次图形残留。

2024-01-07 22:49:12

先说结果:悬浮高亮导致。这可能使echarts的bug。

正常情况出现这种问题,一般是setOption 中没有配置notMerge 导致新的配置与旧配置合并。

但是我这里始终配置notMerge: true,但仍然出现这种问题。

最后发现与鼠标悬浮有关。

环境

echarts@5.3.2

现象

触发步骤:

  1. 数据量较多时,能稳定复现。
  2. 鼠标悬浮到图表中,使折线图高亮。
  3. 此时通过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
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。