好资源导航 » 文章资讯 » 在vue中实现清除echarts上次保留的数据(亲测有效)

在vue中实现清除echarts上次保留的数据(亲测有效)

2023-07-16 23:07:03 196

因为我是将echarts封装好后，父组件只要传递值就可以进行渲染。

但是点击多次数据请求的时候echarts会多次渲染。如果试过

clear()与setOption(this.options,true)没用之后。可以试一下下面的方法。

首先是在父组件中对数据进行请求，在赋值之前，先清空。

data里定义的三组echarts数据

在axios发送请求后

先清空再赋值。

补充知识：vue.js使用vue-echarts给柱形图绑定点击事件

我就废话不多说了，大家还是直接看代码吧~




importIEchartsfrom'vue-echarts-v3/src/full.js';
exportdefault{
name:'view',
components:{
IEcharts
},
props:{
},
data:()=>({
loading:true,
bar:{
title:{
text:'EChartsHelloWorld'
},
tooltip:{},
xAxis:{
data:['Shirt','Sweater','ChiffonShirt','Pants','HighHeels','Socks']
},
yAxis:{},
series:[{
name:'Sales',
type:'bar',
data:[5,20,36,10,10,20]
}]
}
}),
methods:{
doRandom(){
constthat=this;
letdata=[];
for(leti=0,min=5,max=99;i<6;i++){
data.push(Math.floor(Math.random()*(max+1-min)+min));
}
that.loading=!that.loading;
that.bar.series[0].data=data;
},
onReady(instance){
console.log(instance);
},
onClick(event,instance,echarts){
console.log(arguments);
}
}
};



.echarts{
width:400px;
height:400px;
}

以上这篇在vue中实现清除echarts上次保留的数据(亲测有效)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

在vue中实现清除echarts上次保留的数据(亲测有效)

热门推荐

随机推荐