先说结果:悬浮高亮导致。这可能使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)