echarts 词云会渲染两次

本文探讨了在使用ECharts时遇到的二次渲染问题,并详细解释了如何通过添加延迟加载配置来解决这一难题,确保图表仅渲染一次。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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

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

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,即立即更新。
echarts 是一种基于 JavaScript 的可视化库,用于创建各种交互式图表和图形。其中,echarts demo 是 echarts 提供的一种示例,用于展示图的使用。 是一种以的形式展现数据的可视化方式,根据出现的频率和重要性来调整的大小和颜色,从而直观地展示数据的分布情况。 针对 echarts demo,我们可以通过以下步骤来实现: 首先,引入 echarts 库,并创建一个用于展示图的容器(例如一个 div 元素)。 接着,定义一个数据源,该数据源应包含一系列和其对应的权重(或频率)。例如,可以使用一个数组来存储这些数据。 然后,通过 echarts 的 API 调用,将数据源传入到图中。可以设置图的一些参数,例如最大数、的大小范围、的颜色等。 最后,使用 echarts 提供的渲染函数将渲染到之前定义的容器中,从而完成图的展示。 除了上述基本的实现步骤,echarts demo 还提供了其他一些功能,例如通过不同的视觉映射来调整的颜色,使图更加生动。此外,在图中还可以加入交互功能,例如点击某个后触发相应的操作。 总之,echarts demo 是通过 echarts 这个可视化库实现的一种图展示方式,通过简单的代码操作,我们可以将数据以一种更直观、更具表现力的方式展示出来。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值