echarts 词云会渲染两次

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

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

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

即可使图表只渲染一次。

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

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

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

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

原理:
	option:图表的配置项和数据
	notMerge:可选,是否不跟之前设置的option进行合并,默认为false,即合并。(这里是导致二次渲染不成功的根本)
	lazyUpdate:可选,在设置完option后是否不立即更新图表,默认为false,即立即更新。
posted @ 2019-12-13 11:17  Teler  阅读(469)  评论(0)    收藏  举报