echarts默认不绘图但刷新后可加载出绘图

文章探讨了Echarts图表在本地环境正常显示,但在测试环境不显示的问题。原因可能包括重复ID导致的覆盖、实例未更新以及数据加载与DOM渲染时机。解决方案包括移除旧的Echarts实例,确保ID唯一性,以及在数据获取后恰当时间初始化图表。$nextTick方法也可用于确保在DOM更新后初始化图表。

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

问题描述:在本地环境中发现可以加载出绘图,但是在测试环境下绘图默认不显示,在切换DOM后再返回或刷新页面后可以加载出绘图(注:标签利用id属性来实现echarts的渲染)。

问题原因:①两个及以上的地方使用echarts图形界面,检查下每个容器的id值是不是都是唯一的,如果有重名的话,后面的会覆盖前面的,导致前面的不显示。

②再次渲染时这个id未发生改变导致ehcarts认为不需要重新渲染

(图表的dom属性中发现了一个特殊的属性:_echarts_instance_,对应的值是一个id,可能是由于再次渲染时这个id未发生改变导致ehcarts认为不需要重新渲染。)。

③从接口获取数据后DOM节点还没有被渲染。

问题解决:

①在echarts重新创建前,移除之前创建的实例并且重新创建一个Echarts实例。

document.getElementById('加载的echarts DOM元素').removeAttribute('_echarts_instance_');

②此外,还可以尝试用$nextTick的方法等数据获取后对echarts进行初始化绘图。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值