echarts词云会渲染两次
词云是比较容易出现这个问题的一个图表,所以拿词云做一个示例。
在上面这张图中可以比较清晰的看到有两个“数值模拟”的词云,在普通的业务逻辑中,我们只需要在代码中这样写
this.chart.setOption(this.config.option, true);
1
即可使图表只渲染一次。
原理:
option:图表的配置项和数据
notMerge:可选,是否不跟之前设置的option进行合并,默认为false,即合并。
1
2
3
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
2
3
4
编辑 (opens new window)
上次更新: 2024-11-06, 19:27:10