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,即立即更新。
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值