echarts彻底清空

在开发中遇到一个问题,当搜索条件改变导致数据为空时,Echarts折线图未能自动清空。通过查阅资料发现,需要在渲染前调用`clear()`方法清空画布,以确保无数据显示为空。如果需要销毁整个实例,可以使用`dispose()`方法。
摘要由CSDN通过智能技术生成

最近在开发一个需求,根据搜索条件的不同,来渲染折现图,展现数据的变化趋势。

当搜索条件发生变化的时候,折线图的数据也会发生变化,但是如果输入的条件,搜索出来的数据是空时,echarts折线图的数据却不会清空。

开始,我以为是数据发生变化,折线图子组件没有检测到,但是有数据的时候能检测到,没有数据的时候却不能发生变化,显然是不合理的。

后来查阅资料发现,在每次渲染之前需要清空一下画布;如下所示:

letmyChart=echarts.init(document.getElementById("lineContent"));myChart.clear()myChart.setOption(option);

当设置这个属性后,如果没有数据的话,则会显示空画布;如图:

当然clrear只是清空画布,并不会清空实例,如果你需要实例的话,需要用到这个属性

myChart.dispose();

官方给的说明:销毁实例,实例销毁后无法再被使用。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值