echarts词云会渲染两次

词云是比较容易出现这个问题的一个图表,所以拿词云做一个示例。

在这里插入图片描述 在上面这张图中可以比较清晰的看到有两个“数值模拟”的词云,在普通的业务逻辑中,我们只需要在代码中这样写

this.chart.setOption(this.config.option, true);
1

即可使图表只渲染一次。

	原理:
		option:图表的配置项和数据
		notMerge:可选,是否不跟之前设置的option进行合并,默认为false,即合并。
1
2
3

但是在我们的系统业务中,因为一些特殊的业务需求,导致这个function被调用了两次,但是又不能去掉调用。也都尝试过clear()或者resize(),都无法达到要求。 后来猜测会不会是因为同时调用两次渲染导致echarts认为这是一次,所以加一个延迟加载的配置

this.chart.setOption(this.config.option, true,true);
1

发现成功了 在这里插入图片描述

原理:
	option:图表的配置项和数据
	notMerge:可选,是否不跟之前设置的option进行合并,默认为false,即合并。(这里是导致二次渲染不成功的根本)
	lazyUptime:可选,在设置完option后是否不立即更新图表,默认为false,即立即更新。
1
2
3
4
上次更新: 2024-11-06, 19:27:10
最近更新
01
java playwright爬虫
11-06
02
连接chrome调试
07-23
03
连接chrome调试
07-23
更多文章>