Echarts使用按钮等切换图表时,原图表数据影响!

Vue中ECharts图表切换防数据污染
本文探讨了在Vue项目中使用ECharts图表时,如何避免图表切换时的数据污染问题。通过v-if控制图表的显示隐藏,并利用实例方法正确绘制图表,确保每次切换时旧数据被清除,新数据准确加载。
在项目中,常常会使用按钮等切换两图表的显示,在切换时,容易发生数据污染,原图表的数据仍会保留在页面中,并且影响例外图表的数据显示。

两个图表之间使用v-if控制显示隐藏,并且在绘制图表时,实例(vue框架)。

多次调用绘制图表时,option选项默认是合并(merge)的。

    const Chart = this.$refs.chart1;
    let Option = this.setOption(this.trendData);
	this.instance = this.$echarts.init(Chart);
	this.instance.setOption(Option, true); // 加入true 表示不合并配置
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值