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

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

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

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

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

环境

[email protected]

现象

触发步骤：

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)