先说结果:悬浮高亮导致。这可能使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'})
方案2
配置series 使其不可被悬浮高亮。
lineseries.emphasis.disabled = true;
END
echarts怎么近期不维护了。
后面得转 G2 了 G2 可视化引擎 | AntV (gitee.io)