vue项目中使用echarts图表，图表需根据不一样搜索条件从新渲染，问题是图表并无彻底从新渲染
vue项目中使用echarts图表，图表需根据不一样搜索条件从新渲染。vue
问题：图表并无彻底从新渲染，或者说渲染后图表中还会看到上一次的数据。假如上一次渲染出十条数据，此次渲染出六条数据，可是显示的仍是十条，前六条是本次渲染内容，后四条是上次渲染的后四条数据。后端
这样看来，确定是从新渲染前须要清空数据的问题，可是数据置空的代码写了仍是没能达到理想的效果。echarts
下面是画图方法：this
drawLine(){spa
let myChart = echarts.init(document.getElementById('myChart'));code
myChart.setOption({orm
tooltip : {blog
trigger: 'axis',接口
axisPointer : { // 坐标轴指示器，坐标轴触发有效ip
type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
},
confine: true,
formatter: function (params, ticket, callback) {//自定义tooltip显示内容
var showHtm="";
for(var i=0;i<params.length;i++) {
var color = params[i].marker;
var name = params[i].seriesName.length>20?params[i].seriesName.substring(0,19)+'...':params[i].seriesName;
var value = params[i].data+'<br>';
if(i==0){
showHtm+=params[i].axisValue+'<br>'+color+name+':'+value;
}else{
showHtm+=color+name+':'+value;
}
}
return showHtm;
}
},
legend: {
data: this.lengData,//动态获取标题内容
top:'66%'
},
grid: {
left: '3%',
right: '8%',
top: '2%',
bottom:'35%',
containLabel: true
},
xAxis: {
type: 'category',
data: this.xData,//动态获取X轴内容
name:this.xName
},
yAxis: {
type: 'value',
name:'数量'
},
series: this.seriesData//动态获取渲染图表的内容
})
},
查询执行的方法：
countByConditions(){
this.chartLoading =true;
let param =this.getParams();
param.countType =this.countType;
this.xData=[];//清空
this.seriesData=[];//清空
let xTempdata=[];//清空
this.lengData=[];//清空
competitiveApi.countByConditions(param)
.then((res) => {
if(res.code == 200){
var resultData = res.data;
this.chartLoading =false;
//start
for(let i=0;i<resultData.companyList.length;i++){
var obj ={};
obj.type ='bar';
obj.stack='总量';
obj.name=resultData.companyList[i].companyName;
obj.data=resultData.companyList[i].count;
this.lengData.push(resultData.companyList[i].companyName)//从新赋值
this.seriesData.push(obj);//从新赋值
}
for(let item in resultData.groupList){
if(xTempdata.indexOf(item)==-1){
xTempdata.push(item)
}
}
this.xData =xTempdata.slice(0)//从新赋值
//end
}
}).catch((error) => {
this.chartLoading =false;
})
},
初始进入页面时，获取后端接口返回的数据，echarts图表显示是正常。
点击搜索后，接口传了搜索条件的参数从新获取数据了，可是，echarts图的渲染结果还保留部分上次的数据。
解决办法：
很简单，加个清除方法便可
myChart.clear();//画图以前，清除内容
