vue项目中使用echarts图表，图表需根据不同搜索条件重新渲染，问题是图表并没有完全重新渲染

vue项目中使用echarts图表，图表需根据不同搜索条件重新渲染。

问题：图表并没有完全重新渲染，或者说渲染后图表中还会看到上一次的数据。假如上一次渲染出十条数据，这次渲染出六条数据，但是显示的还是十条，前六条是本次渲染内容，后四条是上次渲染的后四条数据。

这样看来，肯定是重新渲染前需要清空数据的问题，但是数据置空的代码写了还是没能达到理想的效果。

下面是画图方法：

drawLine(){

let myChart = echarts.init(document.getElementById('myChart'));

myChart.setOption({

tooltip : {

trigger: 'axis',

axisPointer : { // 坐标轴指示器，坐标轴触发有效

type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'

},

confine: true,

formatter: function (params, ticket, callback) {//自定义tooltip显示内容

var showHtm="";

for(var i=0;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+'
';

if(i==0){

showHtm+=params[i].axisValue+'
'+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

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();//画图之前，清除内容